Elegant Themes Blog

Stay up to date with our most recent news and updates

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

Posted on March 18, 2016 by in Community | 68 comments

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

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

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.

Wrapping Up

Well that’s all for this week’s episode of Divi Nation. 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!

download divi


  1. 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

  2. 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

    • Nathan B. Weller

      Yes it will work with sign-up forms. You’ll be able to create multiple forms and see which one gets submitted the most.

  3. Really excellent walk through – thank you so much!

  4. Great tutorial! We’re getting real excited over here for the release of Divi 2.7 and the Divi Leads split testing system! πŸ™‚

    • Nathan B. Weller

      Glad to hear it! I think it’s going to be a great release too. I’m excited to share split testing best practices with the community as well as see what kinds of data-backed lessons people learn and share.

  5. Is there anyway for us to connect MailChimp to to the contact form? It would be great to have the the flexibility of the contact form and still be able to connect directly to something like MailChimp.

    • Like James, I would like to use Mail chimp with this idea.

    • I would love to have this feature too. Sending an email to an normal email address is not state of the art. Please add MailChimp.

    • Nathan B. Weller

      Yes, you can simply add or swap out a different module within the 1/3 column. You can use the email optin module or a bloom shortcode to connect submissions to your email marketing service.

  6. Looks fantastic Nathan
    I was wondering what my next Divi project was going to be… now I know.

    • Nathan B. Weller

      Thanks Keith. Feel free to shoot me a link to whatever you come up with via facebook or twitter. Would love to see it.

  7. This was great, but for the reasons you think!!

    First yes, I love the form and yes it will be used for a few things and I thank you for that. But here is the real nugget, at least for me.

    I had a 3rd party slider for a group of images. I deleted the 3rd party slider. Then created a full page slider using DIVI and it worked beautiful. Problem is there was no menu and I couldn’t figure out what I had done wrong. My other sliders were working great. My solution was to add a menu element/row at the bottom.

    Adding, a large number of images to a slider takes time, but I thought my only option would be to create a new page. I just kept putting it off. Then as I watched this DIVI nation video you said “I’m setting the template to blank page, that gets ride of my header and footer”. BINGO! I watched the rest of the video and then went to edit my page and sure enough that was my problem.

    This may not seem like a big deal, but for me it saved me so much time and even more than that I learned some new angles for in the future.

    Thank You Thank You

    • Nathan B. Weller

      Glad to hear it helped in an unexpected way Bill! I think that’s one of the cool things about tools as versatile as Divi. Everything you learn has multiple applications.

  8. You guys should be doing more of these tutorials with Divi Nation. I see a lot of people running Divi on their websites and they are stuck. They may have bought the ET membership because they saw what you do with Divi and hope they can replicate your work and mostly end up falling short of close to your examples. This kind of tutorial post would help them a lot.

  9. Hi Nathan, Nice tutorial, thank you. Can the form fields be set as Username and Password (which are only known only by members of our group) and then when username and password are entered correctly, members would be redirected to a page that can only be viewed by a person knowing the correct username and password?

    I have been searching for weeks for a plugin (easy to set up) that would work for this.

    If the Divi Contact Form Builder is not for me, do you have any suggestions? Always grateful, Sue

    • Nathan B. Weller

      You can use different modules in the 1/3 column to mix things up according to your own needs. If you want people to sign in you might want to use the login module.

  10. Hi Nathan!

    Great job once again. I love Divi Nation. Is there anyway to create a double opt-in page like this but with two actions? So many people say the double opt-in creates a high click through rate/conversion

    Such as having a button that says “Download Now” and that pops up into a Divi form to capture an e-mail address to get the download?

    Can this be accomplished by adding Bloom into the mix?

    This would also help out with linking to downloadable content as mentioned by Elkin De avila

    • Nathan B. Weller

      Yes you can add Bloom into the mix by adding a simple text module/shortcode on a page just like this.

  11. Good one Nathan. Really interesting and informative

  12. Nice to see more on DIVI leads. Now if only the contact form module could do dropdown, checkboxes, and file uploads.

    • Yes! Yes! Yes! This would be fantastic.

    • YES!! More field types would be AMAZING! I dislike having to always use CSS to recustomize my forms… Looking forward to it! Maybe a form builder just for DIVI thay can challenge CF7?

  13. Hello Nathan,
    Thank you so much. It’s very nice tip.

    • Nathan B. Weller

      No problem Hannah! Thanks for tuning in πŸ™‚

  14. Such a useful tutorial as I’m just in the process of setting up my own-designed leadpage for some of my sign-up forms. This has just made my life much easier … thank you! Is there any fuctionality of integrating email services, such as Getresponse …, to collect the signups?

    • Nathan B. Weller

      You can use the email optin module or a bloom form shortcode in this same setup to connect submissions to your email marketing service.

  15. So easy but it looks great! Two things:
    1) Question: from where did you get these decorative line images?
    2) Request: an option to also send a contact form confirmation to the person who submitted the form. At the moment it only sends an e-mail to me. I really hate it when I send a message with a contact form and I don’t get a confirmation e-mail with all the details I submitted. I like to get that myself to make it easier to follow up later. So for now, I stick with Contact form 7.

    • Creative Market is great source for design elements. You can signup to get their weekly newsletter and they have free downloads every week. No affiliation, just like the service.

    • Nathan B. Weller

      Hi John-Pierre,

      1. I got the background image and the decorative line vector graphics off of shutterstock.

      2. Right now there is no option for sending a duplicate of the message to the sender. However, they will see a thank you message as I explained in the video, letting them know that their message was received.



  16. Awesome work Nathan.

    This is what I’ve been waiting for from Elegant Themes. Actual tutorials on how to use Divi.

    Would love it if you could do more of these walkthroughs in the future. There is so many cool page examples on Divi Preview but I have no idea how to replicate them and I always spend hours and never get the look I want.

    Please, please, please continue down this track with your podcast and I’m sure you will sell more memberships because people like me will be able to use the theme more effectively.

    • Nathan B. Weller

      Thanks Mark! Doing more of these types of tutorials is the primary goal behind the Divi Nation Shorts. We saw right away in Season One of the podcast that our Divi Quick Tip videos were the most popular segment and now we’ve decided to include even more. In fact, we’re hoping to up our volume of weekly Divi tutorials in the coming months so that there is some type of short tip or tutorial almost every day πŸ™‚

  17. Please please please continue to do the summarise section at the end of all the Divi Nation posts. I find it easier thus way as am sure other members do also. Keep up the great work

  18. Hi, is there anyway to integrate to mailchimp?

    • Nathan B. Weller

      You can add the email optin module or a text module with a bloom optin form to this same setup to connect submissions straight to mailchimp.

  19. Hi,

    is there a easy way to ADD acceptance field in the contact form?


    • Nathan B. Weller

      Not sure what you mean by “acceptance field”. Can you elaborate?

      • An Acceptance Checkbox I think is what the poster was trying to say.

        • Yes acceptance checkbox.

          • Nathan B. Weller

            Right now the contact form does not support check boxes or radial buttons. That said, if you did want to use another form builder all you would need to do is replace the contact form module above with a text module containing the shortcode for your new form. Acceptance checkbox and all πŸ™‚

  20. You people need to create way more customizability for the modules and input types as well as variation option for screen sizes, background options , rotations etc all the thing css allows need to be exposed further for amatuers and for easy setup for pros that use this,, its severely lacking, I payed 260 dollars just for divi as the other themes are limiting, so as a Divi only client I need more dev done that makes it more functional when it comes to exposed settings and options for all modules and the theme customizer.

  21. Interesting and insightful…

    However, most all of the Squeeze pages that I develop require a footer for specific reasons, eg., waivers, terms, policies… predicated on the subject matter at hand, and to further satisfy Google’s minimum landing page criterion, for search requirements.

    Also, the lead-gen opt-in must have pertinent interface capabilities for any third-party autoresponder, to subsequent ‘funnel’ all emails into a specific follow-up sequence. (a must for any marketer!)

    Anyway keep up the good work, Nathan.


    • Nathan B. Weller

      Hi Michael, you can easily add another row for a “squeeze page footer”. Or use your default template to keep your normal header/footer sections. This was simply an example. Everything with Divi can be tweaked for each individual’s needs.

      Additionally, you could swap out the contact form for a bloom opt-in form or the opt-in form module in order to connect submissions straight to your email marketing service provider of choice.

  22. Brilliant thanks.

    One thing that is a bit of problem is that you are not able to add a redirect URL to take people to a thank you page after they have submitted the form. This would allow a conversion tracking in Adwords and a goal to be tracked in Google Analytics. If this feature could be added I would then be able to stop using contact form 7. Fingers crossed for the next release πŸ™‚

    • Nathan B. Weller

      Actually can set up a redirect url with Divi’s contact form module. I covered it in the video above.

      The setting to enable and set the url are right under the section called “message pattern” on the General Settings tab of the contact form module.

      • Can the form fields be set as Username and Password (which are only known by members of our group) and then when username and password are entered correctly, members would be redirected to a page that can only be viewed by a person knowing the correct username and password?

        • Nathan B. Weller

          Instead of the contact form module you could use the login module.

  23. Thanks from Spain. I’m looking forward to all days.For follow the blog helped me with the translator of Google. To follow the videos helped me with Spanish subtitles. When will a community in Spanish ?.
    A greeting.

    • Nathan B. Weller

      Hey Veronica, thank you so much for tuning in. I’m not sure when or if we’ll be able to provide all of our content in Spanish. It’s on my radar for sure. But I guess we would just need to make sure that if we did it that the investment in time/money per piece of content resulted in a bigger return.

  24. Before moving to Divi, I had to use Opt-in Monster to get this type of effect. The Divi method is so much more customizable and easily brandable.

    I’d like to be able to connect to MailChimp and ActiveCampaign. There is a way to do it manually though, but I don’t think it would look as nice.

    Can’t wait for the new release.

    Great job!

    • Nathan B. Weller

      You could definitely use the email optin module or a text module with a bloom contact form shortcode instead of the contact form module for similar results. Then you would be connected straight to your email marketing service of choice.

  25. thank you so much for this blog and video showing us how to create our own lead generation page – I’ve not created a few for my website and integrated bloom and contact form 7.

    And I created a simple terms and conditions at the bottom as a separate section using the same background and full width idea as the previous section.

    thank you so much for this πŸ™‚

  26. It’s so easy to use Divi and understand your lessons, even if you don’t know English (well enough) I use WordPress for a few months and I really like Divi. Thanks so much!ο»Ώ

    • Nathan B. Weller

      Thanks Tais, glad these tutorials are helpful πŸ™‚

  27. hi we built our education startup portal in your DIVI theme now we want to add a student registration form guide me what tools to use form 7, divi form or other?

    • Nathan B. Weller

      Well you can see what is possible with the Divi form. So I would say compare your options with your objective and pick the combination that works best.

  28. Can’t wait to implement this into our current project!! Just a quick question relating to the Divi form;
    Is there a way for a user to upload images through the form?? If not is there a plugin that will enable this?? Is there a plan for file uploads to be integrated the Divi form if it can’t be done now??

    • Nathan B. Weller

      Right now this is not supported in the contact form module. However, there are other plugins for this in the WordPress Plugin Repository. I’m sure you could integrate them into a page like this built with Divi.

  29. Great example of what can be done with Divi. Lots of questions about forms. I’m not an affiliate but would highly recommend people check out gravity forms if they need anything more than “basic” form.

    Thanks again and keep the ideas coming.

  30. Great tutorial Nathan. Thanks for posting it. Hope you don’t mind if I ask, but… one thing I’d like to do is replace the word “Submit” with a different phrase on one of my contact modules (not all contact forms throughout the site). Can you explain how to do that? If there’s already a tutorial or reference out there that explains how to do so, can you provide the link there? Thanks, in advance Nathan. Lovin’ Divi Nation shows!

  31. Excellent tutorial Nathan. I am wondering, how could I define my objective goal using gravity forms. I just want to register each time the user submits the form. Is it possible? Thanks!

  32. I want to know how I can create a lead page where someone can download free e-report. The re-direct url would allow them to get to a thank you however how would I
    1) have the downloadable report on the thank you page
    2) have them added to the subscriber list on Mailchimp
    3) have email sent with the link to the report

    Is this possible in Divi

    • Nathan B. Weller

      Hi Renee,

      Thanks for the request! I’ll add it too my list of videos/posts to create πŸ™‚



Join 371,133 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This