How To Create A Single Field Divi Email Optin Module
This tutorial will show you how to style and customize the Divi Email Optin module and make a horizontal single field optin layout for your email signups!
Make The Divi Email Optin Module Horizontal With Only One Field
I’m a huge fan of the single field email optin. I suppose this is because it is simple and minimalist, but also people hate subscribing so the less fields they have to fill out the better. I use this a lot in our Divi child themes, so if you have seen that and wanted to replicate you have come to right place. This tutorial will show you how to change the Divi Email Optin module into a single field horizontal layout. I really like this and hope you enjoy it!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
To begin, style the Divi Email Optin module however you want using the design settings. You can design the input fields and button using all the available Divi settings. The main benefit to this tutorial is not how to do that, since those are all standard Divi Builder features, but rather it is the CSS that makes this all work together beautifully which will be added in the next step.
Toggle Off The Email Optin Fields
There are only a few steps that are required, and they are very easy. First, go in the module settings and turn off all the toggles for the name fields. The screenshot below shows how this will look when you are done with that.
Set The Email Optin Layout
Next, be sure to set the layout to “Body On Top, Form On Bottom” for this to work well. This is the last required step, so go ahead and any other design adjustments and proceed to the CSS snippet below.
Add CSS To Make The Divi Email Optin Inline Horizontal
Now that we have the module set up, it’s time to add the CSS that does the tricks we need it to do. If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
@media (min-width: 767px) {
/*set the width of the input fields minus the width of the button*/
.et_pb_newsletter_fields .et_pb_newsletter_field {
flex-basis: calc(100% - 225px) !important;
}
/*set the width of the button*/
.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: 210px !important;
}
}
Media Query
You’ll notice a couple of things are happening here. First of all, the entire snippet of code is wrapped in a media query. The purpose of that is to allow the optin module to change to a stacked layout on screens smaller than 767px.
The first part of the code makes the input field area 100% wide, but we are using a CSS trick to calculate 100% minus the width of the button.
Button Width
The next part of the code is setting the width of the button. Notice how there is a difference in the pixel value. The reason for that is to allow space for the gap between the email field and the button.
Single Field Horizontal Divi Email Optin Module Examples
Like I said at the beginning, I like to use these on our child themes and on client sites. So I thought I would inspire you by showing you some of the designs I have used.
I hope you have enjoyed learning How To Create A Single Field Divi Email Optin Module. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore :)
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
OUR ONCE A YEAR SALE IS HAPPENING NOW!!!
25% OFF all Divi Plugins, Courses, and Child Themes!
Hi Rufayl,
That sounds like you have not connected the email optin to an email provider, such as Mailchimp. This is just a Divi thing, Once you do that it shows.
Hi Philipp,
That’s an interesting question that I never considered. You are right, they don’t have any way to set it as required or optional like they do with the Contact Form module. I’m not sure, but that may be a good thing to ask Elegant Themes to consider!
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore :)
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
I’m pleased to announce our next update to version 2.2 of our Divi Events Calendar plugin with a full new search and filter module!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
realy help full thank you
You’re welcome!
Hey Nelson, I have a problem with this, it is showing this at the backend but not on the front end dont know why?
https://vipsolutions.org/
Hi Rufayl,
That sounds like you have not connected the email optin to an email provider, such as Mailchimp. This is just a Divi thing, Once you do that it shows.
Hi, Nelson, great tutorial! Wondering about adding a name field for the horizontal layout. Love this and have started using it.
Hi Kay,
Yes just adjust the width in the CSS, you can try this:
@media (min-width: 980px) {
/*set the width of the input fields*/
.et_pb_newsletter_field {
flex-basis: 39% !important;
}
/*set the width of the button*/
.et_pb_newsletter_button_wrap {
flex-basis: 20%!important;
}
}
Hi Nelson,
do you know how to have a name field which is optional?
Divi only offers a name field which is required, but that is in direct conflict with GDPR.
Would love to see your take on this.
At the moment we solve it using gravity forms / contact form 7 , but for small project it would be amazing to use the divi optin module.
Cheers from Germany,
Philipp
Hi Philipp,
That’s an interesting question that I never considered. You are right, they don’t have any way to set it as required or optional like they do with the Contact Form module. I’m not sure, but that may be a good thing to ask Elegant Themes to consider!
Thanks Alot Sir
You’re welcome Ali!
Hello, works beautifully by itself….but when I add custom fields, the alignment is thrown off (see screenshot). Any suggestions?
We have one more tutorial that teaches that how we can add two or three custom fields in the Divi Email Optin Module like this so to see that please go to the URL given below:
https://wordpress-292293-1617718.cloudwaysapps.com/how-to-create-a-horizontal-inline-divi-email-optin-module/
Let us know if that helps. 🙂
This. Is. Awesome. Thanks, Nelson. You freakin’ rock.
Thanks Phil, really thrilled to be able to help!
Hey Nelson. Thank you for the tutorial.
Question:
Is there a way to tell Divi to only apply this layout for one specific email opt in form? I’m trying to create another without the layout effects.
Thank you
Hi Tim,
Yes with CSS you can always add a custom class to the module and then match that class in the CSS snippet before each line of code.