Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.
We only recommend items/tools that we've personally used and like.
In this article, we're going to discuss building a two phase form using Formidable Forms. This is one of our favorite form plugins due to its ease of use, back-end design, and expandability. We use it in most of our websites, including this one.
For this tutorial, we'll be using another one of our websites SpeedOpp.com. SpeedOpp is a professional WordPress page speed optimization company. To generate leads, we use Formidable to collect information from potential customers.
The general premise of our lead generation process Is this: We have a shorter form that is easier for visitors to fill out. Because it's shorter and simpler, the conversion rate is much higher. That short form collects essential information.
Once the user clicks the get started button, the form collects the essential information submitted, and passes the data to another, longer form.
That longer form collects more information that we can use to Make the customer onboarding process easier.
The reason we don't simply present the visitor with the longer form is twofold:
if the visitor abandons the longer form, we already have the essential contact information that we can use to get in touch with them.
This screenshot is the first phase of our lead collection process. This is the hero of a landing page at SpeedOpp -- it presents the essential information, and has a form where the visitor can enter their website and email. The form fits into the initial viewport and is well integrated into the web page.
It's also short, and easy for a visitor to fill out if they decide that they want to use our service.
However, it doesn't collect the central information such as a first name, company name, phone number, and additional information pertaining to website optimization.
We didn't want to include those fields on this initial page as it would decrease our conversion rate and lead to less leads generated.
Instead, when a visitor clicks the get started button, the two essential pieces of information about them is stored in formidable forms, and they are redirected to another longer form. That longer form is pre filled with the information they entered in the shorter form, making it easier for the visitor to fill it out. It also increases the user experience by ensuring the customer doesn't need to submit the same information twice.
From our side, multi form lead generation result in a better user experience, and generates more leads for us.
A shorter form converts more, and it collects essential information that we can use to contact the customer if they choose not to fill out the longer form.
If they do choose to fill out the longer form, we have more information about them and can convert them into a paying customer sooner.
Whatever the case is, as long as somebody fills out the shorter form, we’ll be able to contact them and present what we have to offer.
We've tested multiple styles of lead generation on this website, and have found that this split form approach converts more and leads to more revenue.
There are three major things that the shorter form needs to do.
The third requirement is absolutely essential because no visitor wants to fill out the same fields twice. It also provides continuity between the two forms.
The reason that we're using Formidable Forms (Pro) to do this is because it has all of these capabilities built in. You can easily pass data from one form to another, conditionally redirect, and more. This solution is definitely built for power users who need an advanced, well designed form solution.
Compared to other offerings out there, formidable is more powerful from a developer's perspective and much better designed on the back end.
The first thing that we're going to set up for our multi form lead generation process is the shorter form. This shorter form is placed on the landing page. Depending on your needs, you can also make this an inline form. For example, you could have an email collection form placed inside of a blog post that redirects to a longer contact form.
Our short form is going to contain two individual field entries: website & email.
By collecting this information, even if the visitor abandons the longer form, we will be able to email them a speed optimization report from the URL that they entered.
To do this, we're going to make a new form and add these two fields from the back end. Go to Formidable Forms (in the Admin Menu). Then click the blue “+ Add New Button”.
After creating the form, add the two fields that you need. It's important that this form is as short as possible while collecting important contact information. This helps it fit into the landing page better and increases conversion rates.
After we've set up our general forms, we need to make this form redirect upon submission, while passing the data entered to the longer form. To do this, head to the settings tab (next to build) and set the on submit action to “redirect to URL”.
We're going to use URL queries in parameters to pass the entered data to the new form. This is fairly simple to do. First, enter the URL of the page that will contain the longer form. After that, you can enter your form fields by specifying their IDs.
To pass data, you need to specify a key. the key is what the receiving form will use to identify and place data into individual fields. For example, we are going to be using “URL” as our parameter for the website url. Our parameter will look like this:
 Is the ID of one of the fields. you can Get this by clicking the three dots on the right of the redirect to URL input field. Those three dots will toggle the pop-up displayed in the screenshot above, and from it you can easily click on the fields that you want to pass to the new form via the URL.
You can specify multiple keys and pass data to multiple input fields by using &:
In our example, the complete “redirect to URL” value would be:
After you set this up, test that the form actually redirects on submission by going to the front end and submitting an entry. If it works and passes the proper data via the URL parameter, you're ready to move on to building your larger form.
Here's a KB entry on Formidable that discusses passing data from form to form via the url: https://formidableforms.com/knowledgebase/set-values-to-be-used-in-custom-displays-or-default-values/
As you can see, the information entered in the short form is passed to the longer one the URL parameters. It's automatically converted into URL friendly text.
And, as a sneak peak, here's the data passed from the short form to the long form via the URL.
Setting up the long form is very similar to the short form. First, we're going to add a new form and set up the fields that we need. Do this by going to the formidable forms subpage, adding a new form, and entering
If you want to pass the data between the two forms, make sure that you have the same fields as the short form.
In the above example, and you can see that we have a website field and a work email field in the longer form. Both correspond with the data entered in the short form.
Once our form is set up, we need to configure the receiving fields. In this example, the website / URL field and the work email field are going to be receiving data submitted in the short form.
Doing this is fairly simple, we just need to tell the fields on the receiving form to grab the data passed to it in the URL. Click on the individual field which will toggle the field options. Under the advanced tab, there's an input field where you can set the default value.
In the default value field, enter this:
[get param=”parameter specified in step 1”]
For the URL example, we are specifying the url in the parameter using the key “URL”. Therefore, our example looks like this:
This grabs this data from the URL (if it exists):
Continue this process for all fields that are supposed to be filled out from the data in the URL. In our example, we are populating the email and website URL fields with the data passed from the shorter form.
After you create the form and embedded in the page via shortcode, test that the short form will transfer data to the longer form. Do this by entering data into the shorter form, submitting it, and checking that the long form (that's automatically redirected to) is populated with the same data that you just entered.
If it works, congratulations you have properly set up a two phase lead generation form.
This article presented a method of gathering leads using two phase forms, created with Formidable Forms. This is a good way to gather information from potential customers, and is higher converting then throwing a large form onto a small landing page.
The reason we used formidable forms for this purpose is due to the built in Form to form data transfer capability, an extremely well designed back end.
If you have any questions on this lead generation method, or how to set up your own two phase form, feel free to leave a question in the comments section below.
Expertly curated emails that will help you generate more income through good design.
Expertly curated emails that will help you generate more income through good design.