We recently had a Gravity Forms user ask the following question, How do I create an interactive form in WordPress? So I decided I would create this tutorial to show you how you can create a conversational (interactive) form with Gravity Forms.
Conversational forms is not a new concept, but it isn’t necessarily a “feature” or “function” of Gravity Forms. What I will be showing you is a workaround that you can use, at least until they implement this functionality.
Other form builders might have an option or prebuilt template that you can use to build a conversational form, but even though Gravity Forms doesn’t have a built in option or template, you can still build conversational forms in Gravity Forms.
This is an example from the Fluent Forms builder:
What Are Conversational Forms?
Conversational forms are intended to be more interactive. They also have the ability to improve your form completion rate and reduce form abandonment.
The idea is to make your forms more of an engaging conversation then a boring and sometimes overloaded means of data collection.
What Makes Conversational Forms Unique?
These type of forms are unique in the way they are presented.
They display one field at a time, allowing you to focus on the questions and avoid the overwhelm of seeing the next 20 questions.
In most cases, the forms also auto-advance when you make a selection in a multi-choice field or allow you to use the keyboard enter/return key to progress to the next field/question.
Additionally, instead of being embed in a page, they are presented in a full screen popup or in some type of page template that eliminates the header, footer, sidebar, etc, leaving you to focus entirely on the form and avoid distractions.
You can see a demo of how WPForms has implemented conversational forms here.
Building a Conversational Form in Gravity Forms
In this tutorial, we will be using Gravity Forms multi-page functionality and you will have the option of using a third-party plugin, Popup Maker, to display the form in a fullscreen popup.
If you use a block-based framework like GeneratePress and GenerateBlocks, you could always build a custom page template to embed your form on instead of using the Popup Maker plugin.
Alternatively, if you’re using a page builder like Elementor or Divi they also have popup builders that you could probably use instead of the Popup Maker plugin.
Step 1: Building Your Form
Instead of trying to explain the process, and outline all the steps, I figured a video would be the easiest way to learn.
Although, I will point out that for this to work we’re going to create a multi-page form that has one field per page.
Optional Step: Auto Advance
As mentioned above, one of the unique aspects of conversational forms is that they will auto-advance when a selection is made instead of the user having to click next.
This step will show you how you can add this functionality to your form for radio button and dropdown type fields.
Copy and paste this code into an HTML field within your form.
Step 2: Full Page Popup
With the Popup Maker plugin, you can build nice popups, but in this tutorial, I am going to keep it simple and just cover the basics, but if you want to get crazy with the design or setup of your popup you can use the Popup Maker documentation to help.
There are several ways to trigger a popup with the Popup Maker plugin, but in this demo, we will be using a button click.
Check out Popup Maker Pro here!
The Wrap Up
There you have it. Proof that you can build conversational forms with Gravity Forms even though it’s not a “built-it” feature or template.
This tutorial should provide you with a solid workaround that you can use until Gravity Forms includes this functionality, which might happen sooner than you think 😉.
If you have questions or need help with your form, be sure to use the comments below. And if you have any good examples of conversational forms built with Gravity Forms, we’d love to see what you’re doing, just drop those links in the comments too!
