Documentation, Reference Materials and Tutorials for WPForms
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
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.
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.
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.
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
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.
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)
- 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.
- Added: Left/Right arrow navigation support for Checkboxes, Radios, Rating, NetPromoter fields.
- Added: Esc for unhighlighting an option previously highlighted by arrow keys in Checkboxes, Radios, Rating, NetPromoter fields.
- Added: Space for selecting (same as Enter) options in Checkboxes, Radios, Rating, NetPromoter fields.
- Added: Shift+Tab to go to a previous option/subfield (same as Up Arrow).
- Changed: Shift+Enter to go to the next field for Checkboxes (Enter just selects/unselects checkboxes now).
- Changed: Dropdowns (desktop version) are not auto opening on focus now.
- Changed: More consistent arrow logic for Checkbox and Radio based fields.
- Changed: Mobile-native dropdowns are used for mobile devices now.
- Changed: Layout is optimized to use screen space more effectively on smaller screens.
- Changed: Tweaked virtual keyboard interaction on mobile devices for better mobile UX.
- Changed: Mobile Textarea doesn't have "new line" capability now due to mobile UI restrictions.
- Changed: Changed tooltip messages in admin area to be more explanatory.
- Changed: Changed how mobile/desktop browsers are detected (mobile-detect.js).
- Changed: Footer "Up/Down" buttons iterate through subfields on multi-field inputs now instead of instantly skipping to the next field.
- Fixed: Form's last field (conditionally hidden) was getting focus when trying to go up from "Submit" block.
- Fixed: Rating had no multi-digit keys support (e.g. impossible to select 10).
- Fixed: "Active" key navigation star was the same color as the selected one in Rating field.
- Fixed: Header was overlapping form content on Firefox and Edge browsers.
- Fixed: Mobile field focusing issues.