How to Turn a Form into a Conversational Form

A conversational form presents your form fields one at a time as a chat, with each field label shown as a message. This script uses the open-source Conversational Form library by SPACE10.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Before you start

The script and CSS are hosted on GitHub as this gist. You can also download a ready-made .unbounce page to import.

Build the conversational form

1. Add a form to your page.
2. Add your fields, and write each field label as a question or message.
3. For each field, turn off Auto-generate from Field Label and enter a short field name and ID.
4. Add a box element and place the form inside it. The box size sets the size of the conversational form.
5. Copy conversational_form.js from the gist and add it to the JavaScripts section with placement set to Before Body End Tag.
6. In the script, replace the bot and user thumbnail image URLs with your own hosted images.
7. Copy conversational_form.css from the gist and add it to the Stylesheets section.
8. Save and republish the page.