Conversational Form

In this example below you will see how to do a Conversational Form with some HTML / CSS and Javascript

This awesome code was written by ryanerrington, you can see more from this user in the personal repository.
You can find the original code on
Copyright ryanerrington ©
  • HTML
  • CSS
  • JavaScript
    <form id="conversational">

    <input type="text" name="_gotcha" style="display: none">
    <input type="hidden" name="_next" value="">
    <input type="hidden" name="_subject" value="Submission on ConversationalForm">

    <label for="your-name">Name</label>
    <input cf-questions="Hi there! What's your name?" type="name" class="form-control" name="your-name" id="your-name">

    <label for="your-occupation">Occupation</label>

        <input cf-questions="Great to meet you, {previous-answer}! I'm a web form, what do you do?|Awesome, {previous-answer}! And what do you do?" type="radio" name="your-occupation" id="your-occupation-1" value="developer">

        <input type="radio" name="your-occupation" id="your-occupation-2" value="designer">

        <input type="radio" name="your-occupation" id="your-occupation-3" value="curious-mind">
        Curious mind

        <input type="radio" name="your-occupation" id="your-occupation-4" value="lost">
        Lost cause

    <label for="your-company">Company</label>
    <input cf-questions="Which company are you with?" type="text" class="form-control" name="your-company" id="your-company">

    <label for="your-opinion">Will conversational interfaces be everywhere?</label>
    <select cf-questions="Do you think conversational forms will replace web forms in the future?" name="your-opinion" id="your-opinion" class="form-control">

    <label for="your-email">Email</label>
    <input cf-questions="If you want to stay updated on conversational interfaces from SPACE10, please give me your email." type="email" class="form-control" name="your-email" id="your-email">

    <label for="thats-all">Final go</label>
    <select cf-questions="That's it for now! Have a great day." id="thats-all" class="form-control">
        <option>You too!</option>

    <button type="submit" class="btn btn-default">Submit</button>


/*Downloaded from */
    html, body {
    height: 100%;

form {
    visibility: hidden;

form, #conversational-form {
    margin: 0;
    padding: 20px;
    height: 75vh;
    width: 60vw;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

/*Downloaded from */
    var form = document.getElementsByTagName('form');

    window.ConversationalForm = new cf.ConversationalForm({
        formEl: document.getElementById('conversational')