Make the Email Opt-in Module Form Horizontal

Written by Dan Mossop

The Divi Theme's "email optin" module (formally called the "subscribe" module) allows you to add a form to your pages which users can use to join your mailing lists. A tutorial by Geno showed how to use CSS to change the layout of the module's signup form into a horizontal format. Unfortunately changes in Divi's implementation of the module have stopped that code (and the Divi Booster feature based on it) from working. I recently revisited this implementation and came up with a new, simplified, way to make the email optin module's form horizontal via CSS. 

Here's the CSS code:

@media only screen and (min-width: 981px) {
    .et_pb_subscribe .et_pb_newsletter_fields > p { 
        flex: auto !important;
    }
    .et_pb_subscribe .et_pb_newsletter_fields p.et_pb_newsletter_field {
        margin-right: 2%; 
    }
}

I've added this as a new option in Divi Booster (v2.8.8 onwards), which can be activated for individual modules. With Divi Booster activated, you'll find the setting in the module options at "Email Optin Module Settings > Advanced > Layout > Inline Form".

Boost Your Divi with Enhanced Features

Discover how Divi Booster can elevate your site customization. With our latest update, easily activate new options like horizontal layouts for your email opt-in modules. Effortlessly unlock hundreds of features to empower your Divi designs.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

7 Comments

  1. It looks like a recent Divi update may have broken this again, as the inline form button isn't working, and neither is this code. I can't get the submit button to sit in line with the fields. 😫

    Reply
    • Always the way… ignore my last post, it works fine IF you have the form set to text above, form below. D'oh. Sorry!

      Reply
      • Hey Jo, thanks for bringing this to my attention. I hadn't noticed that the layout options Divi had added were affecting it – I'm glad you were able to find one that worked :) Next chance I get I'll have a play around and see if I can make it compatible with all the layout options. Thanks!

        Reply
  2. Thank you so much for this. I have been looking for a very long time for a CSS code like this. Much appreciated.

    Reply
    • You're welcome, CC!

      Reply
  3. Just wanted to thank you for all the help you post for us new to Divi and CSS. Much appreciated. I am purchasing your booster.

    Reply
    • You're very welcome, Steven! Enjoy Divi Booster and give me a shout if there's ever anything I can help with. Cheers!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Removing Gaps in Divi Builder Layouts

Designing a seamless, professional-looking website is often about managing space effectively. Gaps in Divi Builder - particularly excessive white space between sections, rows, or modules - can disrupt your layout, leading to a fragmented and less engaging user...

Random Divi Posts