How To Create A ‘Click Trigger’ For The Bloom Plugin By Elegant Themes (Updated 9-12-18)

** Code Updated on 9-4-2018 **

 

Bloom is a brilliantly designed and well coded email opt-in plugin from the smart folks over at Elegant Themes. Chances are if you are a Divi or Extra Theme user, you have either utilized this plugin, or have at least heard quite a bit about it. So revolutionary and unique is the design in-fact, that the landing page behemoth, LeadPages, took it upon themselves to fork the plugin, causing quite a bit of controversy amongst the WordPress community.

So what does Bloom do exactly?

According to Elegant Themes, “Bloom is the ultimate email opt-in plugin for WordPress. With Bloom, you can easily add opt-in forms to your website and harness complete control over the design and location of each.” So, in a nutshell, Bloom allows you to create custom email opt-in forms on your website, so people can subscribe to your newsletter. The Bloom opt-in form can be implemented into your website using several methods including: Time (in seconds), percentage of scroll down the page, inline (static) and… You guessed it, with a Click Trigger.

What is a Click Trigger?

The Click Trigger method of using Bloom entails creating a button, link or some other form of call to action (CTA). When the CTA is clicked the opt-in form will then appear and the user can enter their email address and other requested information. This helps keep your web page nice and tidy and is generally considered less invasive to people viewing your site.

Step 1. Build The Subscription Section

There are a number of ways to create the section users will click to subscribe to your email. In this tutorial I have opted to use the combination of a Text Module and Button Module. I will not cover every aspect of how I designed the section, as there are many different methods to do so, but instead detail out the necessary steps to enable the Bloom click trigger.

Create a 2/3, 1/3rd column and insert a text module and a button module as seen below:

Setup the Button Module

I am not going to dive into the design specifics, but most importantly here is that you give your button a URL/ID as seen below. In this example we have used the URL/ID ‘a#clicktrigger‘. We will use this same CSS ID in a few other locations as well. Also give your button some text so it appears… we have added ‘Subscribe Now‘, but use whatever fits your needs.

Give the Button Module a CSS ID

Within the same Button Module, navigate to the Custom CSS tab. In the field marked CSS ID, add ‘clicktrigger‘ and then Save and Exit.

Step 2. Setup The Bloom Plugin

By this stage I am assuming that you have already installed and styled your Bloom Opt-In plugin to look all nice and pretty. I will now go over the necessary steps for the click trigger…

After you have gone through the initial steps of Setup and Design, you will then end up in the Display Settings. From there you want to make sure you tick the box marked ‘Trigger On Click‘. After that, head down to the the field marked, ‘CSS Selector (string)‘. Here you will add the same CSS ID used in the button module URL and Custom ID field, but make sure you precede it with an ‘a‘, so that it looks like this: a#click-trigger. Make sure that your settings look like the screenshot below and then press Save & Exit.

Time to checkout the result

Now that everything has been setup properly, head back to the call-to-action section you created, press ‘subscribe’, and take a look. Pretty cool!

Cory Jenkins

I am a an Avid WordPress User/Developer/Blogger and Co-Founder of Aspen Grove Studios. When I am not designing awesome stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors.

Previous post
Next post

76 Comments

  1. Sheila Hoffman

    This is great Cory. Thanks. How will this be on mobile?

    Reply
    • Cory Jenkins

      Hi Sheila, you’re welcome! This works great on mobile… I will try and add a working version to this blog post when I get a chance and will notify you in the comments 🙂

  2. Hope Kiah

    Thanks, Cory. Does this function well on all popular mobile devices?

    Reply
    • Cory Jenkins

      Hello Hope. Yes this functions well across all devices… if there are any responsive issues they would be native to the plugin itself and not necessarily this click trigger method. I hope it works well for you!

  3. Janice Cumberlidge

    Great post thanks, glad it’s so easy to follow but I think they’re missing a trick not including this as standard. Maybe they will one day.

    Reply
  4. john paul

    Great tutorial. Is there anyway we can do a similar trick with Monarch? I would love to be able to add a simple ‘Share’ Button, that brings in the Share fly-in

    Reply
  5. Glen Hoddinott

    Great post Cory, I was curious as to whether or not you know how to make this work with the buttons in the fullwidth header module?

    Reply
    • AJ James

      I would like to know this as well.

  6. lukoslauraLaura

    Can we do this with an image instead of a button?

    Reply
    • Cory Jenkins

      In theory it should work, but we have not tried it ourselves. We are currently very busy and not sure when we can test this, but if you are successful, please let us know 🙂

    • Cathy

      Hi there

      Did you ever work out how to do this with an image?

    • Alian

      i also thought it will work.. but it doesn’t, i need help to get it work 😀

  7. Tami Heaton

    Just used this on a webinar opt-in – thanks, Cory!

    Reply
    • Cory Jenkins

      Awesome… glad it helped you out!

  8. marcellagerwerf

    Exactly what I was looking for! Will try to get this working on my site soon. Thanks Cory!

    Reply
    • Cory Jenkins

      Happy we could be of assistance, and let us know how it goes!

    • marcellagerwerf

      Just implemented it. When I click on the button the form is opened in a pop-up. But after a few seconds it disappears again. Any thoughts how to fix that?

  9. Emily

    This is a good trick. Thank you

    Reply
  10. Sarah

    Great tutorial guys, super helpful!

    Reply
  11. kingmartinus3141

    Hello there.

    The bloom widget you have on your top left with the icon on top. Is that custom css you using? I mean how do you get you icon on top like that?

    Reply
  12. skyasmith21

    Hi, how can you trigger a menu item to do this? I can’t find out how to add a css-id to a menu item.

    Reply
    • Cory Jenkins

      Hello,

      You can add a CSS ID to a menu item like this: From the Menu dashboard, click on “Screen Options” in the top-right of the screen and then tick the box “CSS Classes”. Hit “Save Menu” and now when you open up a menu item you will see the option “CSS Classes (optional)”

  13. Jaime Buckley

    Cory, you ROCK!

    JUST what I needed, when I needed it. Starting my very first email list after writing for 12 years.

    (Keep the shocked looks to a minimum…)

    Reply
    • Cory Jenkins

      Happy to help Jaime and best of luck with growing your list!

  14. Gemma

    Hi Cory,

    Thank you for this post! It works really well with CTA.

    I have one question though, is it possible to create multiple on one page. If so, how would it work?

    I want to create 5 CTA boxes on one page with a different pop up optin for each.

    Many Thanks

    Reply
    • Cory Jenkins

      Hi Gemma,

      For this you would want to create multiple popups in Bloom, each with unique CSS IDs (#clicktrigger1, #clicktrigger2, #clicktrigger3 for example). Hope this helps and please let us know the result!

    • Gemma

      Hey Cory,

      I knew it would be that but as I am not very clued up on CSS and it wasn’t working I thought I did it wrong. It seems like the CTA module button doesn’t work when you start adding more than one to the page. I have just recreated them all using text boxes and buttons and it looks amazing 🙂

      Thank you for your help!

  15. Kat Tan

    Hi Cory, this was such good news when I found this tutorial but unfortunately it’s not working for me. I tried it for the Sign Up button here https://holistickitchenacademy.com/ and no go..

    Reply
    • Kat Tan

      Sorry it works now — my bad! Thanks again for this!

    • Cory Jenkins

      Glad to hear it’s working for you!

  16. easymarketway

    Hey Cory,

    I used this great tutorial on a site and it worked great, now I have added ssl to the site and updated to the new divi, but it is not working anymore…

    Do you know what have changed??

    Reply
    • Cory Jenkins

      Sorry, don’t have much insight into this at the moment but will look into it when I get a chance. I can’t think of a reason SSL would have any effect on this

  17. Wildher Wilches

    Cory Thanks a lot for this info. You save buy optimizepress ….hahaha

    Reply
  18. Ben Simon

    Thank. I just wanted to point out mine didn’t work straight away. I found out that in the ‘Display On’ section on the ‘Display Settings’ page was set to ‘post’. I ticked show on ‘everything’ and it worked.

    There’s no mention of this in the article and I spent a while trouble shooting it thinking it was the ‘-‘ being the issue eg in some cases you talk about :

    URL/ID ‘#clicktrigger‘. (notice there is no ‘-‘ in this)
    CSS ID, ‘click-trigger‘
    a#click-trigger. (this seems to be an amalgamation of the above 2)

    This confused me and I spent a while trying to figure out whether you had made a mistake before realising the issue was on the bottom of the ‘Display Settings’ page which isn’t in your screen shot.

    Just so others don’t have the same issue.

    Cheers Ben

    Reply
    • Jennyfer

      I’m grateful for the tutorial, and for your clarification. I spent a week going through many… MANY tutorials on YT until I found this one. I was really frustrated until I read your comment. Thank you much to both!

  19. stephanie

    Love it! Will totally be using this!

    Reply
  20. Laura @ www.almostemptynest.net

    Thank you!! Mine did not work immediately either. I scrolled through the comments and found yours. Checked “everything” and it works!!! Thank you Ben for the troubleshooting comment and Cory for the tutorial. Totally awesome!!!!

    Reply
  21. thealexwiebe

    Great job!
    It works with mine as well. I’m just running into the issue that it doesn’t want to work with the full-width header. Settings all applied as stated in your post and comments above. Any ideas why it doesn’t work with the full-width header module?

    Reply
  22. Christian @ Prime Digital

    I really wish I had come to your comment sooner.. I had exactly the same problem and went through the same thought processes as you. Thanks for clarifying and to the author for a great post.

    Reply
  23. Christopher

    I am using woocommerce and the button does not allow an ID, only a class, is there a way around this so I can still use bloom for my optins? Also, is there a way to redirect bloom afterwards to a URL?

    Reply
    • Cory Jenkins

      Hi Christopher, this question may best be directed to ET support or a WooCommerce forum. Off the top of my head the best method would be to add a WC template file to your child theme and modify/add the class or ID there.

  24. Charlie Moritz

    Awesome! This helped me out a lot for a landing page for my ebook. Thanks for the hookup!

    Reply
  25. Christopher

    This doesn’t seem to be working for me, I did as I would for a button but called the style in the menu and I get a 404 error.

    Reply
  26. Maciej Ekstedt

    Great article! Thank you for sharing 🙂

    Reply
  27. Brad M

    Thanks a lot Ben! That really helped.

    Reply
  28. Lane

    Oh man – I went through this exact same sequence! Wish I had read your comment first!

    Reply
  29. Paolo Broccardo

    Thanks – extremely helpful and easy to follow!

    Reply
  30. waspdesign

    Has anyone got this working in a menu yet?

    Reply
  31. Devin

    Hi Cory,

    First, thanks for creating this tutorial!

    I’ve installed it a couple times before and it worked, but now on my latest project, it isn’t working.

    I’ve double-checked all the settings over and over – including selecting for the optin to display “everything” – but it doesn’t do anything upon click.

    URL = #clicktrigger
    CSS ID = click-trigger
    Bloom = Trigger on click, a#click-trigger
    Set to view display “everything”

    Is there anything else that might stop this from working? Trying to figure it out.

    Thanks!

    Reply
  32. Rashida Heard

    I got it to work for me. Instead of an a I used * (got it from another tutorial on this) so – *#click-trigger

    Reply
    • francesco

      IT WORKED!!! Thank you so much 🙂

    • Cory Jenkins

      Excellent, glad you found this helpful 🙂

  33. Justin Garner

    Love the step by step. I followed it exactly and did get it to work. I am working in an AVADA theme instead of DIVI. Although the setup is pretty similar with each theme having the same exact options available, it simply didn’t work for me.

    Reply
  34. Heidi Smith

    Thanks so much Devin – my heart sank when I clicked and it didn’t work. Ticked “Everything” and it works beautifully.

    Reply
  35. Heidi Smith

    Thank you Cory! Just what I was looking for.

    Reply
  36. Jennifer Muller

    this doesnt work for me. I tried putting a * instead of a an a but still doesnt do anything when I click on the button. http://www.vinoforgood.com. Trying to put on request access button

    Reply
  37. Alexander Adolfsson

    Double check this – it was a problem for me. That the opt in was activated. Go in where you see all opt-ins and press the activate check symbol. Then it started to work immediatly. 🙂

    Reply
  38. Jaybee

    Top Tip! 🙂

    Reply
  39. Brad Jeffery

    This was the trick for me thanks Rashida

    Reply
  40. Dave

    Great HowTo but none of the images are showing..?

    Reply
    • David Blackmon

      Thanks for pointing that out Dave, it has been corrected. We recently did a complete redesign so some things are a little out of whack and we are correcting as we go. Thanks for the help and your patience!

  41. Alian

    i need help to get this done with a image.
    i want to click on a image to get the bloom pop-up opt-in shown. i tried it this way in the picture, but it doesn’t work.
    hope someone can help me.

    Reply
  42. Donna

    Great tutorial. But it didn’t work for me either. I’ve tried the * vs ‘a’, I’ve made sure ‘everything’ is selected. I don’t see that it’s not already activated and still it doesn’t work. I’d appreciate any help I can get. http://www.lifeonpurpose.academy Thanks so much!

    Reply
    • David Blackmon

      Hi Donna we are super swamped with Black Friday and Cyber Monday but you may want to try the Divi Fcaebook groups to see if someone can help quicker. Thanks for reading the post!

    • Cory Jenkins

      Thanks Collins!

  43. Eugenie

    Hey Cory,
    What if you have different buttons on the same page. which have different opt in forms attached to them. They all pop up now if you click one button. What to do?

    Reply
    • Cory Jenkins

      Hello, you will have to create a unique ID for the other popups like clicktrigger2 for example

  44. Eugenie

    Thank you Cory. I tried that already and that indeed worked. Thanks a lot!!

    Reply
  45. Collins Agbonghama

    Excellent tutorial Cory. MailOptin is a great alternative to Bloom. Let me know if you want to try it out and I’ll gladly provide you it.

    Reply
  46. J

    Hi,
    Can I ask one thing?

    If person subscribe once and I don’t want him to subscribe again, How can I check this? because a lot of same people SUBSCRIBED AGAIN AND AGAIN.
    Thanks.. waiting for an answer
    J

    Reply
  47. kadyn

    Hi,

    I’m having an issue with this… when I click on my pop-up it only partially shows up (doesn’t allow you to scroll to actually enter in your info). When I exit out of the pop-up and click it again, it will allow me to scroll down on the pop-up and actually enter in the info.

    When you hit refresh or visit page again, it does this again and will only work correctly if you exit pop-up and click it again. I have tried on both safari and chrome and it does the same thing on both browsers.

    Has anyone else had this problem? How can I fix it?

    Thanks,

    Kadyn

    Reply
    • James

      I’m having a similar issue. When I preview in Bloom all is okay, but once loaded on the site it’s not fully loading. Its weird as I have set this up on a few sites now and all is okay.

      Gif Screen Shot of issue: https://cl.ly/1J3u1h0n172M

Submit a Comment

Your email address will not be published. Required fields are marked *


Receive notifications about our new blog posts.