Welcome to another edition of Divi Nation! This time around we’re diving into a step-by-step tutorial on how to build a lead generation page (also known as a squeeze page) using Divi’s contact form module as a form builder.
The example I created in this episode is for a wedding photographer, but you can easily modify the image and design elements to fit any number of niche use cases.
- 1 Divi Nation Short: How to Create a Lead Generation Page with Divi’s Contact Form Module
- 2 The Final Result
- 3 Lead Generation Page How-to Summary
- 4 Good News: Divi Leads (Split Testing) is Coming to Divi 2.7
- 5 Wrapping Up
Divi Nation Short: How to Create a Lead Generation Page with Divi’s Contact Form Module
Subscribe To Our Youtube Channel
All Subscription Options:
The Final Result
Lead Generation Page How-to Summary
In case you’re not able to watch the full video right now and want a quick summary of how I built the page you see above, here it is in a just a few short steps.
Step 1: Select the blank page template
First, under the page attributes meta box, select the “blank page” template. This will remove the head and footer from your page making it ultra focused on your primary objective.
Step 2: Standard Section, One Row, 2/3 – 1/3 Columns
Next, create a standard section with a single row. Select the option for two columns with a 2/3 – 1/3 split.
Step 3: Set Section Background
Now go into the section settings by clicking the blue “hamburger” icon. Upload your background image there.
Step 4: Configure Row Settings
The most important row setting to configure is the column 2 background color. This will give your form area a solid (or in my case semi-transparent) background.
Step 5: Populate 1/3 Column with Form
Finally, place your form and any other content you need into your 1/3 column.
As of the Divi 2.6 update you can add as many form fields as you’d like using the form builder. This means that no matter how much or what kind of information you’d like to gather you can create a form to fit your needs.
When all of this is complete, simply save your settings and draft and then click publish. You now have a simple, elegant lead generation page.
Good News: Divi Leads (Split Testing) is Coming to Divi 2.7
This tutorial is something I wanted to cover before the next release of Divi (version 2.7) because with it comes a new feature I’m really excited about. And I think you’re all going to love it too.
Divi Leads is our new split testing feature that will allow you to test the effectiveness of pages like this by comparing the results of design variations.
The image above is an example of the results we got using the beta version of 2.7 on our demo site.
We tested our long-time demo home page versus an updated variant.
Obviously, we are quite happy with the results of our test. On our first try we doubled our clickthrough rate! And soon you’ll be able to do the same sort of test on just about every element of your website. So stay tuned for that next release! If all stays on schedule it’ll be coming down the pipe in a few weeks.
Well that’s all for this week’s episode of Divi Nation, the official Divi podcast. As always, if you have any questions or comments all you have to do is drop me a line in the comment section below.
See you next week with another full length episode!
Hello , I am delighted with the latest updates divi , I wish you had the option to attach files in the contact form , for example files, doc , docx , PDF , PNG , xls .
And as for the divi nation , is getting better, I’d like to do a tutorial on how to make a design or nonprofit charity because in the demos available there is not one
Will the A/B Testing work in conjunction with the contact form? in the sense that we would be able to know which version got more sign ups ? that would be awesome, Although I guess we could make 2 different contact forms for that too