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.

Divi Nation Short: How to Create a Lead Generation Page with Divi’s Contact Form Module

[powerpress]

Subscribe To Our Youtube Channel

All Subscription Options:

The Final Result

Divi-Lead-Gen-Page-Example
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

Blank-Page
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

Standard-Section
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

Set-Background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Now go into the section settings by clicking the blue “hamburger” icon. Upload your background image there.

Step 4: Configure Row Settings

Row-Settings
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

Populate-Column
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Finally, place your form and any other content you need into your 1/3 column.

Build-Form
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

Divi-Leads-Results
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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.

Original

Original-Version
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Variant

Design-Variant
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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.

Wrapping Up

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!

https://www.elegantthemes.com/blog/community/divi-nation-short-how-to-create-a-lead-generation-page-with-divis-contact-form-module