Would you like to create forms that feel like a face to face conversation with your visitors? The Conversational Forms addon for WPForms lets you not only create standalone pages for any new or existing form, but also creates a unique experience that feels more human and improves completion rates.
In this tutorial, we’ll show you how to use the Conversational Forms addon with WPForms.
- What are Conversational Forms?
- Installing the Conversational Forms Addon
- Creating and Customizing Your Conversational Forms
- Frequently Asked Questions
Requirements: You will need a Pro license level or higher to access the Conversational Forms addon.
What are Conversational Forms?
Conversational forms provide a unique experience for users that feels more personal, much like chatting in a face to face conversation. Some of the main things that make conversational forms different from your average form are:
- Guided Experience: From when the user first lands on the page to when they submit the form, only the current step will be in focus. This helps guide the user through the form and provides a conversation-like experience.
- Standalone Page: The form is displayed on its own page, with no distractions.
- Navigation Options: In most forms, users will click through fields with a mouse. But in conversational forms, they can fill out the entire form just with their keyboard if they’d like (and can still use a mouse, as well).
The result is a friendly and engaging way for users to experience your forms, and in many cases results in higher form completion rates as well.
Installing the Conversational Forms Addon
Before we get started, you’ll first need to install and activate WPForms on your WordPress site.
Next, you’ll need to verify your license key. Once this basic setup is complete, you’ll be able to quickly install and activate the Conversational Forms addon.
As soon as these first steps are complete, you’re ready to enable conversational forms for any new or existing form.
Creating and Customizing Your Conversational Forms
Now that the Converstational Forms addon is installed, you’ll need to create a new form or edit an existing form.
Go ahead and open the form builder, then go to Settings » Conversational Forms. From here, you’ll need to check the box labeled Enable Conversational Form Mode.
Once this box is checked, additional options will appear. We’ll cover each of these settings in detail below.
Note: If you’d like to see what the form page looks like at any point as you edit, Save the form and then click the blue Preview Conversational Form button.
Conversational Form Title and Message
First, you can add a Conversational Form Title. This will appear in large text near the top of your conversational form’s page.
Next, you can optionally add a Message as well. The message will display just below the title, and is a good place to share instructions or extra details with the person filling out the form.
Both the Form Page Title and Message will display at the top of your conversational forms page, above the form.
Permalink
The Permalink is the URL where your conversational form can be viewed. You’ll be sharing this link with your users, so it’s generally best to keep this URL short and easy to remember.
Note: Just like any other page on your site, the conversational form’s URL has to be unique. If a number is added to the end of the permalink you’ve created, then this means the URL you entered already exists somewhere else on your site.
Header Logo
With the Header Logo setting, you can optionally add an image or logo to your form. This image will display above the Form Page Title.
After you click the Upload Image button and choose a logo, a preview of the image will be displayed.
If you’d like to use a large image, please consider the size recommendations below. This will help ensure your image to look its best.
- Recommended Maximum Logo Height: 125 pixels
- Recommended Maximum Logo Width: 800 pixels
Hide WPForms Branding
By default, visitors will see a small WPForms logo in the footer of your conversational forms.
If you’d prefer to not display this, just check the box labeled Hide WPForms Branding
Color Scheme
The Color Scheme you choose will determine the color of the page background, text, and Start/Submit buttons.
There are several popular color options that you can choose from.
Or you can also click the eye dropper icon to choose any custom color.
Progress Bar
In your conversational form’s footer, users will be able to see their progress within the form. You can choose to display this progress in Percentage or Proportion format.
The Percentage format will display, for example, as “28% completed”:
Whereas the Proportion format will display the number of fields. For example, “2 of 7 completed”:
Frequently Asked Questions
In this section, we’ll share details for some of the main questions around conversational forms.
Are WPForms’ Conversational Forms like Typeform?
Yes, Typeform is the most similar form experience to Conversational Forms. However, Conversational Forms for WPForms are specifically designed for use in your WordPress site — and can be combined with other powerful features in WPForms.
How do I navigate through these forms with a keyboard?
Conversational Forms can be navigated with a mouse and/or keyboard, but one of their unique features is the option to fill out forms 100% with a keyboard if you’d like. Here are the keys you can use for various actions:
General Form Keys
- Move to Next Field: Enter key
- Return to Previous Field: Up arrow
- Move to Next Sub-Field: (for example, when moving from First Name to Last Name sub-fields) Down arrow or Tab key
- Return to Previous Sub-Field: Up arrow (or tap Shift and Tab keys at the same time)
Field-Specific Keys
- Checkboxes/Multiple Choice/Rating/Net Promoter Fields
- Move between options: Right and left arrows
- Select option: Press letter/number keys indicated in field options (or move to desired option and press Enter or Space key)
- Likert Scale Field
- Select option: Press letter keys indicated in field options
- Dropdown Field
- Select option: Start typing to search and display matching options, and/or press down arrow to move through available options
- Close dropdown: Escape key
- Paragraph Text Field
- Create New Line: Tap Shift and Enter keys at the same time
Why does my Conversational Form look different from a standard, embedded form?
Conversational Forms are given their own special set of styles to ensure a seamless experience for users across all WordPress themes.
That’s it! You can now create custom conversational forms for any form on your site.
Next, would you like to connect your form to a marketing service so that you can more easily collect and follow up with leads? Be sure to check out our Mailchimp addon tutorial, or any of our other marketing integrations: Constant Contact, AWeber, Drip, Campaign Monitor, or GetResponse.