<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<form id="form" cf-form>
  <input type="text" name="browsers" list="browsers" cf-questions="使用しているブラウザは何ですか?" />
  <input type="email" name="emailReqTest" cf-questions="あなたのメールアドレスを教えてください※hoge@example.comとかでいいです" />
  
  <input type="email" value="hoge@example.com" name="emailReqTest2" cf-questions="確認の為、もう一度同じメールアドレスの入力をお願いします" required />
  <input type="number" min="3" max="5" required cf-error="不正解です。3と5の間の数字は何でしょう?" name="numValTest" cf-questions="問題です。3と5の間の数字は?" />
  <input type="password" value='123456789' name="pwdTest" cf-questions="8文字以上でパスワードを決めてください。" minlength="8" required cf-error="8文字以下しかないようです。再度、8文字以上でパスワードを決めてください" />
  <input type="tel" value="123-456-7890" name="telTest" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" cf-questions="電話番号を教えてください (format: 123-456-7890)" required />

</form>
<div id="cf-context" role="cf-context" cf-context></div>
#cf-context { 
  width: 100vw; 
  height: 100vh; 
} 
window.onload = function() {
  var conversationalForm = window.cf.ConversationalForm.startTheConversation({
    formEl: document.getElementById("form"),
    context: document.getElementById("cf-context"),
   
    submitCallback: function() {
     conversationalForm.addRobotChatResponse("完了しました!お疲れ様でした"); 
    }
  });
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/space10-community/conversational-form@latest/dist/conversational-form.min.js