Transform Web Forms into Conversations with This Script

If you’ve ever wanted to humanize your web forms then you’ll adore the Conversational Form script created by SPACE10.

This script automatically converts all your input fields into Q&A type chat messages. The interface also changes into an SMS-type text field where the user types their answers and the chat script responds.

I’ll be the first to say this is not gonna be useful to everyone. It doesn’t offer the best user experience for every site but it’s definitely a unique idea that I’ve yet to see anywhere else.

conversational form input fields

You can take a peek at the live demo to see how it works and what it’ll look like on your site.

This is only one example of what you can do with this chat script, and it certainly offers a lot of customization for developers.

You just need to include one JS script into your page (no dependencies) and then setup your form using custom attributes. These are covered in detail on the main GitHub repo which also includes a download link for the entire script.

The chatbot automatically saves responses from each question, then stores those responses inside the HTML input fields. Pretty cool right?

You can read more about this process on the company’s introductory blog post covering how they got the idea & how they built this script.

conversation form - animated example

With custom options, you can add emojis, related images, or even define custom text with styles like bolded items or anchor links.

This is truly one of the most dynamic web form experiences I’ve ever seen. It takes custom UI design to a whole new level. And this definitely shows just how far the web has advanced in a couple decades.

For a live demo be sure to check out the conversational forms page which includes a link to the GitHub repo and a live download link.

Plus the entire thing is released under the MIT license so it’s free to use on any website.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail