How to Make an Order Form Your Customers will Love

Conducting business online entails accepting orders and processing payments on your website automatically. Consumers expect an easy process to guide them through the experience. However, in cases when a simple “add to cart” is not an option and you require additional customization data, things can get complicated. Most businesses rely on online order forms though these forms while functional often fail to deliver a quality experience.

If you don’t provide your prospects with a pleasant as well as an efficient way to place orders, you are risking losing business.

Therefore, in this article, we will show how to make an order form with which your customers will LOVE to interact. There’s no reason to lose business if the solution can be this simple.

What’s the trick?

Turning your form into a friendly chat!

What is a Conversational Order Form?

A conversational order form is a form delivered in a form of an automated chat which makes it super easy to adapt to any device. It feels particularly natural on mobile. The interactivity increases engagement and simplifies the process of ordering your product or service.

Landbot as an Order Form Creator

Landbot is known for being an intuitive no-code chatbot builder so it might not be the first builder on your mind when thinking about forms. However, rule-based chatbots are nothing more than much friendlier and more efficient forms.

Landbot offers an easy-to-use visual interface where every action can be done using simple drag-and-drop.

Whether you want to create a simple order form, or a complex one, the Landbot builder interface caters to both. Let’s see how it’s done!

How to Make an Order Form That Converts?

The first step in making an order form, before even opening the builder, is deciding what information you need from your customers. For the purpose of this tutorial, we will be creating a simple t-shirt order form.We will collect the following:

• First and last name
• Email
• Company/organization/event
• Billing/Delivery Address
• Product type
• Product Color
• Customization (text/logo)
• Customization placement
• Sizes & Quantity
• Credit card payment information

Behind the scenes we will also:

• Verify the validity of email
• Calculate final product quantity & final prize
• Process payment
• Send order confirmation email
• Export order data to Google Sheets

If you want to follow along, make sure to sign up (It’s free - no credit card required!) and open the builder (see video below).

1. Define Welcome Message

When you first open the Landbot builder app, the only element on the canvas is the default Welcome Message block.

The welcome message is the first message of the conversation. An ideal welcome message lets the user know the purpose of the bot - what it’s meant to do.

There are many ways in which you can customize the Welcome block. Besides stating the purpose of the assistant, it’s a great place to set the tone, voice, and personality of the bot that is in line with your brand!

You can choose to customize it with text, rich media like images or gifs or buttons:

We decided to go with this simple setup:

2. Request Personal Information

After the Welcome message, start asking basic questions to help you collect the data you need as well as personalize the experience.

Landbot builder offers a plethora of pre-defined question formats:

They handily serve to speed up chatbot creation, offering a variety of formats. However, you are always free to customize the question as well as the pre-set variable that serves to store the user’s answer.

For example, the Name question blob’s default variable is @name but since in our form we want to differentiate between the first and last name, we used 2 names block and changed the variables to serve our needs:

PRO TIP: Conversational order form allows you to use the collected data in real-time. It’s a great opportunity for personalization:

3. Request Email & Set up Verification Process

Next, select the Email question block to request the customer’s email address. The variable is already pre-set, so unless you wish to adjust the wording of the question there is not much to do here.

The email block requires users input to be in the correct given format. However, if you want a more thorough validation process, you can easily install email verification webhooks.

Now, webhooks and APIs sound like something complex a developer should deal with but Landbot makes it quite simple and code free.

Draw an arrow from the email block and select Webhook from the features menu.

To verify an email, you need to connect your bot to an outside database. We created a free account with mailboxlayer.

Sign in and go to the dashboard.

‍Copy the URL and access key information in the gray field under “Validate Email Address” section.

Remove the spaces between phrases to create a URL:

https://apilayer.net/api/check?access_key=3adacc70fe4c55625cf6264625832709

Now copy and paste the URL in the “URL & Method” field in the webhook settings in Landbot builder.and set the action to “GET” as we are trying to retrieve information.

Then set the action to “GET” as we are trying to retrieve information:

Next, in the “Send Params?” field indicate the information you want to send for verification. The feature then automatically ads these paramertres to the URL:

Scroll down the Webhook editor and click the “Test The Request” button. If the webhook is set up correctly, you see status code 200.

As you notice, the verification service provides a lot of data. If you want to know what all the data points mean you can check the API documentation for explanations. However, these 4 data points are the most useful:

• Score: presents email quality score on a scale 0 to 1;
• Disposability: shows whether or not the email is temporary;
• Free: checks if the requested email address is a free or business email address;
• SMTP Check: detects if the requested domain is configured to receive emails.

In the last section of the webhook setup, you need to choose which of the data from the analysis you want to keep.

Cliicking on the dropdown menu, select the data point:

And then choose a variable under which you wish to store this information:

Storing this information is important because it gives you the opportunity to use them to your advantage and make sure the email is right in real-time!

Drawing an arrow from the webhook block, select a Conditions block.

There, we first conditioned the SMTP variable. If it’s false, the provided email is not active. So, if it’s true the @smtp_check equals False then we use the green output and ask the email question again because the email provided was not correct.

Remember to link the second email block back to the webhook so the corrected answer can pass through the check again.

Though if the SMTP turned out to be True we set up an alternative route from the pink output (always use pink output for when the condition is not met).

We decided to use another of the webhook verification data points - Free. This variable tells us whether the email is a business email or a free one. It can be very useful if you require business email off your prospective customers!In this case, if the email turned out to be free we offered the consumer a choice to change it to a business email or just go with it:

Drag an arrow from the “Let me change it” button and connect it with the first email question block to allow the user to repeat the loop.

Then connect the pink output of the last condition (for users who enter the correct business email at first try) and from the “Yes, it’s fine!” button to the next block - the Multi-question block we will use as billing information request form.

You can repeat the same process with a phone number.

4. Set up Billing Address Form

The Multi-Question block is a way to insert mini-forms inside a chat conversation. This feature is especially useful when asking for information that is usually clustered together. We will use it to create a billing address form which will appear on the front end as follows:

In the backend, open the Multi-question feature editor by clicking on the block.In the message field, simply define the title and description of your mini-form.Next, proceed to add fields you want to include in the form.

There are several ways to customize the fields.The basic customizations include:

• First, select a Question type (format) which can be text, date, URL, time, check box, etc.
• Second, create a variable under which you want to save this information.
• Third, create a label for the field.
• Lastly, activate the “required” button (if necessary) - the bot will not allow the user to proceed without filling it in

The first field of the form is the street address field and so we made it compulsory. We also added a second identical field in case it was necessary, but the second field was not marked as required.

The next four fields included city, province, postal code, and country.

Since these fields are shorter, we used the additional advanced customization options which allowed us to cut the field size (column width) in half and so fit them next to each other as you saw in the screenshot of the frontend experience above.

5. Create Visual Product Menu

After we have dealt with all the contact information, we want our order form to collect the actual order.

First, we will let the shoppers choose between two product groups, t-shirts and hoodies.

To do that, we will use the Picture-choice feature that creates a defile-like experience for the user. It allows you to present products visually while also providing crucial information about them in a single card.

To customize picture choice, ask the question to prompt user action and define the choices.

For each card, identity:

• Title
• Image
• URL (only if your want the click to take the user to that specific URL, otherwise leave this space blank)

After you added the basic information, open the “Extra options” section to add:

• Description
• Details
• Data you wish to highlight (e.g. Price)
• CTA (button text)

The front-end experience will appear as follows:

6. Create Interactive Button Selection

Next, use a Buttons block enhanced with images to enable color selection. Buttons block is one of the most versatile features in Landbot builder.

You can create questions with classic, emoji, image/gif, icon buttons. You can randomize the button order with every new conversation load, enable multiple-choice, etc.

First, we add the buttons you want to include:

Then, click on the three dots in the upper right corner of the block to open the advanced block editor. Clicking on each button settings icon, you can select button type and upload a corresponding image:

Before you are done, scroll to the bottom of the editor and make sure to create an easily identifiable @variable for the user’s answer.

The image-button choice in the conversation will appear as such:

7. Provide Interactive Customization Options

Based on the needs of your order form, you can play around with different features to let customers customize the order.

For example, we used the buttons block to allow users to choose between customizing the shirt with a text or a logo.

Then, based on customer choice the path divides, the “text” option leading to an open input question and the “Logo” to a question type that allows for file upload.

Then the both paths unite again in an image-button choice to let customers select the placement of the text/logo.

The file upload question type in action:

Image-button choice to enable logo/text placement selection:

8. Build In-Chat Form for Order Specs

To collect the quantity required for each shirt size, we once again used the multi-question block.

We used the size as a title and left the field for the user to indicate the amount.

Each field size was specified to one-third of the column width and the default amount was set to 0:

In the front-end, the form takes on a simple, clean appearance, making it easy for the user to make the selection.

9. Calculate Quantity with Formulas

After obtaining the quantity data, we are left with 6 different variables each with an assigned value.

While you need the information to complete the order correctly, the bot only needs the sum of those quantities to calculate the price.

For that, Landbot offers yet another feature: Formulas.

All you really need to do about formulas block is that they are much like the formulas you use in an Excel spreadsheet. You can use them to do calculations, conditional formatting, change formatting, and much more.

We used it to simply SUM all of the size variables into a unified quantity.

To use formulas, draw an arrow from the last block and pick the formulas feature from the menu.

In the Output section, simply create the variable under which you want to save this final sum:

Section number two (the actual formula), makes it fairly easy for you to do what you need as the list of all available operations and how to formulate them is listed in the library below.

We found our SUM operation in the “Math” section.

To sum our variables all we need to do was write out:

Sum(@xs_quantity,@s_quantity,@m_quantity,@l_quantity,@xl_quantity,@xxl_quantity)

Thanks to this operation, the bot sums up the value of every variable separated by commas inside the brackets and saves the results under the variable you specified above.

Click apply and your calculation is done!

10. Calculate Final Price

Now that we have the final quantity of products, we need to calculate the price.

Since all shirts are priced the same ($15) then the calculation is quite simple and can be done using the “Set a Variable” feature.

Note: Recreating this flow for the “Hoodie” option the price would be $25.

‍Add the Set a Variable block to the flow and once again, define the variable you want to create. Then, activate the “Perform a calculation?” feature.

In the calculation feature:

• insert the @shirt_quatity variable
• Select the multiplication action from the dropdown selection
• Input the value by which you want to multiply the quantity

11. Provide Order Summary

After the order value is calculated, it’s good to provide the user with a summary using a simple Message block and variables to show order status:

12. Configure Payment Gateway

After the order is complete, we offer the shoppers two options:

• Continue shopping and see the main menu again
• Proceed to payment

Note: If you decide to give shoppers another round to perhaps order the other product, copy the product menu option but update the variable to @product_2 so you can distinguish the rounds. Similarly, you can copy the rest of the flow updating all product-related variables.

‍As for the payment processor, Landbot offers Stripe integration to allow for transactions inside the conversational forms:

It’s very simple to set up:

• Connect the bot to your Stripe account following simple instructions
• Create a variable for the amount due (in this case @final_price)
• Set the currency
• Define the message in the payment form

The payment form has two outputs: success and failure.

If the payment fails you can arrange for another attempt or use the “Human Takeover” block to transfer the query to one of your live agents.

If the payment passes without issue, you can continue the flow.

13. Sent Email Order Confirmation

Another great feature you can take advantage of is the email notification!

Implementing it into the flow, you can trigger an email inside the conversation - either to send to the user or your team.

Hence, it’s a great way to send an email notification directly after purchase without having to involve any other tools.

You can configure the subject as well as email content, using the variables to summarize all the information of the transactions.

14. Export Order Data to Google Sheets

Last but not least, you need to create a record of the order.

One of the easiest ways is using Landbot’s Google Sheets integration.

Before you do anything else - create a spreadsheet in your Drive where you mean to save the data.

Once you connect your Google account to Landbot, link the document and the corresponding sheet within it to the bot.

Next, you need to select the action you want the integration to carry out as you can import, export new data as well as update old ones. Since your order form is adding new data to a sheet, select “Insert a new row”

After that, all you need to do is match the name of the columns on your spreadsheet with the respective data variables. The names of the columns will automatically appear in the dropdown selection:

And voila! Now each time the user completes a form with the payment, all the information will be safely saved in a spreadsheet.

Of course, do not forget to add a thank you and goodbye message to your flow!

15. Customize Design & Publish Your Order Form

Save all the changes you’ve made to your bot thus far and move on to the design section through the upper navigation bar.In the no-code designer, you can use one of Landbot’s design templates or adjust the colors, fonts and shapes to match your brand design precisely!

Next, in the Settings section, feel free to adjust details such as typing emulation, set up tracking or adjust system messages and help text inside the bot:

Last but not least, visit the share section where you can easily copy and paste the bot’s code and publish it in 4 different formats: Landing page, website embed, popup, or website widget!

Conversational Order Form - The Future?

So, what do you think?It does seem a bit more fun, friendly, and flexible than something like this:

Now that you know how to make a conversational order form take advantage of it!Using such order forms brings many benefits. They:

• Provide greater insight into customer behavior as you can analyze users progress through the flow;
• Offer real-time data capture and its use for personalization & instant problem solving;
• Give you the option to customize the flow for different types of purchases inside a single “form”;
• Enable in-chat payment processing;
• Are easy to create and manage by no-code professionals;
• They easily integrate with 3rd-party tools you are already using;
• Offer more engaging user experience;
• Provide an option to offer a separate path for returning customers so they don’t have to refill contact/delivery information twice (e.g. by providing a button choice in the welcome message separating returning from new customers and then using the integrations to pull data of the returning ones);
• Etc.

Try your hand at creating your own conversational order form that converts today!