Affiliate Disclaimer
Please note, some links contain affiliate links. Â All this means is that I may receive a commission of the sale if you click on a link and purchase. Â These are all my own opinions - money will not sway me!
Tools Used:
- Bloom – Elegant Theme’s awesome email opt-in plugin!
- MailChimp – The email provider I currently use for this blog. (Free up to 2,000 subscribers, and now automation is added to free accounts!)
- Camera Used in Video (Canon M6) – In this video, I used the Canon M6 to record myself!
- Microphone (Zoom H4N) – This is what I used to record my voice – a super handy tool if you do any video or audio stuff!
- Elegant Themes – They have been an awesome addition to my toolbox, saving time and making things look pretty!
So here’s my quick story:
I recently purchased Elegant Themes, and I’m really impressed with it!
But here’s my dilemma. Since I use MailChimp as my email provider on this blog, I eventually want to start grouping my subscribers to build better relationships and send targeted emails which benefit my subscribers.
Well.. Bloom currently doesn’t support MailChimp groups!
I was appalled!
For the time being, you have to create separate lists which means extra money (duplicate subscribers), and it’s much harder to manage!
But don’t worry! I found a workaround which allows us to use MailChimp groups with Bloom.
Separate Lists or MailChimp Groups with Bloom
(The images + steps are below if you want to cut to the chase.)
I first want to cover why groups are preferred over separate lists.
Separate lists make us have duplicate subscribers and make it hard to see a subscriber’s activity like what emails they’ve received, any purchases made, etc.
We’d have to keep looking across both lists (as well as pay for them twice if they’ve signed up to both.)
Groups offer everything we want to achieve.
We can use only one list to group subscribers while totally tracking a subscriber’s activity!
No more paying for duplicate subscribers, and it’s WAY easier to maintain.
In my example in the video:
I currently have two groups on itsGratuiTous.com – a Crash Course group, and an FL Studio Beginners group.
It’s important I send my subscribers emails according to their particular category. I don’t want to be sending beginner beatmakers advanced topics, right!?
How to Set Up Bloom with MailChimp Groups
If you can’t watch the video right now, here’s a step-by-step guide to set up Bloom with MailChimp groups.
The most important part is using a Custom HTML Form inside of Bloom, as well make the input field checked and hidden for your group!
Ready?
Let’s get into it!:
Step One
First sign into MailChimp, and select Lists.
Step Two:
Choose the List you’re wanting to work with!
Step Three:
Create a Group if you haven’t dont so already!
Step Four:
Click Signup Forms
Step Five:
Select General forms
Step Six:
You want to make your group visible.
Click on the group on the actual visual builder, then on the right column you will see a radio button for Visible and hidden.
After selecting Visible, make sure to save!
Step Seven:
Next, go back to Signup forms, and select Embedded forms
Step Eight:
On the Embedded Forms:
Select the Naked form (no mailchimp styling.)
Deselect ‘Include form title’, ‘Show required field indicators’, and ‘show format options’
Make sure Show interest group fields is selected!
I also select Show only required fields
Step Nine:
Now it’s time to go to Bloom, and select New Optin.
Step Ten:
You will select Custom HTML Form, which is at the very bottom of the list in Bloom. (You will not be using a provider!)
Also, paste the embed code in the Insert HTML section.
Step Eleven:
In this image, I have put the first name field first, then email.
(Just something I like to do.)
Also on the input fields, I have added the placeholder=”First Name”, and placeholder=”Email” to the respective inputs.
This will make for a much cleaner look.. Especially since I removed the labels – this lets the subscriber know what to fill in!
Step Twelve:
First decide what group you want the subscriber to join, that’s the list item we will keep! I remove everything except the input field of the group I’m wanting. I remove the blue highlighted text in the image, as well as the opening <div><strong><ul> and <li>.
Lol – sorry if this image is confusing.
Just make sure to keep the <input> that is for your group. 🙂
Step Thirteen:
This image may be hard to read, but here’s what you do.
In the input field of your group, you will add:
checked hidden style=”display:none;”
This will make the input checked and hide it from a potential subscriber. This way they can’t unclick the checkbox, and when they sign-up, you’ve made them join the you want group so you can target them specifically!
Step Fourteen:
And that’s a wrap!
If someone fills out this form, they should be added to the group you’ve wanted them to join 🙂
And that’s how you use MailChimp Groups with Bloom
So hopefully those details + images help you on your way.
If not, be sure to watch the video!
And if that doesn’t work, then you be sure to leave a comment and I’ll get back to you 🙂
Hopefully Elegant Themes follow through with this promise and just releases an update to Bloom which includes MailChimp groups!
If you wanna follow my blog, you can just join here!
Hi Riley this articule its awesome ! Have you tried this with MailerLite?
Hi Cristina! – Thanks!
I have not! – I’ve only used MailChimp so far for email providers.. hoping to try ConvertKit on my electrician blog!
Hi Riley,
Thank you so much for this. I followed your steps and everything seems to be working OK in the Bloom Preview. However, when I look at the opt-in in an actual page the Subscribe button does not appear. So, everything is there in the Preview, but the submit button is missing in real use. In your video you never show the opt-in on an actual page. I assume you tried it and it worked for you there?
Hi Gabriel, sorry for the delayed response!
Yes, everything works fine on my end..
Maybe check one of the css classes within the button itself from the MailChimp embed code?
Not tried it yet. Looks good but does this mean a subscriber will need to sign up more than once to be allocated to multiple groups. Ie if they are interested in any of the categories within the blog rather than just one? Also can this be used as a popup? I would like to allow readers to read a post, receive a popup at the end with options to select which categories interest them. Is this possible in bloom?
Hey Nikki!
Currently, MailChimp is a bit cumbersome with all of this I’ve found.
But yes, a subscriber will have to sign-up each time they want to join a group.
(Sometimes it brings me to an error page, which is the actual MailChimp newsletter sign-up page, and tells the subscriber to ‘click here to update preferences’ or something similar..)
And yes, you can do this for any of the options Bloom provides – inline, popup, etc.
Currently just set this up for a Piano for Beatmakers course I’m doing. (You’ll see the take me up on my offer button under the video.)
Hi,
I don’t see the video…what am I missing? And I’m having trouble figuring out exactly what to delete in step 12. Do you mean the whole form except that, or just what you have in the screen shot?
Thanks!
Hi Kirstin, I updated the site now.. and it seems the video is back. (Up top!)
Try watching the video and if you’re still stuck, I’ll try to help out!
Hi Riley, why use Bloom if MailChimp can do the opt-in etc? What does Bloom do what MailChimp can’t do?
Hi Alice – I guess because Bloom has a pretty cool plugin that shows your stats + other variations of a newsletter you can use. Such as the slide-in or shortcodes to embed into your posts.
Thanks for this tutorial! Worked great. Do you have any idea how to change the colour of the submit button?
Hi Carolina – You’d have to change the background color to the button with CSS, I believe!
You can either add your own class or just overwrite the current CSS class.
I browsed your site and saw the pop-up, here’s what I figured out:
.et_bloom .et_bloom_optin_9 .et_bloom_form_content button {
background-color: blue!important;
}
You can just copy that into your CSS section here in the backend of WordPress!
Thank you! I’m going to try it out!
Hey there Riley! Appreciate the video explanation. What would you recommend in terms of submission? I followed all of the steps but the entire form disappears after someone enters their email and clicks submit. Is that normal?
Hi guys,
There is another way to do that. Groups in MC are nothing but custom fields. You can add a “group” custom field on your bloom optin forms and that will do the trick.
From experience, I found that if you set the group as a CHECKBOX, you will have the option to automatically check any of the sub-groups in bloom and all you have to do is to put a custom CSS on the page (if you are inserting an optin directly on the page) or on the optin form (if using bloom itself) to hide the title and checkbox(es). Something like this:
.et_pb_contact_field.et_pb_signup_custom_field.et_pb_signup_custom_field_0 { display: none; }
I hope that helps.
Thanks for the tutorial! Works like a charm!
One question – do you know how to customize the success message after people opt in?
The default html I get is:
Thank you for subscribing!
but this ID doesn’t show up in the embedded form code. It’s part of the ‘page’ that comes up after the form is submitted.
Thanks for any input you may have on solving this.
Riley you’re awesome! I’ve been trying to work out how to get the groups to work with Bloom and came across your article. A total life saver!! Thank you!!
Right on, Erin!
Go get those subscribers! 😉
Thank you SO much! I am not a coder (at all!) but I make my own websites and handle all my own email lists and such, and this was such an amazing brilliant help. I am so grateful you took the time to figure this out and then share it. Gratitude your way, my friend!
Hi Riley,
This is awesome! Can You help me on how to make the name (field) and email (field) to put them in one row? Just to make them like a horizontal form.
BTW, bloom already added the feature where you can add a custom field and you can choose groups. But my problem is, they are now allowed to be hidden. I need to add some CSS modification. But I don’t know how. Pls help me.
Hey Diana,
I think you’ll want to make the input fields style=”display:block;” – That will help them be on their own line.
In regards to your groups, as mentioned with Nick, I think the feature they added is when the form is inline? – I haven’t been able to see it on the actual pop-up itself.
But you’ll have to see within your console if they’re hidden, then use CSS to make them visible, again! (They may be either hidden within the HTML, or display:none?).
Hi Riley,
Great work. There is now a much easier way to put people into MailChimp interest groups…
Groups are now listed a Custom Fields that can be added directly to a Bloom OptIn. It’s possible to set the custom field interest group you want to ‘Checked’ and then hide the field using CSS so the visitor cannot change it. Simple.
The benefit of using this is far less work and you can use the built in styling of Bloom.
Hope this helps.
Kind regards, Nick
Hey thanks for the info Nick.
I’ve discovered this too, but only when actually putting a form that is inline within the content itself.
When dealing with pop-ups or widgets, I believe this is still an issue which needs to be added by Elegant Themes to make it simple for us users!
Hi RIley, just spent all day fussing with this, thanks for your guidance. I got it working on an inline form with the group, but are you saying it doesn’t work with the pop-ups or widgets? Is there code we can add? Have you got examples of this? Thanks, Ben
What is the css you use to hide the custom field?
This was the CSS that worked for me in the pop-ups, widgets and inline Bloom forms to remove the visible elements.
.et_bloom_optin_6 .et_bloom_custom_field {display: none;}
.et_bloom_optin_6 p.et_bloom_subscribe_email {flex-basis: 100%;}
You just change the number 6 to the number that shows up for you.