Are you looking for a way to create personal online forms and boost form completions at the same time? Giving your users a way to fill out forms as though they’re having a conversation is a great way to combat form abandonment.
In this article, we’ll show you how to create an interactive form in WordPress.
What Are the Benefits of a Conversational Online Form?
There are many benefits to creating forms that mimic actual conversations:
- Easier and faster to fill out, which boosts form completions
- Personal and engaging for users
- Can be filled out using only a keyboard, which increases form accessibility
- Interactive nature improves the user experience
Up until now, there was no suitable Typeform alternative in WordPress.
That’s why our team worked hard to create Conversational Forms by WPForms to give your users an interactive form experience while improving form conversions.
So, let’s see how to create a Typeform style form in WordPress.
But first, take a look at a conversation form demo to see what’s in store for you.
Step 1: Create a New Form in WordPress
Next, you’ll need to create a new form.
You can create any number of online forms using WPForms and the Form Templates Pack addon.
For instance, you can create a:
- User Registration Form: get all the information you need from users in a simple and fast way.
- Event Planning Form: ask all the questions you need to throw an amazing event without exhausting your clients.
- Job Application Form: turn your long and sometimes complicated job application forms into simple and easy to digest forms.
- Survey Form: stop overwhelming users with tons of survey questions. Instead, ask one question at a time and improve form completions and accuracy.
For our example, we’ll create a simple survey form. For help with how to do this, check out this easy to follow tutorial on creating a survey form in WordPress.
If you want to see the survey form template in action, head over and check out our survey form demo.
You can add additional fields to your form by dragging them from the left hand panel to the right hand panel.
Then, click on the field to make any changes. You can also click on a form field and drag it to rearrange the order on your online form.
Here’s what our survey form looks like:
Just remember, no matter which type of online form you create, you can give it a full-page conversational form layout.
Step 2: Install and Activate the Conversational Forms Addon
Once your WordPress form is ready, you’ll need to install and activate the WPForms Conversational Forms addon.
This addon is how you’ll be able to turn your newly created WordPress form into an interactive form.
To do this, go to WPForms » Addons and find the one labeled Conversational Forms Addon.
Click Install Addon and then Activate.
The Conversational Forms addon is now ready to use. But first, let’s take a quick look at the general form settings you might want to configure before creating your distraction free conversational form.
Step 3: Configure Your Form Settings
There are many settings to configure once you’ve customized your form to look the way you want it to.
To start, go to Settings » General.
Here you can change things like your form’s name, description, and submit button copy.
Notifications are a great way to send an email whenever a form is submitted on your website.
In fact, unless you disable this feature, whenever someone submits a form on your site, you’ll get a notification about it.
For help with this step, check out our documentation on how to set up form notifications in WordPress.
If you need to send more than one notification, for example to yourself, a team member, and your site visitor, check out our step by step tutorial on how to send multiple form notifications in WordPress.
In addition, if you want to keep branding across your emails consistent, you can check out this guide on adding a custom header to your email template.
Form confirmations are messages that display to site visitors once they submit a form on your website. They let people know that their form has been processed and offer you the chance to let them know what the next steps are.
WPForms has three confirmation types:
- Message.A simple message that displays once someone submits a form on your website thanking them and letting them know what the next steps are.
- Show Page. Redirect users to another page on your website, such as a thank you page.
- Go to URL (Redirect). Send site visitors to a different website.
If you want to display different confirmations to site visitors based on their behavior, be sure to read up on how to create conditional form confirmations.
Step 4: Configure Conversational Forms Settings
Now that you have your form’s general settings configured it’s time to configure your conversational form settings.
To do this, go to Settings » Conversational Forms in the form builder and click on the Enable Conversational Form Mode checkbox.
When you do this, you’ll see a bunch of settings that you can customize to meet your needs.
Form Title and Message
To start, give your form a title that will display for your site visitors. This is good for letting people know what your form is all about and what action you want them to take while there.
Next, you can add a short message for your site visitors to see. This gives you a chance to add some additional information so people know what to expect when they fill out your form.
Whenever you enable conversational form mode for your online form, the Conversational Forms addon automatically creates a unique permalink for you.
You can change this permalink if you want, or leave it.
Either way, this is the URL you’ll use in email campaigns, internal linking, and even social media posts when you want people to click on your conversational form link and visit your site.
The next thing you can do to customize your interactive form landing page is add a logo. Click on Upload Image and choose the image you want to add to your form landing page.
You can also remove any WPForms branding by clicking the Hide WPForms Branding checkbox.
Color Schemes and Progress Bar
One of the best things about the WPForms Conversational Forms addon is that you can customize your interactive form landing page to have a color scheme that matches your company’s branding.
The color scheme you choose will determine the background color of the your form’s landing page and the form’s buttons.
To make things easy on you, we’ve given you several great color schemes to choose from that we know will look good no matter what.
If you don’t like any of the pre-set colors, you can always use the color picker and choose a custom color.
You also have two progress bar styles to choose from:
- Percentage: show users in terms of percentage how far along they are while filling out your form.
- Proportion: show users how many form fields they’ve completed, so they know how many questions are left to answer.
Once you’ve configured all your conversational form landing page’s settings, you can click the Preview Conversational Form button near the top to see how your form will look once it’s live.
When everything looks the way you want it to, click Save.
And that’s it! You now know how to create an interactive form in WordPress. Now people that have the unique URL or a link to your interactive form landing page will be able to view it and fill it out.
If you’re looking for more ways to fight form abandonment, check out this article on combatting form abandonment to boost sales.
So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.