Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Create A Horizontal Inline Divi Email Optin Module (With 1, 2, Or 3 Fields)

Nelson Miller Profile Orange
This tutorial will show you how to style and customize the Divi Email Optin module and make the layout horizontal on one line with any number of fi!

▶️ Please watch the video above to get all the exciting details! 👆

Style & Customize The Divi Email Optin Module

The first step is to simply add the Divi Email Optin module to your layout and adjust the diesign settings however you want. You can go ahead and design the input fields and button using all the available Divi settings, becasue we won’t be affecting the styling with this tutorial, just the layout. There is no built-in way to change the Divi Email Optin module layout to one line without this tutorial, and that is the focus here today.

Toggle On The Email Optin Fields

There are only a few steps that are required to be adjusted in the modules settings, and the as mentioned, the design settings are optional. The first and obvious thing to do is to turn on the input fields that you want to use. Most likely you will want to turn on toggle for “Use Single Name” if you want just a name and email field for a total of two fields. 

horizontal inline Divi email optin module with single name field turned on

Or if you want the first and last name toggles turned on, this would create three fields total. Just toggle off the single name field and toggle on the first and last name fields.

horizontal inline Divi email optin module with first and last name fields turned on

NOTE: The email input field is always on (because this is an email optin module) so there is no toggle for that, only for for the name fields.

Set The Email Optin Layout

The second required step is to set the layout in the Design tab to “Body On Top, Form On Bottom” for this to work well. 

Divi email optin module layout for making horizontal single field

Once you have the fields and layout set, you can finish any other design adjustments and proceed to the CSS snippets below.

Add CSS To Make The Divi Email Optin Inline Horizontal

Now that we have the module set up, it’s time to add the CSS that does the tricks we need it to do. Note that we have three options below, and you will need to choose the code snippet based on what settings you set in for the fields in the previous steps.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

Email Optin With One Field

@media (min-width: 767px) {
	/*set the width of the button*/
	.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
		flex-basis: 150px !important;
	}
	/*set the width of the input field minus the width of the button*/
	.et_pb_newsletter_form .et_pb_newsletter_field {
		flex-basis: calc(100% - 165px) !important;
	}
}

Email Optin With Two Fields

@media (min-width: 767px) {
	/*set the width of the button*/
	.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
		flex-basis: 150px !important;
	}
	/*set the width of the input fields minus the width of the button*/
	.et_pb_newsletter_form .et_pb_newsletter_field {
		flex-basis: calc((100% - 180px) / 2) !important;
	}
}

Email Optin With Three Fields

@media (min-width: 767px) {
	/*set the width of the button*/
	.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
		flex-basis: 150px !important;
	}
	/*set the width of the input fields minus the width of the button*/
	.et_pb_newsletter_form .et_pb_newsletter_field {
		flex-basis: calc((100% - 195px) / 3) !important;
	}
}

Things To Note And Learn

Media Query

You’ll notice a couple of things are happening here. First of all, the entire snippet of code is wrapped in a media query. The purpose of that is to allow the optin module to change to a stacked layout on screens smaller than 767px.

Learn More About Media Queries

Button Width

The first part of the code snippets is setting the width of the button to 150px. You can change this number to anything else, but just make sure to also adjust the 165px value in the second snippet. The reason for the 15px difference is to allow space for the gap between the fields and the button. Then the snippet for two fields is 180px, again to create two different 15px gaps, and the same for the three fields snippet with 195px. But of course you can change this however you want!

Input Field Width

The second part of the code snippets control the width of the fields. You will notice this is different in each of the three snippets, and it is best to watch the video to understand this well. But basically we are using some CSS and math tricks to calculate and adjust the width based on how many fields we have included.

Pretty neat, huh? Let me know what you think in the comments!

 

Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

24 Comments

Comments By Others

  1. Nurul Basher

    Thank you

    Reply
  2. David Jones

    This is great stuff. I’d like to be able to replicate something like this – https://www.humangood.org/valle-verde – the form at the bottom. Want to make the fields less wide and centered like that one. Is there any way to do that?
    Thanks!

    Reply
  3. Lou Ann

    Hi Nelson,
    I’m trying to create a list of inline entires (such as name, address, phone) and only hit submit at the end of the form. How can I create multiple inline fields within a form?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      That sounds more like a contact form, not usually relevant to signing up for an email list. Some contact forms can also add to an email list, like with Zapier in our Divi Contact Form Helper plugin.

      Reply
  4. Linda K

    Hi Nelson!!!

    As always, Thank you SOOOOOOO much for your instructions — always helpful! This was exactly what I needed. I wanted to point out that there is a typo in the size of the button for the Email Optin With Three Fields. Should be 150px not 1500px.

    Reply
  5. Marco

    Hi Nelson,

    In divi visual builder i see the field inline. Just like it should be.
    But after saving en closing the builder, al the fields and button disapear.

    Do you have any idea how that’s possbile?

    Reply
    • Hemant Gaba

      Hey Marco,

      It might be a cache issue so please go to the Divi > Theme Options > Builder > Advanced and clear the Static CSS File Generation cache there and see if that helps.

      Reply
      • Hemant Gaba

        Just to clarify, the email service provider email and password are selected and the list is fetched in the Email option? If yes, can you share the URL of the page?

      • Ivan

        Hi Nelson,
        First, thanks for all your tips and help for DIVI users !
        Same for me here. Everything’s fine in the builder, then when exiting the field and button disapeared. (Title and Body of the optin setting are still there. Just the field and button are gone)
        I cleared Static CSS with no success.
        Very strange !!

  6. Alecz Eighmard

    Good day Nelson, I am a big fan, since starting my Divi Journey. I just want to ask if there is a way for my button and form to be the same height. Adding padding gives me unequal heights on different browsers when using px and em. Thank you so much.

    Reply
    • Hemant Gaba

      Hey Alecz,

      Could you please share the URL of the exact page where the module is present in order for me to investigate this issue?

      Reply
  7. Muhammad Talha

    Hi Nelson,

    This is very useful Tutorial. I’ve one question.

    What if I want to use both Full-Width & Inline Signup Form in 1 website?

    Like I created Inline Sign Up form in Homepage & now I want to use Full-Width form in Sidebar.

    How can I do that? Because every form I’m creating is getting Inline by default.

    I’ll appreciate that.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Sure, so with anything like this in web design, adding a custom CSS class is the answer. In this tutorial we just happen to target all on the site, but you can easily add any custom selector you want before each selector.

      Reply
  8. Talita Romão

    no longer useful! can you check? since Divi changed the CUSTOM CSS´ fields from the last update

    Reply
  9. IndoAge

    is there a way to align horizontally on mobile device also

    Reply
    • Hemant Gaba

      Please try removing that media query from the code and see if that helps. For example, if you are using one field only then the code after removing the media queries will become:

      /*set the width of the button*/
      .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
      flex-basis: 150px !important;
      }
      /*set the width of the input field minus the width of the button*/
      .et_pb_newsletter_form .et_pb_newsletter_field {
      flex-basis: calc(100% - 165px) !important;
      }

      This way you can remove the media queries and use the code for all the screens.
      Please let us know if this helps. 🙂

      Reply
  10. Herman Karssen

    Great post and video! But I can’t see the CSS… Just 3 gray sections, see image. Using browser Vivaldi on WIndows10. I’ve turned off uBlock and cleared cache.

    Reply
      • shay

        i am using chrome and cannot see the code either, just 3 gray lines .

Submit a Comment

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

Recent Posts

0

Your Cart