Search

How to Align the Name and Email Fields with the Submit Button in the Email Optin Divi Module

If your business sells products or services online or you’re a content creator who wants to build a following, an opt-in email form can be a valuable asset for your website. So, what is an opt-in email? Opt-in email is a type of email marketing that only sends emails to users who have explicitly opted in to receive them. This means that the recipient has voluntarily provided their email address and has given permission for the sender to send them emails.

Luckily for us, as Divi users, we can easily create an opt-in email to our website with the help of the Divi Email Optin module. Divi Email Optin is a powerful tool that can help you grow your email list and stay in touch with your subscribers. But with all the benefits this module offers, we found a slight issue; by default, we can’t align the fields (name and email) with the submit button. This article will show you how to solve that issue.

Steps to Align the Fields (Name and Email) with the Submit Button in Divi Email Optin Module

Step 1: Add the Email Optin Module

Alright, we are going to start with adding the Email Optin module. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Email Optin module, and insert that module into the column.

Next, we will set the layout of the module to place the body (title and text) above the form (fields and buttons).

On your module settings, go to the Design tab -> Layout. Afterward, select the Body On Top. Form On Bottom.

Step 2: Add the Custom CSS

Next, we will add the CSS code to the page to align the fields (name and email) with the submit buttons.

Go to the Page Settings by clicking the gear button (⚙️) on your Divi Builder editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.

.et_pb_newsletter_form .et_pb_newsletter_fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.et_pb_newsletter_form .et_pb_newsletter_field {
  flex: 1 0 auto;
  margin-right: 10px;
  
}

.et_pb_newsletter_form .et_pb_newsletter_button_wrap{
  flex: 0 0 auto;
  margin: 0px 0px 12px 0px;
  
}

The Code Explanation:

  1. The first rule targets the elements with two classes. “.et_pb_newsletter_fields“, that is the fields element class (name and email), it is a descendant of an element (form) with the class “.et_pb_newsletter_form“. It styles the container containing the newsletter form fields.
    • display: flex;: This property sets the container to use a flexbox layout, allowing its child elements to be laid out flexibly.
    • flex-wrap: wrap;: This property specifies that the flex items (newsletter fields) can wrap onto multiple lines if necessary.
    • align-items: center;: This property centers the flex items vertically within the container.
  2. The second rule used to style individual newsletter fields.
    • flex: 1 0 auto;: This property specifies how the flex item (newsletter field) will grow or shrink to fit the available space. In this case, it will grow to fill the remaining space in the container.
    • margin-right: 10px;: This property sets a margin of 10 pixels on the right side of each newsletter field.
  3. The third rule targets the elements with two classes. ".et_pb_newsletter_button_wrap“, that is a submit button element class, it is a descendant of an element (form) with the class “.et_pb_newsletter_form“. It is used to style the container that wraps the newsletter submit button.
    • flex: 0 0 auto;: This property specifies that the container should not grow or shrink and should maintain its initial size.
    • margin: 0px 0px 12px 0px;: This property sets margins of 0 pixels on the top, right, and left—twelve pixels on the bottom side of the container.

Note: Feel free to adjust the margin values as needed to achieve the desired spacing between the fields and the submit button.

That’s it. As you can see from the image above, once you add the custom CSS to your page settings, the fields (name and email) and the submit buttons are aligned. Edit and style up your module to achieve the best opt-in email to your website. Don’t forget to save your project or publish it if you want to.

The Bottom Line

By aligning the fields (name, email) with the submit button, you can create an optimized and visually appealing opt-in email form that improves the user experience and increase the likelihood of successful form submission.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.