Online forms have a long and storied history in the world of business, guiding leads and prospects through a number of online activities. Whether it’s signup, subscription to a service or newsletter, filing in transaction or shipping details, or submitting feedback, forms accompany leads and customers through key touchpoints on their journey. And if you are in a process of launching your online business, or simply looking to improve it, wanting to create a form that converts should be on the top of your list.

While it might seem quite straightforward, knowing how to create an online form that seamlessly blends into the browsing experience isn’t simple. This “how to make an online form” guide not only covers all the bases but also opens your eyes to the top growth hacking form conversion solution of today - automated conversations.

What Is an Online Form?

An online form (also commonly referred to as an HTML form or a web form) is an interactive webpage element that invites active user input. The data user shares through it is typically processed by the server. Hence, the most common use of online forms is lead generation.

There are countless kinds of online forms ranging anywhere from “Contact Us” to event registration, gated content guards, lead qualification, and more. As per UI, online forms are embedded into the website structure or, at times, make up the entirety or a landing page or a popup.

What Are the Basic Online Form Elements?

Web forms are usually composed of one or several questions/data requests. These go hand in hand with fields accompanied by instructional text where users can type the necessary answers or select one from the choices available.The most common types of form fields include:

• Text (input) fields are blank boxes that allow users to type free input use as “User name” or “Password” fields. These types of fields are best for dealing with open-ended questions or those with infinite possible answers such as the two mentioned above.
• Auto-complete fields are blank fields that present users with options as they start typing. They are most effective when there is a finite number of answers but too many for a multiple-choice such address fields
• Drop-down lists: Drop-down lists are fields that open up a list of options once the user clicks on them. This is often used when it comes to questions such as company size or leads role.
• Radio buttons are tiny circular buttons that typically come as a list of two or more optional answers and the user can select a single answer by clicking it. Once the user makes a selection, the radio button shows an added dot in their center.
• Checkboxes are the small square boxes you can tick or un-tick by clicking on them. They are often used in multiple-selection questions or as a form for the user to give approval (e.g., agree to the terms and conditions).
• Submit button is the call to action of the form. It’s the last button at the end of any online form created to do just that, submit the information. The button copy is often something along the lines of “Send” or “Submit” or “Request a Quote”.

What are the Most Common Issues with Online Forms?

Forms are an essential part of an online business model. Yet, they don’t always perform the way we would want them to.

The most cited deterrent when it comes to form submissions is the number of fields. Many older studies suggest the longer the form the worse the conversion rate. One of the most famous says reducing the number of fields in the form from 11 to 4 can result in a 120% conversion increase.While that approach might work in some cases, today, we know it’s not that simple.

There are many factors involved in form efficiency to wrap them all up with a blanket statement that shorter is better. Certainly, you want your form to be focused and to the point to not alienate your targets, but there are more aspects to consider such as:

• Conversion type (Email signups, account creations, and lead qualification use cases all require very different forms.)
• User expectations (If the prospects see value in filling in a field or many of them, they’ll not have a problem to do so.)
• How much data you need for the form to fulfill its intended purpose (Sometimes adding friction in form of additional questions is the worthy price to pay for quality over quantity.)
• Best practices (Just because something works “in general” doesn’t mean it’s the best thing for your use case. Think of them as guidelines rather than “must-dos”.)

Rather than fixating on the number of fields investigate:

• Are you asking for more information than is necessary?
• Are you asking for sensitive data before your lead is comfortable?
• Is the format of your form intimidating (e.g. like it will take way too long to complete)?
• Do your leads have all the information they need or is there a space for confusion? Are you addressing those doubts?
• Is it obvious that they are in a secure browser environment?
• Is your form mobile friendly?
• Are you respecting data protection laws? Do you come off as a credible business?

From our experience, when businesses start to ask these questions, they often come across a few knots.

For example, when it comes to the form length, many brands target two or more audiences and while they admit not all of them need to answer the same questions, having different options for each is not great for the UI or the UX. On another note, many would find it useful to answer user doubts or provide extra information but doing so make the form look heavy and unfriendly, especially on mobile.

Last but not least, many companies suffer the lack of insights into why visitors start but won’t finish filling up a form. Finding out which of the above is the issue is a long A/B testing process that costs conversions.

Luckily, in 2020, there is an easy answer to these seemingly complex issues. It’s called conversational online forms.

What is a Conversational Online Form and Why Use One?

A conversational form is a form presented as an automated conversation/chat. One doesn’t usually picture a form when hearing the word “chatbot”. However, these little conversational assistants have shown more than apt for the role of conversion booster.

‍The name “conversational forms” or “chatbot forms” might lead you to believe high tech is involved. However, they are no AI marvels. Conversational forms are rule-based, in other words, they lead their users down unique but predetermined paths. That’s why some call them choose-your-own-adventure templates.

Also, thanks to the rise in no-code online form builders, they are incredibly easy to create, as well. For instance, Landbot makes it a simple question of drag and drop.But how do they tackle the issues mentioned in the previous section?In a battle of chatbot forms vs web forms, chatbots boast several advantages:

1) They Offer Personalized UX Through a Single Funnel

With conversational forms, there is no need to have a different bot for every audience type. You can easily design your bot to identify to which target group a particular user belongs by asking a couple of questions and then send them down the path most suitable to his or her case.

This can be done by simply diversifying the flow through buttons or by using a feature known as conditional logic. Unlike buttons, conditional logic allows you to condition the flow based on one or a group of answers in an “if this then that” fashion. In this sense, conversational forms are extremely helpful when optimizing data collection. They allow you to only ask relevant questions on a case-by-case basis, thus limiting the number of “fields” and improving UX.

2) They Can Offer Additional Information without Cluttering the Interface

Another advantage lies in the chatbot’s ability to multitask without overwhelming the user. Your chatbot’s primary role might be collecting customer data but it can also moonlight as an FAQ assistant.

So, while the leads are filling in your form, they can get more information about the questions themselves, or about your brand, product or service. That is only if they choose to ask for that information!

To sum it up, those that doubt have their questions answered, those that don’t get the speedy and frictionless experience they want.

3) They Track User Behavior Throughout the Flow

A PDF form or a traditional online contact form don’t betray any information until they are actually submitted. You only know that someone has downloaded it or visited the page where it’s located. But what happened next? Why didn’t they submit?

Conversational forms store all behavioral data whether or not a form is submitted enabling you to see which questions have the highest drop-off. You can see when a user started and which paths they took. When analyzed quantitatively, this information helps you identify points of friction and fix them accordingly.

On another note, it also allows you to save the information and, for example, export it to Google sheets, throughout the conversion. That way, even if a user drops off before completing the entire form, you are able to collect partial data. For instance, if the email is among that partial information, you can set up the lead for a personalized email nurture campaign.

4) Their Multiple-Steps Approach Reduces Friction

Conversational forms don’t blurt out all of the questions at the user at once. Instead, they reveal them continually, one by one, as one would do in a conversation. The multiple-step approach has been proven effective even in traditional forms. However, the chat environment gives it another organic layer that improves the overall experience.

How to Create a Form (that Converts) for your Website?

If you are set to create a form on your website, you should jump the drama and go straight to forms that are not only flexible but also more equipped for lead generation.

1. Landbot: Conversational Form Builder

In this tutorial, we will show you how to create a form, the conversational kind, using Landbot no-code chatbot builder. The graphic UI works on a simple premise of drag-and-drop blocks and arrows that represent the conversation flow:

If you don’t have an account yet, you can sign up for free (no credit card required).

2. Use a Template or Build from Scratch

Despite how simple it is to create an online form from scratch using Landbot, you can also do it using a pre-built conversational form template. There is a whole library of them featuring use cases from lead generation to surveys and questionnaires.

3. Get Comfortable with the Top Conversational Form Features

The chatbot form builder offers multiple features (elements) to make your forms agile, functional as well as fun to interact with.

Welcome Message

Welcome message is the first message your users will spot and start interacting with. It can be as simple or as elaborate as you need featuring a simple open question, button choice, or even a Gif to lighten the mood.

Free Text Questions

To create a form you need to be able to ask questions. Landbot builder offers several different options you can go about it. The first option is simple text questions that require simple free input. This type of question element is excellent for general data such as name or qualitative feedback.

Questions with Validations

Next, there are question blocks with built-in validation. These blocks only allow users to submit responses in a specific format. In Landbot, the questions with validations include:

• Email
• Phone number
• URL
• Number (here you can set the validation requirements yourself by specifying numeric format and maximum and minimum value accepted)

Special Questions

Following, there are so-called special questions which offer up a variety of use cases and engaging designs for the end-user. T

• Date question block (lets users select a date from a date picker)
• Yes-No question block (yes-no round button choice with customizable emoji/icons)
• Scale question block (lets users submit rating using a numeric scale)
• Rating question block (lets users submit rating on star or emoji scales)
• Auto-complete question block (lets submit answers quicker with the auto-complete feature)
• Address question block (allows submit address quickly, thanks to autocompleting feature)
• Picture Choice question block (allows users to choose an option from a carousel of images)
• File question block (allows user to upload a file)

The video below tells you more about each:

But the picture choice carrousel is by far our most favorite

Buttons

A form would not be complete without a button choice element! It’s perhaps the most popular element on the Landbot platform. The best part is, it’s not just easy to set up, it’s also incredibly versatile and customizable. You can publish simple buttons or enrich them with images, gifs, emojis, or icons. Plus, there is an option to display them vertically, horizontally, or as suggested text and even enable the good old multiple choice with checkboxes.

Multi-Question Block

A multi-question block is an Ace up Landbot’s sleeve, a combo box of superpowers if you will. Essentially, this combo box of greatness is a customizable mini-form within an automated conversation.

This feature exclusive to Landbot builder is the secret weapon to data collection. The point is, no matter how easy and natural chatting is, some data submission feels better with an overview.

And that’s exactly what this block offers… a little bit of traditional online form action inside the interactive experience.The block lets you create your own mini-form, add as many fields as you wish as well as configure each field to the greatest detail.

For example, you can:

• Choose the question type (time, email, date, color, checkbox, etc.)
• Define field label
• Mark the field as required (compulsory)
• Define advanced features such as help text, max/min number of characters, column width, and so forth)

Having configured each field inside, the form will visualize on the front end as follows:

Rich Media

Forms don’t have to be all work and no fun. You can easily enrich the form-filling experience with images, videos, files, gifs and more in a matter of clicks. This comes in particularly handy if you need a form for gated content as the bot can ask for the info and share the content instantly.

Conditional Logic

The next feature to highlight is conditional logic. This is the magic feature that allows for a more elaborate personalization. It’s particularly useful if you need to condition a flow on a combination of data points.

The conditions you can apply include:

• Equals to
• Does not equal to
• Contains
• Greater than
• Less than
• Is set

You can use them separately or use them in a combination under the AND/OR scenario like in the quiz scenario below:

You can apply this in a variety of scenarios, namely lead scoring and qualification.

Integrations

Not all the advantages of conversational forms are visible to the user. Like conditional logic, integrations empower your forms behind the scenes. They enable you to export data or send notifications about specific activities from the chatbot in real-time.

Landbot offers a lot of native integrations, Zapier, Google Sheets, Mailchimp, and Slack & Email notifications beings some of the most popular. To capture & export user data all you need to do is select the integration from the features menu, configure the account connection and link it in the place of the flow from which you want to export the data.

Take, for instance, this Google sheets integration:

If your Drive account is not connected yet, click ADD ACCOUNT and give Landbot access to your Google Drive - you will only have to do it once! Then proceed to select the Google sheets document and the sheet within it where you wish to store the data.

Also, it’s good to note, if you are integrating the same sheet into the same flow several times, the first time set the bot to create a new row. In the following integrations select “update existing row” so the information is stored with the right lead:

Next comes selecting which data you want to export (e.g., @name @email @company, etc.) and it’s all set!

4. Design

Landbot builder offers a variety of design templates to streamline your form creation. Each template can be further customized changing colors, fonts, the shape of the bubbles, avatar, header, and so forth, all without coding.

Though, if you are interested in creating something really unique you are free to use and apply your CSS skills (or that of your developer) by using the “Custom Code” section in the design menu.

5. How to Embed a Form on a Website (or Share it as a Landing Page)

The last step is publishing your online form on your website. Now, Landbot offers four different ways to do it. You can either:

• Embed the form seamlessly into your existing website
• Publish it as a chat widget present in the corner of the screen
• Share it as a conversational pop-up
• Publish it as a stand-alone page (the form being the only thing on the page)

Landbot generates the code for you, all you need to do is copy-paste it on your site.

Or, if you just need a quick form to interact with on social media, you can just share it using the automatically generated Landbot link!

Wrapping Up

There is no arguing forms are crucial to online business and lead generation. That knowledge is set in the virtual stone. However, the way we create a form is not. It evolves and we should evolve with it.

Don’t just ask how to create an online form, ask how to create it well! For more step-by-step video courses and tutorials like you saw in this article, visit our FREE Landbot Academy.

If you need to create a form that converts and truly benefits your business, don’t repeat the mistakes of the past. Focus on the solutions you can find in the present.Yes, one of those solutions is a conversational form… are you up for it?