Slim Divi Optin Form Module Layout

Divi 3.4 Slim Optin Module

In version 3.4 Divi introduced a new html markup for its Optin Module. With the new structure the previously custom-styled forms may not look as you’d like. In this quick tutorial I’d like to show you what CSS you can use to change the default Optin Form into thinner and cooler version.

 

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!


Can’t see the form? Click here
Please note:
I’m not a lawyer so this is not a legal advice, BUT you don’t need any checkboxes to make your signup form GDPR compliant. You need the subscriber’s explicit consent to send them emails, but a checkbox is not the only way to get this consent. Use your header and a phrase like “Subscribe to” to make sure it’s clear that the user is consenting to a newsletter by signing up.

1. Slim signup form with single input field

If you are going to use single e-mail field in your optin form, add a custom CSS class of dl-slim-optin1 and use this CSS code:

.dl-slim-optin1 .et_pb_newsletter_footer {
	flex-basis: 100%;
	margin-top: 0;
	font-size: 80%;
}	
.dl-slim-optin1 .et_pb_newsletter_field,
.dl-slim-optin1 .et_pb_newsletter_button_wrap {
	flex-basis:49%;
}
@media (max-width:980px) {
	.et_pb_column_4_4 .dl-slim-optin1 {
		display:block;
	}
	.dl-slim-optin1 .et_pb_newsletter_description,
	.dl-slim-optin1 .et_pb_newsletter_form {
		width: 100%;
		padding: 0;
	}
	.et_pb_column_4_4 .dl-slim-optin1 .et_pb_newsletter_description {
		margin-bottom: 10px;
		text-align:center;
	}
	.dl-slim-optin1 .et_pb_newsletter_footer {
		text-align:center;
	}
}
@media (max-width:479px) {
	.dl-slim-optin1 .et_pb_newsletter_field,
	.dl-slim-optin1 .et_pb_newsletter_button_wrap {
		flex-basis:100%;
	}
}

2. Slim signup form with two input fields

If you are going to use both e-mail and name field in your optin form, add a custom CSS class of dl-slim-optin2 and use this CSS code:

@media (min-width:981px) {
	.dl-slim-optin2 .et_pb_newsletter_description {
		width: 30%;
	}
	.dl-slim-optin2 .et_pb_newsletter_form {
		width:70%;
	}
}
.dl-slim-optin2 .et_pb_newsletter_field,
.dl-slim-optin2 .et_pb_newsletter_button_wrap {
	flex-basis:32.5%;
}
.dl-slim-optin2 .et_pb_newsletter_footer {
	margin-top:0;
}
.dl-slim-optin2 .et_pb_module_header {
	padding-bottom:0; 
}
@media (max-width:980px) {
	.et_pb_column_4_4 .dl-slim-optin2 {
		display:block;
	}
	.dl-slim-optin2 .et_pb_newsletter_description,
	.dl-slim-optin2 .et_pb_newsletter_form {
		width: 100%;
		padding: 0;
	}
	.et_pb_column_4_4 .dl-slim-optin2 .et_pb_newsletter_description {
		text-align:center;
		margin-bottom:10px;
	}
	.dl-slim-optin2 .et_pb_newsletter_footer {
		text-align:center;
	}
}
@media (max-width:600px) {
	.dl-slim-optin2 .et_pb_newsletter_field {
		flex-basis:49%;
	}
	.dl-slim-optin2 .et_pb_newsletter_button_wrap {
		flex-basis:100%;
	}
}
@media (max-width:479px) {
	.dl-slim-optin2 .et_pb_newsletter_field{
		flex-basis:100%;
	}
}

3. Slim signup form with three input fields

If you are going to use all of the default Divi Optin Module fields: first name, last name and e-mail field in your optin form, add a custom CSS class of dl-slim-optin3 and use this CSS code:

.dl-slim-optin3 .et_pb_newsletter_field,
.dl-slim-optin3 .et_pb_newsletter_button_wrap {
  flex-basis:24.5%;
}
.dl-slim-optin3 .et_pb_newsletter_footer {
  margin-top:0;
}
.et_pb_column_4_4 .dl-slim-optin3 {
  display:block;
}
.dl-slim-optin3 .et_pb_newsletter_description,
.dl-slim-optin3 .et_pb_newsletter_form {
  width: 100%;
  padding: 0;
}
@media (max-width:800px) {
  .dl-slim-optin3 .et_pb_newsletter_field,
  .dl-slim-optin3 .et_pb_newsletter_button_wrap {
    flex-basis:49%;
  }
  .et_pb_column_4_4 .dl-slim-optin3 .et_pb_newsletter_description {
    margin-bottom:10px;
  }
}
@media (max-width:479px) {
  .dl-slim-optin3 .et_pb_newsletter_field,
  .dl-slim-optin3 .et_pb_newsletter_button_wrap {
    flex-basis:100%;
  }
}
Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

39 Comments

  1. Stef Michalski

    Hi, sorry to post on an old thread – would you have any idea why the slim email form is working perfectly on a homepage design, but not on any other pages on the site?

    Home:

    Product:

    Any ideas what I’m doing wrong – I’ve tried everything I can think of? Many thanks!

    Reply
  2. Britt Phillips

    This is exactly what I was looking for. Thank you!

    Reply
  3. Cathryn Hahn

    Hi! Do you know why all of my fields are aligned right and not coming out inline horizontally?

    Reply
    • Ania Romańska

      No, sorry, no premade layout like yours. You should try targeting the checkbox wrapper elements and setting their “display” property to “inline-block”.

      Reply
      • Meiko

        Wow such a quick response. Thank you so much for your time and response. You are amazing. I’m not sure what you are recommending but I will give it a try. I appreciate your help!

  4. Mari

    Hi, I’m looking to change the size of the button in the e-mail optin module. I don’t want it with the same width of all the fields (because now it have the 100%), I want it smaller.. I have try it with:
    .et_pb_newsletter_button{
    width:30% !important;
    }
    but it doesn’t work. Can you help me please?
    Thanks!

    Reply
    • Ania Romańska

      Can you share a link to your site?

      Reply
  5. svennder

    hi without changing anything the optin footer text ( We take your privacy seriously. No spam. See our terms & privacy here.)does not show at all

    Reply
  6. Stewart

    Great stuff! Just one thing, is there a way of reducing the width of the sign up button in comparison to the fields?

    Reply
  7. alain

    This is really great Ania. I had look for this several time. I have a small glitch when i pass under 980px.. fields does not show align well. In dev mode on chrome it look ok but in reality no. Any idea how to fix that Ania??

    http://joseebouchard.com/nouvelle-page-daccueil-2/

    pw: dev

    Reply
    • Ania Romańska

      Hi, please try adding a min-width property in this part of CSS:

      .dl-slim-optin2 .et_pb_newsletter_field, .dl-slim-optin2 .et_pb_newsletter_button_wrap {
          flex-basis: 32.5%;
          min-width: 32.5%;
      }
      Reply
      • Alain

        It worked like a charm Ania! One question still remaining. Why do you use flex-basis? I tried without it, only with min-width and it doesn’t seems to make any difference?

        By the way, are you giving or selling css formation?

  8. Armin

    Hi,

    where do I have to put the CSS Code? In the Divi Theme Options?

    And the CSS Class “dl-slim-optin2” in the Optin module?

    Thanks a lot, Armin

    Reply
    • Ania Romańska

      Hi Armin, Yes and yes – theme options and optin module advanced tab.

      Reply
      • Armin

        Hi Ania, thanks for advice. It works for Laptop & Mobile – but on Tablets it looks weird. Any idea?

  9. NICOLE D JOHNSON

    This was perfect…I’ll use this on several of my sites…this is the best solution I’ve seen yet!! Thanks!

    Reply
  10. Alex

    Finally!
    After checking dozens of solutions out there including elegant theme’s blog itself finally yours did the job!
    Big five star Ania!

    You saved me from installing Bloom!
    Thanks for spreading good stuff around the web.

    Reply
  11. Rob Wood

    Hi

    I have just tried using your slim opt and it looks lovely, but for some reason the Field and Button are sitting on top of each other?

    Rather than side by side, see here: https://www.screencast.com/t/u8PqD5BH

    Would you be able to point out my error?

    Thanks

    Reply
    • Ania Romańska

      Hi Rob,
      It’s hard to say without the link, but you might need to add some !important tags to the CSS to make it right.

      Reply
  12. Clinton Gorham

    The code (optin3) isn’t working properly. It basically looks exactly like optin1.

    Reply
  13. Evan Courtney

    On Divi visual builder I am seeing the input fields, but on the live site they are gone. Any idea?

    Reply
    • Ania Romańska

      It’s most likely because you haven’t connected the module with any mailing list.

      Reply
  14. Lorenzo

    Wow very interesting

    Reply
  15. edoos

    Where do we need to add the custom class?

    On the section, Row or module ?

    Reply
    • Ania Romańska

      The custom CSS class should be assigned to an Email Optin module.

      Reply
  16. Osmond

    Love this – what a better one the one I had mocked up.

    One issue on my WooCommerce page for a product, it’s broken. Looks not to be pulling the CSS through. Works on any page above product level – I have added this to the footer.

    Any ideas?

    Reply
  17. Victor

    This is a keeper! However, I’m really surprised that Divi doesn’t offer this design as an “out of the box” option.

    Reply
  18. Sheila

    This is brilliant! I spent quite some time trying to help someone get their divi theme to do this. And then they spent time with Divi support and your email came out several days later. I just implemented it on another site and it’s brilliant! Thank You!

    Reply
  19. David

    Just looked at one of my older client sites today and realised my original slim optin css was broken. This saved me, and it looks better than it ever did.

    Thank a lot!

    Reply
  20. Caelan Huntress

    Good stuff! I’ve been looking for an alternative to Bloom, and this is just the ticket.

    Reply
    • Rafa

      I agree, with this wonderfull CSS and the Divi optin option don´t need to add another plugin

      Reply
      • Rafa

        The email optin error message is not translated…
        Any idea?

Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.