jQuery to the Rescue!
An issue that has been of some contention in the Divi world is the lack of a privacy/terms-of-service checkbox in the ET Bloom plugin. This is essential users in many countries where it is the law that this is present. Today, I’m going to give you a quick tutorial on how you can accomplish this with some jQuery and custom styling. I’ve only tested this on a select number of possible Bloom templates, so fair warning, it might take more styling for it to work on the one you select. I will be releasing a plugin (free) to accomplish this for people shy about adding in code to their Divi pages. But in the meantime, let’s get to it!
To accomplish this quickly, I’m going to be using two code modules. The drawback to this method is that it will only be active on the pages where the code module is present. If you don’t already know how I encourage you to:
- learn about using a child theme style sheet.
Both of these topics are beyond this tutorial, but they will ensure that your script and styles will show up on all pages/posts. I’m assuming that you already have the Bloom plugin installed and an optin of your choice set-up. For this example we will set up a new post using Divi. Note: you don’t have to use the Divi theme/builder if you enqueue the jQuery I will be showing. Add whatever content you want to the post and then add a new section with two code modules.
In the first code module we will add our jQuery. Here is the full script (downloadable text file at the end, sorry!):
Now to the meat. On line 3, we check to see if there is actually a Bloom subscribe form on this page by testing for a class name that exists in all the forms, ‘et_bloom_subscribe_email’. Remember, proceed classes with a ‘.’ and ID’s with a ‘#’ when selecting in either CSS or jQuery. The way we do this is simply to ask if that element has a length. If it returns a length, rather than “null” than we run the next set of instructions.
First up, we are assuming that the checkbox is required. So, we hide the submit button so that it can’t be clicked by adding the class “hidden” (line 4). I’ll show you the styling we will add which will actually hide the button later in the tutorial. Next, we set a variable (var) called “myCheckbox” to a long string of HTML code (lines 5-8). Please note, you can assign big blocks of HTML to a variable and format it nicely on multiple lines by surrounding the code with backticks(`), not single quotes (‘). This code simply adds a checkbox plus a label. You can modify this to be as simple or complex as you would like. I have elected to assign the label an ID for simplicity of styling.
Okay, lastly we need our styling. Here I have added a minimum of styling as an example and you will likely need to modify this for your purposes.
This will be added into your second code module. Make sure to flank it with <style> </style>tags. I’m not going to go through this in detail except to point out the first bit of styling. The “.hidden” gives styling to the subscribe button once we add the class. It turns the visibility off, but preserves the space it would take up in the DOM. That way, when you turn the visibility back on you don’t get a re-flowing of elements.
That is all there is to it! As always, if you need something explained further, or need help with implementation, give me a shout-out in the comments or by email.