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.
Ingredients
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.
Preparation
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.
Method
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. 
Michelle X
This was very helpful. I would love a tut on how to style Bloom custom field backgrounds and text for dropdowns. I tried finding the selectors with Chrome but was not successful.
Thats a bit difficult for us to be honest as there are so many email services providers, and their forms will all have different selectors. But generally, there is not much you can do with styling form dropdowns, the browsers have their default styling which is not customisable
Hi Michelle,
Have followed step by step and I dont get “anything”. Coloured background only. I must be doing something so very wrong!!
Did you add your email service provider details and verify those first?
Worked for me on first go .. just had to add some css to vertically center the left text … thank you!
Hi, just wondering why you wouldn’t just use one txt module in one column. Why do you need two columns? I just did it with the one column and it appears to be working, but I can’t see your signup bar to compare the difference? I don’t see a signup bar above the post?
Because one text module includes instructions of some sort, such as “Sign Up!” or “Subscribe Now”
Not sure what you mean by that? Mine just has two input boxes and a subscribe button, and I only used one text module? http://wildfreetiny.com/get-involved/
Some people like to put text in addition to the form code separately, including myself when I used this on a site.
Hey Michelle, I want to put this opt-in above my nav bar not below it. How do I do that pls?
I would recommend something like the Divi Bars Plugin Lina https://divilife.com/product/divi-bars/
Hey Michelle,
Thanks for the great tutorial. I’m using the latest version of Divi and Bloom. Everything worked great, except, there is space between the sign-up and the main graphic. How do I remove this padding?
This recipe works without a graphic or image.
Michelle, I am using this trick on several of my Child Themes and client sites, and after one of the latest updates it dosn´t look too good. It seems that there is an extra paragraph added above the Bloom signup code, creating too much space on top, and the form design is not as balanced as it should be. I checked your link, at I think it´s there too. A
with padding-bottom 0.2em. You can see it on the link I added, to one of my Child Themes, do you think you can cook up a fix for this?
Solved via support ticket
Hi Michelle, I have the same issue, where the slim optin remains not-so-slim. I did make sure the code was updated (got it from your FB page). Do you have any suggestions? I’m sort of a newbie with one site and appreciate your help and your wonderful site! In case you need it, and the optin is towards the bottom of the homepage. Thank you!
Place the CSS code for the optin form style you want to use in Divi > Theme Options > Custom CSS
Ugh!! You had me right up until the last paragraph, “now for the CCS, copy and paste the code…” Need screen shots. Where can I find the area that the code needs to be pasted??
Sorry, Divi has changed a lot since this was written
You can paste the code into Divi > Theme Options > Custom CSS
I have installed this css to my site at http://www.thatsallwehave.com and I’m not getting it to show correctly.
It looks fine to me so assuming you got it fixed?
Great tutorial, Michelle! Thanks for sharing!
Most welcome Ben
Hi Michelle, thank you for this very clear tutorial.
I don’t know what is wrong, I followed every step, and still my Bloom form is quite wide…
My website development adress : prod.parisclick.fr
Wordpress version : last one
Divi version : last one
CSS added directly in style.css of my child theme
Thank you very much
I get an error when trying to visit that page (appreciate I am late in replying!)
On your live site the optin looks slim, did you fix it or want it thinner still?
OMG, thank you! I just had to make some slight adjustments on my end. Your instructions were perfect and absolutely NEEDED!
That’s great
Thanks so much for this recipe Michelle! I’m not sure what I’m doing wrong … but I’m having trouble with the form (not) redirecting to a custom page. The site I’ve got this on is http://annesophie.com.au and the page I’d like to redirect to (on completion) is http://annesophie.com.au/fcb/.
I don’t think it’s Bloom, as the pop up optin form that redirects to this page is working …
Appreciate your advice
Thank you
This recipe only affects styling and not functionality of the form. I cannot replicate your issue either so I can only suggest contacting ET support.
Thanks Michelle – appears it was the following:
/* Hide the checkmark on success message */
.slim-optin-form .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { display: none; }
I took this out, and the redirect worked
Ah great, thanks for letting me know. Love when they change things in an update (not!)
I will update the post also!
I just started the website. I wanted to start with the slim bloom form. I get the email and sign me up block, but not the name. What did I do incorrectly? I rechecked it three times.
Check your bloom field settings to make sure you have the name field showing in the form setup section of bloom
Thank you for this tutorial.
I’m having trouble with the alignment. There’s a space below the text and the form.
The signup form is at the bottom of this page: http://www.christianeidun.com/mood-food/
Your line height is at 1em for that text module, change it to 0.5 and you should be good
Hi, thank you so much for this walk through – its working great. just one quick question. How do i get my success message to stay showing just a few seconds longer? Ive included a discount code for signing up in the success message but it disappears before anyone would have time to read it!
Thank you in advance
This would be a question for ET. However, in the new version of Bloom you have the option to direct the user to another page on signup success, I would suggest creating a page and putting your coupon there
Just want to say a big thank you! This worked perfectly for me.
Most welcome Julie
Hi Michelle,
Not sure why this isn’t working for me. It’s turning out as a thick box rather than a slim one, and I can’t seem to get the Name and Email to line up next to each other (instead of stacking). Ideas? http://www.teamkristin.com
It looks like the css is not applied, I cannot see any of my code on the section?
Hi Michelle,
Thank you for the great tutorial. However i only got the email form part right, for the text before the form it appears on top and not aligned. Can you please help?
This part of the CSS sets where that text sits, so just increase or decrease based on your needs
.slim-optin-text { padding-top: 15px !important; }Thank you! It help me a lot. Just opted in to you form
Thanks Jonathan
Hi Michelle,
Thank you so much for the great tutorial however i only got the email form right. As for the text before the form, it appears on top and not aligned. Also, the whole background thing is not as slim as I hoped. Can you please help?
This part of the CSS sets where that text sits, so just increase or decrease based on your needs
.slim-optin-text { padding-top: 15px !important; }This is great and I’ve got it working with no problems. However, my client wants the ’email’ section to be wider so that you can see the entire email address at once. How do I make that change?
Thanks in advance
You can set the width using these properties, but remember to reduce the width of the name field by the same amount you increase the email field:
.et_bloom_popup_input .et_bloom_subscribe_name {width: 34%;
}
.et_bloom_popup_input et_bloom_subscribe_email {
width: 34%;
}
Thanks Michelle!
I love your blog and everything you do is super amazing, keep up the great work!
Thank you Callum
Love it Michelle – thank you, I use this a lot! Can you tell me, how can I center align the form?
Do you have a link please Melissa
Hey Michelle!
Just recently joined your FB group and so grateful for this tutorial. So I tried it on a client site but used the Convertkit html code since Bloom and Convertkit aren’t talking to each other yet. It came out kinda wonky and funky. Any suggestions or modifications to use this with Convertkit?
Thanks so much!
Chrissy glad you are enjoying the group
Yes this will only work with ESPs that are supported by Bloom. Each ESP will construct their HTML forms differently so its impossible for me to provide code in the tutorial for HTML forms I am afraid
Michelle, great work up….I installed it and it works great. My only issue is it made the opt-in go full width on desktop…how would I set custom width for this?
Just change the row setting back to standard width and put the background colour in the row rather than the section Ray
Hi Michelle, Thank you for the tutorial. It is great! I have used this with the ‘locked content’ optin and the sign up works perfectly. I know I could buy a redirect plugin to get around this but my question is: Is there a way to center the ‘content’ that is shown after one signs up successfully? I have the locked content as a link to download a map but I can not get the link to center align. Since a picture is worth a thousand words you can see what I am talking about at http://www.placencianow.com You will have… Read more »
I am just seeing a coming soon page David? Realise I am late to answer :/
Thanks, Michelle, for the extremely well-described instructions for the slim optin. Surprising Divi doesn’t include that in their optin modules. I even got a little thumbnail to show in the narrow space. (Simply add media image to left of text in text editor where you show us to insert our desired text. Have a look here: https://comfortcoachproducts.com/ I had to duplicate the section and modify for mobile, selecting “do not show on desktop/do not show on tablet/do not show on phone” accordingly in each section version. (Don’t you wish section and row labels would appear like module labels?) My absolute… Read more »
Chaz if you right click on the row/section and select rename, you can name them, but they only show when they are collapsed
Glad you are enjoying the blog, thanks!
Hi Michelle!
Great tutorial. Unfortunately I cannotk keep the success message window from popping up after submission.
It can be seen here : http://dig.ma/2lMVEhI
No that is a feature of Bloom, if you didn’t want it you would need to hide it with CSS but I wouldn’t advise or how will the user know their submission was successful
Thanks for the tutorial! It looks great on my site. However, when I submit my contact info, the success message text glitches out and increases the height of my opt in bar. It also removes the fields. Any ideas?
The removal of the fields is native to Bloom. With regards to the height, you can adjust this with CSS for the success message class
Hi Michelle
Should that works with html content? I need slim form and transparent background but can’t setup it on Divi 1.3.10 and Bloom 1.1.8.
Form is smaller but not slim with no transparency.
No it won’t Miljac, HTML forms vary by ESP so its impossible to provide instructions for that I’m afraid
Hey Michelle!
Thanks so much for providing such an awesome tutorial! I created a newsletter sign-up form on my client’s site and it was working fine until I saw that the form elements in the second column suddenly truncated. I’ve disabled it from the live page it was on and duplicated it on a test page so that you could see it:
Any thoughts on what happened? I’ve scoured the inspector and tried multiple things, but not finding the solution. Hoping your expertise will spot the error!
Thank you!
I am seeing a 404 on that page Lilly?
Great Tutorial Michelle, thanks … I’m having trouble working out the padding for the above and below spacing to make it uniform http://rainbowgetaway.com.au/newsite2016/
You only need padding at the top Leisa, just keep increasing/decreasing the top padding until it is where you want it
Hello Michelle
I found your post very instructive and almost managed to create a perfect form… I just have a small problem… Choosing the black background both on the optin form and on the selection in the rows made my name and email look dark and don’t see each other anymore…
The page I am working on is http://andreirebegea.com/home-page/
Can you help me resolve this problem?
Andrei, if you add !important to the colour value to this CSS selector chain it should fix it for you
.et_bloom .et_bloom_form_container .et_bloom_form_content input
It can be fairly difficult sometimes to override Bloom’s default CSS so unfortunately we have to use !important sometimes
Wow, really helpful! Thanks for commenting the individual bits, it made it really easy for me to just snip out the bit that wasn’t working for the look I wanted. I would post it, but it’s on a dev site right now. Perfect solution, though!
Glad it helped Andrea
Hi! Thanks for this recipe! Super helpful!
Quick question: Why is the checkmark for successful submissions disabled?
Just to keep the bar slim, it expands the bar when it appears so it is just a design choice, you can remove that bit of CSS if you want
Hi Michelle, great tutorial. I was wondering, would you be able to suggest how the same result could be accomplished without divi, just bloom? For example, making and widget or fly-in optin formatted just as you’ve made this one? I’m thinking along the lines of a replacement for hellobar, that same slim style at the top, fixed position (a fly-in optin by default would be fixed, or with a widget optin using a fixed widget plugin). It should be possible with the correct CSS in the custom CSS of the optin right?
The Divi layout injector plugin can manage this for you, you can find it on Elegant Marketplace
Hello Michelle,
I really love your tutorials and this one was working well for me. But somehow my text and the form fields and button are no longer aligned. The text is higher. Do you know this problem and how to fix it? Also, your sign up seems to be much slimmer than mine. It’s on my home page. Thank you!
Jenny
Jenny it looks fine to me, assuming you got it fixed?
Hello ! Tks for the Soup
But, i have a problem. The name an email fields doesn’t appear in chrome and on mobile. In firefox, it’s ok. Any issue ?
Ben you will need to set up your mailing list within bloom before the fields will show
Hi, this looks like a great recipe and I followed it faithfully up until the ‘add the code to your child style.css file’. As I’m a newbie, I’m not sure where this is. I am using cpanel and my child theme is Divi_Children_2.0.9. The only .css file I can find that fits the bill is admin_styles.css. Is this the right place to add the code? If so, where in the file do I insert it, as it already has lots of code? Or should I create a new file called style.css and put the code there? Many thanks for doing… Read more »
Lisa you can also add it into the Custom CSS box in Divi Theme options, probably a better solution in your case
Hola
After playing and tweaking the css settings, I’ve finally got the result. Success message no longer expands the row height.
Here is what I’ve added.
.slim-optin-form .et_bloom_form_container h2.et_bloom_error_message,h2.et_bloom_success_message{border-radius:0 !important; margin:10px 0 !important}
Added the margin:10px 0 !important
Hola.
I’ve got Bloom 1.1.8 and the latest Divi.
The row expands after clicking the submit button and the success message is displayed slightly lower.
Any ideas?
Can you provide a link so I can take a look please
Is there a way to change the font of the submit button?
Edit this should do it Julie
.et_bloom .et_bloom_optin form button span {
font-family: “Lato”, Helvetica, Arial, Lucida, sans-serif;
}
Hmm… I tried it first in my Child Theme and when that didn’t work, I put it into the Divi>Options>CSS, and it still didn’t work.
Are you certain you have given the modules the correct custom classes Julie?
This was fantastic, but I only got half right!!
How do I check the theme … the form itself doesn’t show up. Looks like I did not correctly connect the optin form.
You need to set the ESP, account and list for the form withing Bloom before the fields will show so check that is connected correctly Janelle
Awesome and easy to follow tutorial. It works as promised with no issues. Thanks.
Glad to help Jermaine
Hi, Michelle,
Thank for your tutorials. Some of your tips it’s work but some of them is not working. How to setup the height of email, name field and subscribe button? Furthermore, why my optin can’t be full width? Thank you
The heights of those fields will be determined by your font sizes and padding Vicky
This is great thank you so much!
Welcome Alix
What would the css be to remove the form background color. I need transparency.
You would need to set transparency in the section background and then use the following, changing 1 to the ID of your form
.et_bloom .et_bloom_optin_1 .et_bloom_form_content {
background: transparent !important;
}
I have installed this successfully onto my site at poolersports.com but it does not show the text field inside the box so people know what to input. They are white boxes.
You have the form field placeholders set to white Rodney, if I change the background to black I can see the text
Hi, thanks for the post. But the “Disable double opt-in” checkbox like in your image above
) doesn’t show up in my form settings 
).
Can it be a version issue? Mine is 1.04.
Thanks again for your help!
It could be Renato, you should update to the latest version to be sure. I could also mean your ESP doesn’t allow you to have that option
Thank you so much for this <3
Welcome Michele
Hi Michelle! Is there a way to replicate something similar in a footer widget?
As in a fullwidth slim form Julie? in theory yes, you can use the Bloom widget and then adjust the CSS of the widget area so it goes fullwidth or match the background colour to that of the widget area so it looks fullwidth
I walked through the steps and I see the bar on the bottom of the page but it’s just a bar… there’s nothing there.
http://vibingup.com
OK, Looks as if my theme didn’t save the optin form… so now I matching each step in your tutorial other than the subscribe box background color.
I cut and paste the css code into both the Divi theme and the child theme and as you can see… I have copy on the top of the form and the text areas are small. I doesn’t look anything like your example.
Never mind. I removed it completely. It messed up the navigation bar and everything. I had big hopes it would work but this must be too old of a tutorial and not be working with the current theme.
It works perfectly with the current Divi version Laurie, I am using it on my own sites as are many of my readers. Are you sure you are giving your modules the custom classes? Also you must only put the CSS in one place, not both.
Hi Laurie, I didn’t see anything on the site you posted, but you do need to make sure you set up your ISP correctly in Divi Theme Options and/or Bloom or the fields won’t show
Thank you very much for this tutorial. It works great.
Welcome Andrej
Great i really need this, im wondering why i do not have the same module setings same as you?
why can this be?
im making this on luiseduardoalfaro.com
This tutorial is 6 months old Eduardo and Divi moved a few things around since then
Thanks Michelle,you have a great site and all is good quality, keep up the good work.
Greetings from Spain
Thank you Eduardo
Thanks for this really cool recipe! I’m in the process of building a website (it’s far from done), but I liked this recipe and implemented it last week. It work like a charm but now, with the Bloom 1.1.7 update that I just installed a little while ago, my slim opt-in was no longer slim. After snooping around in the Inspect function in Google Chrome, I discovered that changing this: .et_bloom .et_bloom_inline_form { clear: both; margin: 30px 0; display: inline-block; } To this: .et_bloom .et_bloom_inline_form { clear: both; margin: 10px 0; display: inline-block; } …made it slim again. The problem… Read more »
Hey Ron, just copy and paste that section into your child theme stylesheet and add an important to it and all should be fine when it updates
OK, thanks!
Hi Michelle, Is there a way to expand this into a lead capture that in addition to name and email, it collects phone and a selection from a drop down list? Upon submit, an email would be sent to a designated email address similar to a contact form, but in this case there would be no large memo/message field. It sounds like it would be fairly simple, but I can’t seem to make the Divi contact form module appear on a single line or the opt in module add fields. Like this example, but styled differently. http://canalsidecolumbia.com What do you… Read more »
Hi Sandy
Short answer is no, at least not with Bloom or the Divi contact or optin modules. I did however recently do this with Caldera forms free version for a very similar business to that which you provided in the link so that would be the way to go I think.
Woohoo! It worked like a charm. Finally something sweet and slim without having to try yet another product. Thanks Michelle for the awesome tutorial.
Welcome Anna
Nice one Michelle.
Thanks John
Thanks again for this great tutorial . There is a small problem that has started coming up. When the user enters the email etc and subscribes, the successful message comes a little lower and stretches the bar. You can see this problem here : http://brandfromwithin.com
Was wondering how to get around this problem ..
Hi Puru
I can’t replicate your issue, my version doessn’t add this extra space when the success message shows.
Check you have this css included:
.et_bloom h2.et_bloom_success_message.et_bloom_animate_message { margin-top: 0px; } .et_bloom .et_bloom_success_container.et_bloom_animate_success span.et_bloom_success_checkmark { display: none; }Hi there! Thanks for the tutorial. For some reason this came up wider(not slim) and not quite in line with the sign up form. I thought I followed you tutorial as you stated. Is there something I am missing?
Hey Tanya
I couldn’t say what may have gone wrong without a link (you’ll need to email it to me) but my first guess would be you missed a step somewhere, go back through and check you followed every step
Thanks so much! This looks great – looking forward to checking out the rest of your site to see what other gems are here…
Thanks Jon
This is exactly what I was looking for
thank you so much! I still had to tweak some elements in the Bloom custom CSS (for my own tastes LOLz) but I’m very happy with how it turned out on my personal blog site 
I cannot wait to put this on my biz site! YAY!
Glad it was useful for you Gypsy
Thank you for this fabulous tutorial! Just what I needed!
Pleasure Jeanine
Problem solved! I checked in Chrome on another computer. So the glitch was Chrome on my computer. I probably need to clear the cache. Thanks so much. You’re a gem!
Glad you got it sorted Des
You might want to delete my previous two comments about the test site . I found that I had not saved the form properly, which is why the fields were not showing up. Now I have the various elements, but slimline it is not. Too much padding. I’ll keep rechecking but if you can give me a clue about what might be wrong I will be very grateful.
Hi Des, I am assuming you got this fixed? I see it on desktop and mobile and it looks just fine
Michelle
Many thanks for checking. The weekend disappeared without my getting back to the job!
I have the elements there but it is not slimline on the desktop although as you say it looks fine on the mobile. I’ve customised the elements for top and bottom padding at 0px but it is still a rather pudgy section and I’m trying to figure out a vertical size reduction process. I’m about to have another look at it.
Michelle
Just checked at it’s fine on the desktop in Firefox. Not so, yet, in Chrome.
Seems I might have missed a step. The form came up on the desktop, not perfectly but seemed manageable (too much padding) but when I tested on my mobile phone the whole site had lost its responsiveness. I’m wondering what I’ve missed.
I rechecked and found I had missed a step or two. Now I have the slimline strip in the page and it comes up fine on the mobile, but the fields for the form have disappeared.
It worked!! yay! Thank you so much!! Love it
Pleasure Jenny, I’m happy it was helpful to you
Thank you very much! I had bookmarked this page sometime back in anticipation of some day trying this out on a website. That day came today and it worked perfectly. Thank again!
Thanks Mike
Great tutorial. Thanks for taking time to create it. I just used it to put an optin form up on a client’s site.
Pleasure Jon, thanks
This was great, thanks so much!
You are most welcome Ann
Thank you so much! Can’t wait to try it out!
Perfect!
Thanks Amanda
Thanks Michelle, looking forward to more from you
Thank you Sarah