WPForms Documentation

Documentation, Reference Materials and Tutorials for WPForms

How to Install and Use the Conversational Forms Addon

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.

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.

Check box to 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.

Click button to preview conversational form

Conversational Form Title and Message

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

Title and message example for conversational forms

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.

Permalink setting for conversational forms

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.

Header Logo setting for conversational forms

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

Header Logo example for conversational forms

Hide WPForms Branding

Hide WPForms Branding setting for conversational forms

By default, visitors will see a small WPForms logo in the footer of your conversational forms.

WPForms branding in conversational forms footer

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.

Color Scheme setting for conversational forms

Or you can also click the eye dropper icon to choose any custom color.

Color Scheme custom color picker

Progress Bar

Progress Bar setting for conversational forms

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”:
Percentage format for progress bar in conversational forms

Whereas the Proportion format will display the number of fields. For example, “2 of 7 completed”:
Proportion format for progress bar in conversational forms

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.

Changelog

1.1.0 (2019-02-28)

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