Follow us

R1 – Super Slim Bloom Optin Form | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Update: If you are using the new redirect on submission functionality in Bloom, remove this declaration from the CSS as it will prevent the redirection.

/* Hide the checkmark on success message */
.slim-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { 
display: none; 


For the first tutorial from Divi Soup I’m going to show you how to create a Super Slim Bloom Optin Form just like the one in this demo.

Inspired by the amazing Geno’s Super Slim Signup Module Tutorial, the Bloom Optin form allows for the same look as Geno’s but with the capability of integrating with all of the email service providers that Bloom supports, rather than just the MailChimp, Feedburner and AWeber default options provided in the standard Divi email optin module.

So let’s get cooking!

UPDATED: 25/06/2016 – fixed issue with Bloom 1.1.7 adding extra margin.



The Bloom plugin from Elegant Themes

The Divi Theme or Divi Builder Plugin from Elegant Themes


Cooking time


This should take you around 10 – 15 minutes max.




The first thing we need to do is create the actual optin form, so navigate to Bloom under plugins and hit New Optin and then select Inline from the form options.


Next, give your form a name and select your email service provide, account, email list and whether you want to enable double optin. Then hit Design Your Optin.


Choose a form template, the second one on the top row is just fine, then hit Customise at the bottom of the page.


On the Design Your Optin Form page, remove the text from both the title and message boxes, we will add text elsewhere later. Then change the settings as shown in the images below.




Now when you click on the blue eye icon in the top right to preview your form it should look like this.


Finally hit Generate Shortcode, copy and paste the code Bloom gives you into Notepad as we will be using it later and then click Save & Exit.




Now let’s get onto creating our module. Create a new page or open up the page you want to add the optin form to and add a new standard section with two columns and a text module in each column.


Open up the section settings and set the background colour to black, set the top and bottom custom padding to 0px and select Keep custom padding on mobile.



Then open up the row settings and give it the same custom padding and keep on mobile settings as we did in the section settings.

Next, open up the left hand text module and give it a custom css class, I’m using slim-optin-text. You will also want to set your text colour and orientation and then add the text you want before the form in the content area, then save & exit.


Now we need to open up the right hand text module and paste in the Bloom shortcode we put into Notepad earlier. Leave the text colour as Dark and text orientation as Left.


Then scroll down and add a custom css class, I’m using slim-optin-form.

Then save & exit.


Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.


/*----------Super Slim Bloom Optin Form----------*/ /* Set the padding for the content */ .slim-optin-form .et_bloom_form_container .et_bloom_form_content { padding: 0px !important; } /* Hide the header area */ .slim-optin-form .et_bloom_form_container .et_bloom_form_header { display: none !important; } /* Set the font size of the optin text module */ .slim-optin-text { padding-top: 15px !important; } /* Set the margin for the optin form module */ .slim-optin-form { margin: 0px 0; } .slim-optin-form .et_bloom_inline_form { margin: 10px 0 !important; } /* Add a little padding for smaller screens */ @media only screen and (max-width: 1110px) { .slim-optin-form { margin-bottom: 25px; margin-top: 0px; } } /* Set the font colour for the sucess and error messages */ .slim-optin-form h2.et_bloom_success_message, h2.et_bloom_error_message { color: #888 !important; } /* Set the border radius for the sucess and error messages */ .slim-optin-form .et_bloom_form_container h2.et_bloom_error_message, h2.et_bloom_success_message { border-radius: 0px !important; } /* Hide the checkmark on success message */ .slim-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { display: none; }

And that’s it, now your optin form should look like the one above this post.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!