Show An Optin Using Bloom When A Button Is Clicked (In Any Theme)

I recently started using Bloom lead generation plugin developed by Elegant Themes, and I wanted to show my users a popup optin form as soon as someone clicks on a button anywhere on my blog.

After a couple of hours of hit and trial, I finally made it, and you can see the popup in action live by either clicking the button below or on the homepage.

triggered Bloom popup

I search the internet, and none of the articles were accurate and to the point, like its all written for developers. So, I thought to make a tutorial on this that’s easy to understand and quite beginner-friendly. Following this tutorial, you can easily display any popup you make using the Bloom plugin when a button is clicked anywhere throughout your WordPress blog with any theme.

Most of the posts online will tell you to install Divi builder for this one simple task. However, through this post, you’ll learn that this is possible with virtually any WordPress theme you have,  you don’t even need to have a page builder plugin. Seriously.

Let’s start by creating a popup optin form (if you already have a popup optin form, click on the select trigger section)

Step 1. Create an Optin Form (Popup Type)

Firstly, go to your Bloom dashboard and click on new optin button.

Then select the popup type from the optin type menu. You can also select the fly-in type as it supports the button trigger.

Now give a name and connect your optin form with an email marketing service by clicking on email accounts settings. Click next and select a template for your optin form. Once you choose a template, start designing your form by adding images, content upgrade, lead magnets, and information about your newsteller.

Click on the next “display settings” button.

That was the designing step. Now move to the next step.

Step 2. Select The Trigger “On-Click”

In the “Load-in” settings, uncheck every other trigger option and select trigger “on click.” When you select the on-click trigger, a new field will appear named “CSS Selector (string).”

In the CSS Selector string field type:

a#popup

Scroll down to “display on” settings, and select the everything option. By doing this, your popup will appear everywhere when the trigger button is clicked no matter if it is in a post, page or in a sidebar or in a different category.

Remember to uncheck every other trigger and make sure the time delay trigger is also unchecked.

That’s it for the trigger step. Click save and exit button and move to the third step.

Step 3. Use This Code To Display A Button Anywhere

Now edit any of your post or page where you want to show the button. Open the text editor and not the visual editor. In the text  editor, copy and paste this code:

<a id="popup" class="button" href="#" rel="nofollow"> My Optin Form </a>

*You may change the highlighted text with your original call to action. 

If you want to show the button in your sidebar, go to WordPress widget menu and add a new text widget in the sidebar. Copy/Paste the same code in the widgets text editor.

That’s it.

Preview the post or page. Your button should be there like this:

Depending on your theme and its style sheet, the button will change automatically whenever you change your theme or your plugin. It’s totally independent of any external CSS and will never get lost.

Also, note that this same process can be implemented in any optin form plugin which supports CSS Class string. Bloom has an excellent interface and set of optin templates; that’s why I use it. Rest of the process remains the same.

I shared this with you to help you save your time because I wasted more than 5 hours figuring how to do this,  I hope this tutorial has helped you.

So, it was that easy to create a button and set your popup to appear when its clicked anytime, anywhere. Share this post and let me know your experience in the comments section below.