Conversational Form in 65 lines of code - Here's how I built it
Overview
Hey, you right there. Are you feeling lonely (not me) and wish that your form is more fun and interactive? You’ve come to the right place!
I came across Conversational Form by SPACE10, which allows one to easily turn any web form into conversations instead. From the project’s webpage itself:
It features conversational replacement of all input elements, reusable variables from previous questions and complete customization and control over the styling.
In this demo, I implemented the following features with just 65 lines of code:
- Asking a question and displaying the answer back in a respond
- Asking a question with images and texts as answer options
- Conditional rendering of questions
Using ConversationalForm
To use the ConversationalForm library, we have to first include it in our project.
For the simplicity of this project, I will be importing it using CDN.
You can also download/install the latest release by cloning the repo or installing it with npm/ yarn.
More can be found in the source code’s repository.
Responding with the user’s answer
After asking the question, you can insert the user’s response in your message by calling {input-name}
. In my case, it’s {name}
.
Providing answer options with images
I think the code is pretty self-explanatory - you can specify the path to the images using cf-image
.
Conditional rendering of questions
In this demo, I would like to conditionally ask the user what is their favourite song(s) based on the band they have selected.
For example, if they have selected Forests as their favourite band, these will be the options.
And if they have selected TMP instead, a different set of options will be presented.
This can be easily achieved by adding a cf-conditional-INPUT-NAME
in the select
tag. Since the previous question was using fav-band
as the name and we only want this question to be asked if they have selected Forests previously, we will add cf-conditional-fav-band="Forests"
.
Customizing the form
You can configure the form to better suit your needs. In my case, I want to
- Change the avatar images
- Simply add the image sources to
userImage
androbotImage
- Simply add the image sources to
- Adding a callback on submitting
- Add your code to
submitCallback
- In this demo, I console logged the data collected
- In your case, you can use this to send the data to your API
- Add your code to
Conclusion
I find the ConversationalForm library to be really easy to use and works pretty well right out of the box.
At the time of my writing, the project is at v1.0.0, so you might want to consider it twice before using it for critical forms.
Nevertheless, there are still some areas of improvement that I hope to see:
- More features such as sending a message that includes media (gif, video, images, files etc.)
- Integration with more 3rd-party software (currently there’s GA and Mailchimp in the examples)
Reference
A little about what I do at NodeFlair…
The world today runs on code written by developers that solve the world’s problems and impact lives.
Now, imagine a world where developers get to code at a place where they find purpose in their work. This meaning could translate into drive that pushes boundaries to solve more of the world’s problems.
That’s why at NodeFlair, we make it our mission to improve the world by empowering developers to code() at where they love.