5 Email Opt-in Designs You Can Create with Divi’s Email Opt-in Module

Posted on July 30, 2016 by in Divi Resources | 79 comments

5 Email Opt-in Designs You Can Create with Divi’s Email Opt-in Module

Welcome to Day 61 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


There are a wide range of email opt-in form designs floating around the web. What you may not realize is that with a bit of creativity you can achieve most of them with Divi’s built-in email opt-in form module. That’s why in today’s post I’m going to show you how to achieve five different design variations with Divi’s email opt-in module to help spark your imagination as to what is possible with this powerful and flexible module.

5 Email Opt-in Designs You Can Create with Divi’s Email Opt-in Module

Subscribe To Our Youtube Channel

The Default Email Opt-in Module

Before we get started, let’s take a look at what the Divi Email Opt-in Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

default-divi-email-optin-module

The default Divi email opt-in form.

1. Overlapping Section

overlapping-section-divi-email-optin-module

Divi email opt-in module overlapping a section.

The concept in this example was to show how you can overlap a section with your contact form, achieving attractive designs like the one above. To begin to duplicate this, you’ll need to set up your backend builder as we have set up ours in the image below.

overlapping-section-divi-email-optin-module-backend

Section Settings:

As you can see we are working with two sections. The top section housing the image of the family and the bottom section housing the email opt-in form.

overlapping-section-divi-email-optin-module-section-settings-1

overlapping-section-divi-email-optin-module-section-settings-2

In the top section’s General Settings Tab, do the following: set your background color to match the background color of our image, #d3d47f. Then, scroll down and enter in 0px for all of your custom padding fields.

overlapping-section-divi-email-optin-module-section-settings-3

In the bottom section’s General Settings Tab, do this: set your background color to #8d716d. Another color we pulled from the image we’re using.

Row Settings:

overlapping-section-divi-email-optin-module-row-settings-1

In the General Settings Tab for the top row (containing the image module) set all of your custom padding fields to 0px.

overlapping-section-divi-email-optin-module-row-settings-2

In the General Settings Tab for the bottom row (containing the email opt-in form module) flip the switch that says “make this row fullwidth”.

Image Module Settings:

image-module

Under the General Settings Tab, add your desired image. Then, in the Advanced Design Settings tab for the image module, set your bottom custom margin value to 0px.

Email Opt-in Module Settings:

overlapping-section-divi-email-optin-module-backend-adsettings-1

First, under the General Settings Tab, set your background color to #ffffff. Then, switch over the the Advanced Design Settings Tab and do the following: set your header font to bold; move the header font size up to 26; set the header text color to ##8d716d. Moving on down the options set your body font to bold and the body text color to #bcbd53.

overlapping-section-divi-email-optin-module-backend-adsettings-2

When you get to the custom margin and padding controls, this is where we are going to achieve our overlapping effect. Set your top custom margin to -300px and add a 10% custom padding value to all padding input fields.

overlapping-section-divi-email-optin-module-backend-adsettings-3

Next, flip the switch next to “use custom styles for button”. Adjust your button text size to 16. Set your button text color to #ffffff. Set your button background color to #68d6e2.

overlapping-section-divi-email-optin-module-backend-adsettings-4

Set your button border width to 0. Set your button border radius to 3. Select the bold option on your button font. Select “no” for the button icon. And finally set your button hover border radius value to 3.

overlapping-section-divi-email-optin-module-backend-adsettings-5

Now it’s time to move into the Custom CSS Tab. Under Main Element place the following bit of css:

box-shadow: 0 0 50px rgba(0,0,0,.2);
border: 5px solid #68d6e2;

Then move down to the box labeled Newsletter Fields and copy in this bit of css:

background-color: rgba(141, 113, 109, 0.05);
color: #6f5551;

2. Profile Image

profile-image-divi-email-optin-module

Divi email opt-in form with a profile image integrated into it.

The concept here was to simply add a profile style image to the top of the contact form for a personal touch–something great for “authority” bloggers. This email opt-in form requires one section, one row with three columns, and two modules–an image module and of course the email opt-in module.

profile-image-divi-email-optin-module-back-end

Email Opt-in Module Settings:

First things first, let’s create our opt-in form. In the General Settings Tab we’ve set the background color to #135da4, chosen light text color, and set the text orientation to center. Then we hop over into the Advanced Design Settings.

profile-image-divi-email-optin-module-adsettings-1

Set the header font to bold and all caps. Change the header font size to 18. Set the body font to bold and adjust the body font size down to 14. Then, set the body text color to #68d6e2.

profile-image-divi-email-optin-module-adsettings-2

Next, we adjust the margin and padding. Set the top margin to 0px and the top padding to 69px. We can leave the rest alone.

profile-image-divi-email-optin-module-adsettings-3

Finally, we add some custom styles to the button by flipping the switch next to “use custom styles for button”. The button text size is set to 16. Button text color is #ffffff. Button background color is #68d6e2.

profile-image-divi-email-optin-module-adsettings-4

Last but not least we also want to set the button font to bold and to select “no” in the add button icon dropdown menu. Now we have our blue form.

blue-form-complete

Image Preparation:

profile-image-divi-email-optin-module-image-prep

Now we need to prepare the profile image via photoshop or some other image editing software by removing the background and adding a blue strip to the bottom that matches the blue of our email opt-in background. As you can probably tell from the image above, there’s a bit of visual trickery we plan to put into play. We’re going to take this image and remove all the space between the bottom of it and the top of the form to achieve the appearance of them being one and the same.

Image Module Settings:

profile-image-divi-email-optin-module-image-module-settings-1

There are just two things we need to do with the image module. First, upload the image. Then, in the Advanced Design Settings Tab, set the bottom margin to -69px. This is what will bring bottom of our image’s blue box to meet the top of our blue form.

profile-image-divi-email-optin-module-image-module-settings-2

3. Skinny Opt-in Form

skinny-divi-email-optin-module

Divi email opt-in form slimmed down to a single strip.

A skinny opt-in form design is very popular because it’s easy to stick between two sections on a page, many times right above the fold. With a few modifications we can turn the Divi email opt-in module into just such a skinny strip. Here’s how:

skinny-divi-email-optin-module-back-end

As you can see above, you’ll need one section, with one row, one column, and an email opt-in form module.

Section Settings:

skinny-divi-email-optin-module-section-settings-1

There are two things you need to do in the section settings. The first thing, under the general settings tab, is to set the background color. We chose to set ours to #135da4.

skinny-divi-email-optin-module-section-settings-2

Then we want to go down to the custom padding options and set top padding to 40px and bottom padding to 20px.

Row Settings:

skinny-divi-email-optin-module-row-settings-1

Likewise, there are two things that need to be configured in the row settings. Under the general settings tab, set the custom padding for all input fields to 0px. Then we want to hop all the way over to the custom css tab, scroll down to the input box called Column Main Element, and enter the following css:

text-align: center;

Email Opt-in Module Settings:

skinny-divi-email-optin-module-adsettings-1

In the advanced design settings tab set the header font to bold and all caps. Set the header font size to 26. Then, go down to the custom margin and padding controls. Set them all to 0px.

skinny-divi-email-optin-module-adsettings-2

Then flip the switch next to “use custom styles for button”. Set the button text size to 16, the button test color to #ffffff, the button background color to #68d6e2, and the button font to bold. Finally, select “no” on the “add button icon” dropdown menu.

Now for the interesting stuff. In the Custom CSS Tab add this to the text field “css class”: horizontal-optin. We’ll come back to that. Now, scroll down to the following text boxes and paste in the corresponding code.

Main Element:

display: inline-block;

Newsletter Description:

display: inline-block;
width: auto;
margin-top: -20px;

Newsletter Form:

width: auto;
display: inline-block;

Newsletter Fields:

display: inline-block;
width: auto;
margin-left: 30px;

Newsletter Button:

display: inline-block;
width: auto;
margin-left: 30px;

When all of those snippets have been added, click the “Save & Exit” button. We now need to add some css to the page that will act on the css class we added to the module earlier.

skinny-divi-email-optin-module-page-settings-1

In the page settings custom css box, place the following code snippet:

.horizontal-optin p{
display: inline-block;
}

When that is done click save, update your page, and view your new skinny opt-in form!

4. Big Bold Opt-in Form

bold-section-divi-email-optin-module

Here we get some more modules involved to create a form that takes up an entire section.

The idea here was to create a big bold opt-in form that took advantage of an entire row or section (depending on where you place the background image) and which works together with other modules to achieve a whole. Here is what this looks like on the backend; one section, one row, two columns, two modules.

bold-section-divi-email-optin-module-backend

Row Settings:

bold-section-divi-email-optin-module-row-settings-1

The row settings we have one configuration to make per settings tab. Under General settings adjust all of the custom padding fields to 60px.

bold-section-divi-email-optin-module-row-settings-2

Under advanced design settings, upload your desired background image. We chose to use something that would provide some texture but not be otherwise distracting.

Finally, under the custom css tab scroll down to the Main Element and enter:

border-radius: 5px;

Email Opt-in Module Settings:

The email opt-in module here is pretty straight-forward with the only modifications being made to the text and button styles. Here’s a quick run-through:

bold-section-divi-email-optin-module-adsettings-1

Under the advanced design settings tab set the header font to Kreon and then set that to bold and a size of 32. The body font should also be set to bold and a size of 14.

bold-section-divi-email-optin-module-adsettings-2

Next, flip the switch next to “use custom button styles”. Set the button text size to 16, the button text color to #ffffff, and the button background color to #68d6e2.

bold-section-divi-email-optin-module-adsettings-3

Then, a little further down, set the button font to bold and all caps. Select “no” in the “add button icon” drop-down. Then we hop over the custom css tab.

Under the Newsletter Fields text box place the following bit of css:

font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: black;

Image Module:

bold-section-divi-email-optin-module-image-module-1

In the general settings for the image module, upload your image. Then, in the advanced design settings tab, set the image max width to a value that looks good. In our case that was 300px. We also chose to always center the image on mobile.

bold-section-divi-email-optin-module-image-module-2

When finished, save your settings, update the page, and view your new email opt-in form.

5. Irregular Form Shape

irregular-shape-divi-email-optin-module

This Divi email opt-in form has an irregular shape.

As is probably obvious, this concept was simply to create an irregular form shape. To show that it’s possible to, quite literally, think outside the box. Here is what that looks like on the backend; one section, one row, three columns, one email opt-in module.

irregular-shape-divi-email-optin-module-backend

Email Opt-in Module Settings:

irregular-shape-divi-email-optin-module-adsettings-1

In the advanced design settings tab the first thing we need to do is chance the form field background color to rgba(25,25,25,0.1) and the form field text color to #3d3d3d.

irregular-shape-divi-email-optin-module-adsettings-2

Moving down, set the header font to bold and size 26. Set the body font size to bold as well, and its size to 14. Then change the body text color to #939393.

irregular-shape-divi-email-optin-module-adsettings-3

And then here is where things get interesting. In the custom padding controls we’re going to combine percentages with pixels. Set the top, right, and left padding fields to 20%. Set the bottom field to 100px.

irregular-shape-divi-email-optin-module-adsettings-4

Then, flip the switch next to “use custom styles for button” and adjust the button text size to 16. Set the button text color to #ffffff. Set the button background color to #c42c1b. Set the button font to bold and select “no” from the “add button icon” dropdown menu.

Finally, hop over to the custom css tab and scroll down to the text box titled Main Element. Enter this css there:

border-radius: 20px 20px 100% 100%;
border-top: 5px solid #c42c1b;

When you’re finished, save your settings, update the page, and view your new irregularly shaped form.

Tomorrow: Learn 5 Unique Ways You Can Style Divi’s Contact Form Module

Tomorrow we’ve got another Divi tutorial planned. Just like this post, we’ll be taking you step-by-step through five unique ways that you can style Divi’s contact form module. See you then!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by BarsRsind / shutterstock.com.

divi-2-6-logo

Divi 100 Day 61

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


79 Comments

  1. Thank you! Great stuff as usual. I am sure that many, many people would like to see a simply option to get rid of the last name field or even the first name one. To me it seems quite rare that websites use an optin form in this way. CSS solution or future feature maybe? Would be amazing. Thanks for all the good work. Please keep it up.

    • Completely agree with this! Its still very hard to customise considering how important it is.

      Being able to remove fields would be a start!

      • Yes agreed ~ adding and removing fields would be so handy! I don’t use first & last name with my lists, only “name.” I also like to capture state & country, as I organize by your region. Yes, I can ask people to customize their settings via mailchimp later, but most folks won’t read the fine print when I do…

      • I wouldn’t say it’s “very hard” to customize, but honestly, it could still do with being a little easier. I find having both “first” and “last” name to be redundant, as the person could technically just use both under the single “name” field.

        It’s just a little irksome but possible to get around. So not really a big deal IMO.

        • Yes! Please add GetResponse!!!
          You invest all this time improving the layouts but it doesn’t help when we can not use them.

      • So I guess nobody figured out yet how to remove fields?

    • Nathan B. Weller

      Yes that is a popular request. We have several module updates and improvements scheduled for future updates.

  2. Hi Nathan. I love this post! I’d love to do is add GetResponse API to take advantage of what you share in this article, because to do so, I think it only applies to Mailchimp.

    Thank you very much.

    • I agree I’ve been asking for GetResponse to be added for ages. They have a great system and Mailchimp has changed so much for the worse lately.

    • Nathan B. Weller

      We get a lot of requests for GetResponse. I’m sure we’ll add more options to this module in the future.

      • It also seems like there is a growing demand for Simplero integration/API
        I would surely use it for my customers πŸ™‚

        Or just a way to integrate some “Elegant” designs / features as html into either GetResponse and Simplero optin forms.
        Thank again for some amazing stuff

    • Yes, add GetResponse please!

  3. This is top 3 of the tutorials so far! Finally a guide to giving some life to the standard contact. I’ve been using the Divi tutorial on blank page lead gen pages for all of my clients but I’m absolutely using a couple of these in replacement of those. Thank you!

  4. Awesome, but what is the functionality behind this? Is there a sort of engine behind it that enables those opting in to opt out and for me as the web master to mail out to those that opted in? Sorry if this is something I should know already, I’m new to this…

    • Nathan B. Weller

      The way this module works is that it connects to MailChimp, Feedburner, or Aweber. So yes, when someone signs up here you are building your list and able to send them emails.

      • Hi Nathan, I cant get my head around that Divi is so amazing but isn’t up to date with internet marketing segmented, tagged email providers like Active Campaign, Infusionsoft, Convert kit and Ontraport.

        I can’t use Divi’s opin form and connect to my email provider and as yet I can get Bloom to sit where I want on my page.

        Q. Is there any training you have making Bloom work with the Divi builder.

        Building your list is the number one goal for inbound marketing. Mailchimp, Aweber and Feedburner are not the choice of the new breed of internet marketer.

        I praying that DIVI see’s the light and upgrades its relationships and integrates with the above email providers and others.

        I absolutely love Divi and worked so hard to learn to use it as a non-tech person. Can you whisper in someones ear with this feedback.
        Apologies for the rant, its my only frustration and now you’ve made the opin so amazing I want to use it!!!

        Massive fan of your Divination ~ great tutorial too!

        Many thanks. J

          • I concur re: ConvertKit, as well as other popular email campaigns.

            • +1 for ConvertKit – I don’t understand why this hasn’t been integrated yet πŸ™

  5. Wow…this is one the top 3 of the best post in Divi Marathon! Thank you very much Nathan for this cool tips.

    May I ask if there have been a post on Different Team layout…

    Cheers!

  6. Super tutorial. So useful and well explained. ☺

  7. Has anyone figured out how to have it redirect to a new URL upon clicking “sign up”?

    • Hi Alaina, did you have any luck with this? I’ve been trying to do the same thing and haven’t been getting very far! Cheers, Adam

  8. Thanks! Can’t wait to try this. I do have one question. How did you do the countdown? I’d love to do something like that for authors who have books that are releasing.

    Thanks again

    • Nathan B. Weller

      There’s actually a count-down module you can use. Maybe we’ll do a post like this for that module in the future to show some different styles you can achieve.

      • That would be awesome. In regards to the email form, any chance you will add mailerlite? I have a lot of clients using it instead of mailchimp because of all the issues with them lately

  9. Hi. as you can delete the last name in the contact form?

  10. Will you be adding in all the popular services, including Mailpoet? It would great to have more options than just Mailchimp. Maybe all the options that you have in Bloom for different services.

  11. So very good. This resource is going to save me so much time. Thank you.

  12. Any chance you will be adding GetResponse to the list of providers? Almost all of my clients use them, as do I. It would be so helpful to be able to use your plugin without trying to work around it!

  13. What are the advantages of the module compared to Bloom? Are the plugins like Bloom normally used when not using Divi as the theme?

  14. This is awesome!

  15. cool and elegant designs. I appreciate you guys for sharing this. kindly add support for mailerlite integration with divi, please. Thanks.

  16. I am so loving this countdown! I’ve learned a lot and it certainly has stirred the creative juices. I’m loving Divi more and more each day!

    Thanks for every single post since Day 1. These have become the high point of my day (I’m not sure what that says about my day πŸ™‚

  17. Hi there,

    Well, Just wondering if I can integrate this into a wordpress website? Plugin may be? it would be easier, I think.

  18. Can you connect to other services eg ActiveCampaign and redirect upon completion?

  19. Well, It is maybe impolite to forget to say thank you for your answer in advance. Herewith my many thanks for your answer and of course for your great effort.

  20. Does it work with ANY Autoresponder? Not just the popular ones? Thanks!

  21. Very cool stuf! I was just working on the exact same topic, so its great to get some different input!

  22. I Love Love LOVE how you show all of the settings for these. These are great. I want to try one right away!!! Thanks!

  23. I’ve using GetResponse for years and it would be nice to have this integrated with GetResponse.

    MailPoet is an excellent free newsletter/email WordPress plugin that we’ve playing with. Since this is WordPress based, is there a way to work with this plugin?

  24. The profile image example is very creative.

  25. Beautiful design ideas.

    What is the difference between Bloom & Email Opt In Module as in what would be the place where we use opt in module over bloom knowing that bloom has more features.

  26. This is very useful guide and finally something helpful.
    Please provide as much as possible tutorials with Divi

  27. Great Tutorial – Many thanks indeed.

    However, one thing that always stops me using the email opt in form module and Bloom is that there is no way to connect to Mailchimp Groups.

    I understand that others have requested this feature … any hope that this may be incorporated in the future?

    Thanks again for all the offerings – amazing resources and community support.

  28. Nice! Is there a way to put this in the widgets? πŸ™‚

    • I also am trying to figure out how to use it in a widget so I can put it in the sidebar or footer. I’d also like to put it in the header…

  29. Tried doing the Skinny one line optin… but the title is above the name and email fields, not inline with them. What am I doing wrong?

    • Found the problem.
      One of the settings as listed in the directions says -20 instead of just 20.
      Get rid of the – and the title lines up perfectly.

  30. I want to use ConvertKit autoresponder… can Divi connect to that?

  31. Solid tutorial, Thanks Guys!

  32. Extraordinary tips for Complete web outline venture. CTA and 404 is the primary necessity that can without much of a stretch be left by any basic client on the off chance that he unconscious of these things

  33. Best way to create emails form or get leads by these methords very impresive thanx to share this.

  34. First 4 looks awesome. Thanks!

  35. It would be nice to have a quick option to put the complete form in one column (button below fields) even when you use a fullwidth-row with only one column.

  36. That is great.
    But speaking of the DIVI Contact Form Module, don’t you all think that the lack of the “acceptance” check box is quite heavy?
    It’s the only missing thing that would make this module complete.

  37. Nice! But it would be even greater if the DIVI opt-in would be more open, just like the source code that allows it to exist, to use HTML CODED forms so it can be used with anything including our OWN in-house email marketing and automation solution.

    This is such an annoying trend to the max that opt-in page and form creators and builders most of the time lack of this attention like if there was only SaaS that are used in online business. Get alive, please! Serious businesses use in-house tools and need to be able to use HTML embedded forms, and yet it is very simple to use add HTML code option in those apps.

    Thanks for listening.

    Andy Voice

  38. I’ll be so excited when I can finally use these forms to connect with my email provider, ConvertKit!

  39. Great! Thank you for tips! 39 to go!

  40. Absolutely love the 2nd one. So simple and clever to put his arms on the blue background before adding it. Just love it. Thanks for these tips and detailed descriptions. Divi can be so much fun!

  41. I am so excited to try these tips ..simply amazing !!
    thanks

  42. Appreciating such a detailed resource! Thank you.

  43. Love this tutorial – but for some reason when I go into the email optin module, I cannot select a list, even though the API key is insterted and the plugin tells me that Mailchimp is connected. I have tried two different Mailchimp plugins but no luck so far!

    • Hey Coral! Did you enable the Mailchimp feature?

      Divi > Theme Options > General > Regenerate MailChimp Lists

      • Hi Clinton – yes I found out where I needed to have the Mailchimp API – in the main Divi theme option section, and not under the mailchimp plugin area!
        Thanks.

  44. Ok, I’m stuck on the Skinny Form. Three points I don’t understand.
    1) In the Custom CSS Tab add this to the text field β€œcss class”: horizontal-optin. I don’t see anything called Text Field to add it to.

    2) I don’t see anything a Newsletter Fields to add this code to:
    display: inline-block;
    width: auto;
    margin-left: 30px;

    And 3) I don’t know how to add the final code .horizontal-optin p{
    display: inline-block;
    }

    Do I need to upgrade something to see a place for these items?

  45. Hi thanks for these beautiful layouts. I make some tests. And now i have a little problem with number 3. My Text or Titel Parte will not be in the middle of the row. What can i do?
    Thank you for your help.
    Best regards
    Achim

  46. 3. Skinny Opt-in Form – My Header Text is not centering properly! Does anyone have any answers/suggestions to fix this? Thanks in advance!

  47. RE: skinny optin form text misalignment:

    There is an error in the code listed above under Newsletter Description.
    Instead of margin-top: -20px;

    It should read as
    margin-top: 20px;

    My amazing IT son told me to remove that one simple little dash and mine lined up just fine.

    • Awesome! That fixed it for me as well!

  48. Awesome layout and great tutorial as always. Also would like to know if there are plans on supporting MailerLite. Thanks.

  49. I wish I knew how to display a message field with the optin module from Mailchimp.

  50. how do I connect this to activecampaign?

    • Take a look to Zapier πŸ˜‰

  51. Is there a reason why my form wouldn’t be showing a last name field? What can I do to remedy this?

    Thanks! I like this tutorial.

    • Nathan B. Weller

      Thanks for reading Linsay and I’m sorry it’s not working as in the tutorial for you. We’ve found that when people are having issues with a tutorial it’s likely something unique to their site. Could be plugins, could be settings, could be a number of things. That’s why following up with a support staffer who can take the time to look at your specific site is often the most helpful thing. So please create a ticket in our forum for this issue and someone will follow up with you.

      https://elegnatthemes.com/forum

  52. Where can we edit text confirmation? How can I set redirection after submit?

  53. I tried #3 (skinny) twice, but it didn’t even slightly work. πŸ™

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest