jQuery to the Rescue!
Namaste!
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 enqueuing javascript in your functions.php
- 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!):
Okay, let’s walk through the most important parts in detail. First off, to use any kind of javascript in the code modules you have to wrap it in script tags as we see on lines 1 and 16. We are going to further wrap our code in some jQuery that tells the browser not to run our instructions until the DOM is ready and to allow us to use a ‘$’ instead of writing out jQuery (line 2 and closed out on line 15). 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.
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.
On the next line we actually inject the code into our Bloom form using ‘append()’. In this case, I use jQuery to target the email field and add our code directly afterwards. Finally, I am adding in a ‘click listener’ on our checkbox (lines 10-12). This basically says if the checkbox is clicked, check
if there is a class “hidden” and if there is remove it. However, if the class doesn’t exist, add it. This allows us to reveal or hide our submit button depending on whether the user has checked that they read our privacy policy (for example).
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.
.hidden {
visibility: hidden;
}
#tosCheckbox {
width: 5%;
margin: 0;
display: inline-block;
}
#tosCheckboxLabel {
width: 80%;
margin: 0;
display: inline-block;
}
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.
