3 design for subscription form possible on Divi

We all love with new subscribers to our list of newsletter. One of the main ways to get new subscribers is to provide your visitors with a online form well-designed email sign-up. That's why in this tutorial, I'm going to show you how to make three different designs with the Divi Email Subscription Module to spark your imagination about the possibilities of this powerful and flexible module.

Preview

Here is an overview of the three concepts of the Divi email module that we will explore today.

Opt-in # 1 of Shadow Stacks

Start designing # 1

# 2 Big and Minimal Opt-in

Start designing # 2

# 3 small subscription form

Start designing # 3

What you need to get started

For this tutorial, all you will need is Divi. We will build each of these online form from scratch, so no need for a pre-made layout. However, I will be using a few images from some of the layout packs, but you can use your own if you wish.

Also, it is important to know that you will not be able to see the fields of the online form inclusion on the active site until you assign an email provider/list to your email subscription module. You can do this in your email Optin settings under Email account.

Now let's move on to these drawings!

Opt-in # 1 of Shadow Stacks

This design adds two box shadows to the Divi email signup module for a unique stacking effect that pops the form. The first box shadow is added to the email opt-in module and the second box shadow is added to the row which has a custom size and border to make it work.

This is how it's done.

First create a new section with a row of one column, then add the email signup module to the row.

Open the e-mail connection settings and update the following:

Background color: #1a0a38
Layout: Body on top, Shape on base
Rounded Fields Coins: 0px
Text orientation:
Center title Font weight:
Clear title Text size: 36px
Color of the text button: #ffffff
Button background color: # 00ac69
Width of the button border: 0px
Radius of the button: 0px
Custom padding: 3vw at the top, 3vw at the bottom, 5vw at the left, 5vw at the right

Now let's add our first box shadow layer behind our e-mail acceptance module.

Box Shadow: see screenshot
Box Shadow Horizontal Position: 25px
Box Shadow Vertical Position: -25px
Shadow color: rgba (26,10,56,0.82)

Now let's add a small snippet of custom CSS code to remove the left padding added by default to the form. Go to the Advanced tab and add the following CSS under Membership Form.

This supports the settings of the opt-in email module. Now let's edit our row. Open row settings and update the following:

Custom width: 600px
Custom padding: 25px up, 0px down, 25px right
Width of the bottom border: 25px
Color of the bottom border: rgba (0,0,0,0)
Width of the left border: 25px
Left border color: rgba (0,0,0, 0)

We can now add the shadow of the box to the line.

Box Shadow: see screenshot
Box Shadow Horizontal Position: 50px
Box Shadow Vertical Position: -50px
Box Shadow Spread Force: -25px
Shadow color: rgba (26,10,56,0.55)

All you have to do now is edit the text in the form. Now let's see the final design.

# 2 Big and Minimal Opt-in

This email opt-in design is minimal, clean, and large. Form fields adapt to the size of the browser, so it looks great on all devices. And it's not too big to require scrolling.

Here's how to do it.

First create a new section with a row of one column, then add the email signup module to the row.

Open the email participation settings and update the content to include your title and footer text.

Then update the background with a dark color or image:

Background color: #121212
Background image: This is optional. I'm using one from the Podcast Layout Pack

Before we move on to the Design tab for more customization, we need to make room for the large form elements that we are going to add. To do this, go to the row settings and update the following:

Custom width: 100%

Advice: Using a 100% custom width is a great way to ensure that your design has no left or right margins on the mobile. If you use the option "Generate full width", your maximum width will be 89%, so you will always have margins on your mobile.

Now go back to the settings of the email registration module and update the following template:

Layout: body up, shape down

Background color of the form field: rgba (0,0,0,0)
Rounded Corners: 0px
Fields Width of Bottom Border: 2px
Color fields of the bottom border: #ffffff

Text Orientation: Center

Font Title: Lato
Font Title: Light
Title Font Style: TT
Title Text Size: 4vw
Height of the title line: 1em

Field text color: #ffffff
Field font: Lato
Field Weight of the font: Light
Text size: 3.5vw
Spacing of the letters of the field: 0.1em
Field line height: 1.3em

Spacing of the letters of the body: 0.5em

Button text size: 4vw
Radius of the button: 0px
Space of the letters of the buttons: 0.1em
Button font: Lato
Weight of the font: Light
Custom padding: 10vw at the top, 10vw at the bottom, 10vw at the left, 10vw at the right

Notice the use of the length unit vw for the font size combined with the length unit em for the line height and letter spacing. This allows the text and design to adapt seamlessly when adjusting your browser.

The last step includes some custom CSS snippets to polish the design. Go to the Advanced tab and add the following custom CSS under Membership Form Fields:

This will allow the text size when typing to match the alternate text in the fields of your form.

Next, let's add a custom margin above the button to give it a bit of a break. Add the following items under the Subscribe button:

Now let's see the final design.

# 3 Small subscription form

This new design is sure to be a popular solution for businesses and blogs looking to save vertical space on their posts or landing pages. Even though Divi's email membership module is more suitable for forms more traditional vertical forms, you can actually convert it to a one-line horizontal form with just a little snippet of CSS code.

Here's how to do it.

Create a new section with a row of one column and add the email membership module to the row.

Open the email subscription settings and update the content to include a title, but nothing else.

Then update the drawing with a background and a button color as follows:

Background Color: # 54677d
Layout: Body up, shape down
Text Orientation: Center
Button background color: #b0c94f
Width of the button border: 0px

Now is the time for custom CSS. Since we want the slim form design to be desktop only (not mobile), we'll add the CSS to the page (under the page settings) using a custom CSS ID to target the form style. .

To do this, go to the Advanced tab and assign a custom CSS ID to the membership module.

CSS id: skinny

This will be used to target this form with the external CSS that we will add to the page.

Now open the settings on the Divi Builder page and add the following CSS on the Advanced tab.

@media (min-width: 980px) {# skinny.et_pb_newsletter .et_pb_newsletter_fields {flex-wrap: nowrap! important; } # skinny.et_pb_newsletter .et_pb_newsletter_fields> * {flex-basis: 23%; }} #skinny .et_pb_newsletter_form {padding-left: 0px; }

Since Divi is already using flex to style the form on the backend, this CSS removes the flex-wrap property which aligns the form fields vertically. The result is a horizontal arrangement of the form fields. By adjusting the flex-base property to 23%, you typically set the width of each of the form fields. And since we added the CSS in a media request, the design will only happen on the desktop with the form's default layout displayed on mobile.

Here is the final design.

That's all for this tutorial, I hope it will allow you to create forms single subscription on Divi Builder.