Are you new to the concept of an interactive conversational form? It's the newest approach to creating interactive forms in a way that feels natural on desktop or mobile.

Newbie or a veteran, if you are interested in how to create one without coding, you came to the right place. This article demonstrates the whole process through a real use case (Hootsuite sales contact form) AND you get to try the conversational result at the end!

What is a Conversational Form?

A conversational form turns the most utilized user interface online - the web form - into a conversation. They are the next step in the evolution of interactive forms. Contrary to traditional contact or survey forms that present all questions at once, conversational forms can create a connection with the user,take one question at a time AND personalize the questions in real-time.

‍In other words, it enables people to get in touch with businesses in a more relatable way.

Imagine trying to contact a sales team or make an appointment online. Imagine that instead of filling out a tedious series of text boxes on the screen, you can submit all the necessary information using a friendly bot?

More importantly, imagine that you as a business are able to observe and analyze users’ progress through the dialog flow, identify points of friction as well as catch opportunities in real-time.

‍Conversational interfaces such as this type of interactive forms are potentially game-changing, yet they still remain vastly unleveraged.

Why Choose an Interactive Conversational Form?

The battle of chatbots vs forms is a fierce one!If you are still unsure whether or not you should deviate from the path well-traveled, below are a few compelling reasons...Take, for instance, contact forms. They have the lowest number of form fields - around 4 on average. Yet, shockingly, they continue to have the lowest conversion rates. According to Formstack study of 2015, their conversions average at painful 1%!!!

The same study also revealed that conversions increase significantly with multi-page forms (13.85%) as supposed to the single page forms (4.53%). Venture Harbour argues the same thing with even more impressive results showing that multi-page forms can increase conversions by an incredible 300%.

Conversational forms allow you to break down the information you require into multiple steps which reduces psychological friction and the first impression is far less overwhelming.

Another persistent issue with online forms is form abandonment. According to Manifest, 81% of people have abandoned a form after they had begun to fill it out. The majority of businesses have no way of knowing why or when people did so which makes improving form elements rather difficult.

Conversational forms can help with all that. Not only they allow you to collect data as the user/lead progresses through the dialog flow conversation experience provides a sense of interaction.

And, after all, interactive content can do miracles for engagement and conversation.

What is a Conversational Form Builder?

A conversational form builder is an online tool or software as a service that enables you to turn forms into conversations and implement them on your website without coding. Best form builders on the market offer a variety of powerups such as integration with your CRM or other management apps. For instance, Landbot offers out-of-the-box integrations such as Google Sheets, Zapier, Mailchimp, Slack & email notifications,

Can You Build a Conversational Form without Coding?

So far, businesses, developers, and designers had to rely on open source frameworks and quite a bit of code to create complex interactive forms with a conversational flair.Sure, Typeform established itself as the ultimate form creator tool but the elements of interactivity, conversation, and flexibility remain in the background. Landbot can be considered a Typeform alternative in so far as it allows you to create forms.However, forms created with Landbot:

• Do not require any coding experience (but allow code modifications for those who have experience);
• Take a form of conversational experience;
• Gather detailed analytics from start to finish of each interaction;
• Can be presented in multiple formats including web page embedding, landing page, pop-up, or as part of Facebook Messenger;
• Can trigger human takeover when a high-profile case is identified.

Enough talking, let’s turn the theory into practice!

Use Case: Hootsuite Contact Sales Form

Let’s take, for example, Hootsuite’s form to contact their sales team.It’s fairly simple and clean featuring 7 fields.

Though it wasn’t always this way. Hootsuite used to have a much more detailed contact form featuring 10 fields.

They did a good job of simplifying the design though they did have to sacrifice a few fields they considered important and which would help them score their prospects a bit more precisely.

Another issue with this contact/lead generation form is that if a prospect clicks on “Contact Us” they may hope to find contact information to get in touch with someone from the sales team immediately. Yet, that is not the case.

On the right side of the new design, there is a chat-like bubble with “Get Support Now” which suggests that those in a hurry can get in touch with someone immediately. However, once you click on the link, another contact form pops up, this time the traditional “Email Us” form which might be off-putting.

What if prospects would get to chat with “someone” straight away?

Let’s give Hootsuite’s form a conversational makeover.

Step-By-Step Guide to Creating Conversational Form with Landbot

1. Set up Your Landbot Account (fast & free)

Naturally, nothing can be done if you don’t have a Landbot profile.

‍Sign up and create your free account - you can do so easily, no credit card required.

2. Create a New Landbot

After signing up you will gain access to Landbot plarform. Here is a little overview:

Landbot offers quite a few conversational form templates to help you get started. However, for the purpose of this exercise, we will work on the interactive form from scratch. When you do so, you will be redirected to the chatbot creator where you can start working on the dialogue flow:

To follow a full video course on how to create conversational forms for the web, visit our FREE Landbot Academy

3. Put Your Questions in Order

To avoid changes and fixes later on in the process, it’s smart to create a list of data you want to obtain (questions you want to ask) in order in which you want to do it.

The Hootsuite contact form asks for the following info:

• First name
• Last name
• Business Email address
• Company
• Phone Number
• Title
• Company Revenue

We will adjust the order of the information and situate the most committing questions (email and phone number) towards the end of the conversation. Also, we will also incorporate some of the questions that were omitted before:

• First name
• Last name
• Company
• Title
• Company Revenue
• Email
• Phone number

4. Personalize the Welcome Message

When you access the builder, there is a pre-set welcome message. However, it can be personalized in any way.

We customized the text fields by creating a Hootsuite exclusive chatbot persona and making an introduction.

‍Creating a chatbot persona increases interest and engagement as well as gives space for expressing the tone and personality of your brand.

Next, we changed the Gif by accessing the Giphy database by clicking on the edit icon in the upper left corner of the existing gif:

5. Create a Rapport with the User/Lead

Before you jump down the question funnel, it’s a good idea to engage to create a rapport.

To start, click on the green dot on by the answer button and drag an arrow from it to create a continuation of the conversation. A menu will appear with a variety of choices allowing you to say something or ask a specific question, etc.

 Your browser does not support the video tag.

We asked for a name and used this information to personalize the conversation right from the start:

To divide a single message into multiple messaging bubbles simply press the PLUS sign on the left side of the field.

To change The text field to button responses instead, click “Buttons” option on the bottom:

6. Branch Out a Little

Turning web forms into conversation gives you the opportunity to branch out a little and adjust the dialogue to the mood of the user.

From that point on, you can unite the threads and start asking the important questions!

7. Ask the Questions (and Make Answering Them as Easy as Possible)

Once you set up the scene, you can start asking questions that will give you the qualification data you need.

While some answers need to be typed in, others can be presented in the form:

• Autocomplete suggestions

• On-screen buttons

P.S.: Remember to name your variables appropriately (we will see why in a bit!)

8. Allow for Human Takeover

In case your bot identifies a high-value lead, you can turn your form into a live chat and transfer the conversation to one of your sales representatives.

This way they don’t need to talk to all prospects but still catch the most important ones early (such as a company with annual revenue over $10 billion).

Landbot’s chatbot-to-human handoff has 3 different assignation types:

• Simple assignation - the lead is transferred to live chat to an available agent without any additional questions
• Default assignation - allows you to ask your users some questions before the conversation is assigned to one of your available agents. For instance, you can add questions like email (to be able to reach them in the future) or inform the users about your availability in case there are no agents connected.
• Custom assignation - you can select which additional questions to ask the users

9. Set up a Webhook to Verify Email Address and/or Phone Number

A webhook is a way for your form to provide a third-party app or server with real-time information and get immediate feedback.

For instance, an email verification webhook will send the inserted information to a 3rd party app or server to verify its validity. It’s not necessary for your form to function, however, it’s useful in weeding out false data.

Under normal circumstances, implementing a webhook would the job of a programmer.

Though, that is not the case with Landbot.Let’s implement the email verification webhook together…After you have asked the user to provide their email, drag the green arrow to create a webhook card.

Since we want to verify the validity of the email address, we need a 3rd party provider. For the sake of the example, I will use a freemium Mailboxlayer verification service.

Webhook Implementation Steps

• Sign up & create an account on Mailboxlayer
• Once your account is active, copy the URL in the gray area under "Validate Email Address"

• Paste the link into the Landbot app’s Webhook field "URL & Method"
• Keep the method set to “POST”

• Activate the "Send Params?" section

• Based on the data in the gray box on your Mailboxlayer account, create parameters and their variables.

👇👇👇

• ​Click “TEST” (Please note, you need to use a "dunny values" for the email field to test it. If the test is successful you need to change the email address to your bot's true variable - in this case, "@email")
• The Test Response will provide you with a list of data.

• If you don’t know what this data means, simply go to your Mailboxlayer account and access support documentation. As you can see below, there are many different variables. So, besides checking whether the email is valid or not, you can have the service score the email based on all the variables such as whether or not its a free or paid (company) email, etc.

• Next, activate the “Save Response” field (you will only be able to complete this step if you completed the test)
• Click “Select data from the response” and choose the response which you want to save;
• Create a @variable for that response.

• Based on the variable description from Mailboxlayer, I picked to save the following variables which will help you validate and score email addresses. You can choose to save as many or as view data as you need:

• Click “Save” on the bottom of the Webhook window to save all the changes you made
• Continue building your flow

See?No need to be a coder!You can replicate the process to verify phone numbers, convert currencies, and more. If you are interested, we got a more detailed guide to Webhooks on our Knowledge Base!

10. Give the User a Chance to Doublecheck the Submitted Info

It’s natural to make mistakes so before you let your prospect go, make sure that all of the previous questions have been answered correctly.

Make a recap and give them a chance to make changes if necessary.

11. Automatically Store the Data in Google Sheets

Landbot allows you to integrate your conversation-based interactive form with Google Sheets and full all the information through.

To set up Google Sheets integration (Landbot Airtable integration is also possible), you need to create a Google Sheet with respective variables, before you try to integrate it inside the builder.I created a spreadsheet to collect not only the information submitted by the user but also the email verification data provided by the 3rd party:

If you are not connected with Google Account, click “Add Account.”Once done, select your email address in the field which will give you access to all spreadsheets you have access to on Google Drive.

Mark the Google SpreadSheet you want to use to store the information.

Next, select “Insert a new row.

”You will be able to assign a variable to each heading on the spreadsheet.

Click “Save” once you have added all the variables you want to collect.

The spreadsheet will update will every new conversation:

12. Consider Other Handy Integrations

Landbot allows for a variety of integrations to help you automate your processes.

For instance, you can send emails directly to your MailChimp mailing list; set up notifications for one of your Slack channels; send your leads a follow-up email directly from the chat flow; or connect the form with Google Analytics.

13. Say Goodbye

Since this is a conversation, make sure you give the interaction a proper ending and say goodbye.

The pre-designed Goodbye block allows you to share your social media buttons, offer “Start Again” button or redirect the user to a different URL.

The URL redirect can be particularly useful if you are using the conversational form to access gated content.

14. Design Your Form

Once you are done with your dialogue flow, click on “Design” option in the header.

Use the menu on the left side to change the colors, fonts, avatar, logo, and header message of your bot.

You can use pre-designed schemes or modify the bot using your brand colors.

15. Preview the Form

Frankly, you can preview your bot at any stage of creation by clicking on the “Preview” button in the upper right corner.In the preview, you can interact with your bot and check that your dialogue flow doesn’t have any flaws or dead ends. You can also see how it will look like both on desktop and mobile.

If it does, simply select “Close Preview” and go back to the builder to fix them.

16. Manage Settings

“Settings” field provides an opportunity to tune out the little details.

For example:

• Custom Responses allow you to adjust (or translate) pre-set input texts;
• SEO and tracking section enables you to set up META data and tracking with Google Analytics/Facebook Pixel;
• Typing Emulation section lets you control the speed with which the bot’s messages appear on the interface.

17. Share your Conversational Form

Having created the final design and selected appropriate settings, you are ready to share your conversation-driven interactive form with the world.‍

Again, the “Share” section provides multiple options to introduce the form to your prospects.

“Embed into your website” section gives you a chance to present the form as a:

• Full landing page
• Popup
• Embedded section
• Live chat bubble

The “Share” section assigns your form a unique URL that can be shared independently on social media.

18. Analyze Flow Results

In-app analytics are available. They show:

• Basic metrics on the number of chats started; leads collected and a number of chats finished all the way to the end;
• The journey of each individual user;
• Detailed flow analytics show where people exit the conversation prematurely.

Naturally, if you integrated Google Analytics, you will have access to other metrics as well.

19. Give it a Try

Give the form we created a try!

DISCLAIMER:

• This form has nothing to do with Hootsuite, nor you will be able to get in contact with them using it.
• Given that this is an example form, while you will be able to all the questions preceding it the “Human Takeover,” the feature will be disabled and you won’t be able to speak to an agent.

Conclusion

Did we get you hooked or what?

As you can see creating conversational forms doesn’t have to be about coding nor it needs to be complicated.

‍Landbot’s drag and drop interface take care of all the complicated stuff. Plus, the number of possible use cases is endless ranging from contact and lead gen to job application forms.

All you need to take care of is designing a conversation that converts.

In a hurry? Check out our predesigned contact form template!