Hey Everyone, what’s up?

The Newsletter is the best way to communicate with your audience and give them special content that other users may miss but did you ever think that without a beautiful-looking Newsletter form you’ll not get more Audience and you’ll also miss many sales?

That’s why In this quick tutorial, I’ll show you the easiest way to create an Inline Optin/Newsletter Form in Divi that looks beautiful and attracts people. So I’ll only show you how to create a single-line Email Optin Design for now. 

Single Field Email Optin Form

Here’s the best way to create a Single Field Email Optin Form, we’ll only use a few lines of CSS and some default Divi design options to create it.

Add Email Optin Module and in the Content Tab -> Fields disable all the fields.

Now in the Text Panel remove the Title and Body Content.

And now Finally Remove the Background

So we’re done with some basic settings to do first, now move to the Advanced tab -> Custom CSS -> in the Opt-in Form Fields field paste the below CSS

width:70% !Important;

Now in the below field Subscribe Button add the below CSS 

width:30% !Important;
float:right;
border-radius:0px 100px 100px 0px !important;

Okay, now we can move to some Design Settings. For this, go to the Design tab -> Fields and make your desired changes. Below is what I did

• Fields Padding – 18px 18px 20px 20px
• Fields Font – Karla
• Fields Font weight – Bold
• Fields Rounded Corners – 100px 0px 100px 0px

You can also make your desired changes if you want. So now let’s move to the Button Design settings and make changes to the Button. Below are the changes I made

• Button Text Color – #fff
• Button Background Color – #19c684
• Button Border Width – 0px
• Button Border Radius – 0px
• Button Font Weight – Bold
• Show Button Icon – No
• Button Margin Top – (-69px) – Important
• Button Padding Top/Bottom – 10px 10px – important

And there you go Inline Email Optin Module Design without going into much hassle of CSS we do use a few lines which are necessary for this. Here’s how it looks

Here’s another quick technique to make it look more interactive. Go to Advanced tab -> Custom CSS Opt-in Form Fields and remove the CSS from there. And then in the Subscribe button remove the CSS you added before and add this

width:30% !Important;
float:right;
transform:scale(0.9);

Now go to Design tab -> Fields -> Corner Radius and add 5px to each corner and add 170px Right Padding to the Field.

Now move to the Button Panel and add 5px Border Radius for the button and in the Margin Right Field add -4px value add your own If it doesn’t look good.

And look the Button is now inside of the Email Field looks pretty cool right?

So that’s it for today’s Tutorial, Hope you guys find it useful. Please let me know what you think about this easy way to create inline Optin Design in the Comment Section below I’d love to hear from you.

Have a great day!