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

Check out Divi Booster

Divi Booster is essential for customizing your Divi site, now offering an easy way to make your email opt-in form horizontal. Upgrade efficiency and aesthetics quickly with the latest feature release.

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.