Conversational Form in 65 lines of code - Here's how I built it

answer-options-with-images.html

<fieldset cf-questions="What is your favourite band?">
  <label for="fav-band-forests">Forests
    <input type="radio" name="fav-band" id="fav-band-forests" value="Forests" cf-image="/assets/fav-band/forests.jpg">
  </label>
  <label for="fav-band-tmp">TMP
    <input type="radio" name="fav-band" id="fav-band-tmp" value="TMP" cf-image="/assets/fav-band/tmp.jpg">
  </label>
  <label for="fav-band-xfr">Xingfoo&Roy
    <input type="radio" name="fav-band" id="fav-band-xfr" value="Xingfoo&Roy" cf-image="/assets/fav-band/xfr.jpg">
  </label>
</fieldset>

conditional-rendering.html

<select cf-conditional-fav-band="Forests" cf-questions="What is your favourite song by <strong>{fav-band}</strong> then?" name="fav-song" multiple>
  <option value="Kawaii Hawaii">Kawaii Hawaii</option>
  <option value="Tamago">Tamago</option>
  <option value="Cup of Tea">Cup of Tea</option>
  <option value="This Town Needs Fun">This Town Needs Fun</option>
  <option value="Who Cares, Really?">Who Cares, Really?</option>
</select>

customizing.js

window.onload = function() {
  var conversationalForm = window.cf.ConversationalForm.startTheConversation({
    formEl: document.getElementById("my-form-element"),
    userImage: "/assets/userImage.jpg",
    robotImage: "/assets/robotImage.jpeg",
    submitCallback: function() { ... }
  });
};

importing.html

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/space10-community/conversational-form@1.0.1/dist/conversational-form.min.js" crossorigin></script>

responding-with-users-answer.html

<input type="text" name="name" cf-questions="What is your name?" required />

<cf-robot-message cf-questions="Eww, what kind of name is <strong>{name}</strong>. Oh well, anyway..."></cf-robot-message>

https://adriangohjw.github.io/posts/2021/09/12/building-conversational-form.html