interactive-conversational-form-builder

Are you new to the concept of a conversational form?

Newbie or a veteran, if you are interested in how to create one without coding, you came to the right place.

There is hardly any business that wouldn’t rely on an online form to gather leads for those curious enough to have some questions.

Ironically, there is also hardly any UI element more hated by users than an online form.

Hence, there is a need for a little revolution.

What is an Interactive Conversational Form?

A conversational form turns the most utilized user interface online – the web form – into a conversation. Contrary to traditional contact or survey forms that present all question at once, conversational forms allow the bot to create a connection with the user and take each question one at a time mush similarly to a face-to-face conversation.

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 Consider Creating a Conversational Form?

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. 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 Conversational Form Builder?

A conversational form builder is an online tool or software as a service that enables you to design and build conversational forms 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.

How to Create an Interactive 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 interface;
  • 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: HootSuit 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.

hootsuite-contact-form

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

hootsuite-old-contact-form

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.

hootsuite-email-us

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 Lanbot profile.

create-landbot-conversational-form

Visit Landbot homepage and create your free account by clicking to sign up or chat with our bot and (immediately or after some questioning) click t “Yes! Create my bot.”

2. Create a New Landbot

After signing up you will land on the platform dashboard.

The Dashboard offers quite a few conversation templates to help you get started.

landbot-templates

However, for the purposes of this exercise, we will work on the interactive form from scratch by clicking “Create a new Landbot”

landbot-app-dashboard

You will be redirected to the chatbot builder where you can start working on the dialogue flow.

landbot-builder

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.

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.

welcome-message

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 adjusted the changed the Gif by accessing Giphy database through clicking on the edit icon in the upper left corner of the existing gif.

IMG9

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 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.

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

start-dialogue-flow

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

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

buttons

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.

branching-out-dialogue-flow

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

autocomplete-responses-form-designing

  • On-screen buttons

multiple-choice-responses-combo-box

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).

human-takeover-interactive-form

Landbot’s human takeover 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

human-takeover-conditions

 

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

A webhook is a term 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 a 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.

webhook-email-verification

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”

mailboflayer-api-key-data

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

email-verification-webhook-in-landbot

  • Activate the “Send Params?” section

setting-up-webhook-on-landbot-params

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

interactive-form-integration

👇👇👇

setting-up-email-verification-webhook

  • ​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.

test-webhook

  • 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.

mailboxlayer-documentsation

  • 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.

saving-webhook-responses

  • 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:

selected-variables-for-asving

  • 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.

Recap-information-form

 

11. Automatically Store the Data in Google Sheets

Landbot allows you to integrate your conversational form with Google Sheets and full all the information through.

To set up Google Sheets integration, 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:

Google-Sheet-integration

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.

google-sheet-online-form-integration

Next, select “Insert a new row.”

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

assign-variables-to-columns

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

The spreadsheet will update will every new conversation:

spread-sheet-integration-check

 

12. Consider Other Handy Integrations

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

landbot-integrations

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.

goodbye-message-online-form

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.

interactive-form-design

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.

online-form-design

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.

conversational-form-preview

 

16. Manage Settings

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

landbot-FORM-settings

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.

landbot-FORM-settings-2

 

17. Share your Conversational Form

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

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

online-form-embed

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

  • Full page on your website
  • 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 which shows where people exit the conversation prematurely.

landbot-form-metrics

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 question 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.

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

Related Post