EU Checkbox Instructions
Namaste!
In this post, I want to give you a quick intro to my EU contact form plugin, which allows you to add a checkbox to the Divi contact module. This is important for sites in Europe where people submitting their personal data need to confirm that they have read your site’s policies on data sharing. My plugin will add a new module to your Divi toolbox.
The plugin is installed normally through the backend plugin manager. Once installed you can select the module for insertion into a section like you would any other Divi module. Once placed into your page, the module will largely resemble the native Divi contact for module, with one difference – there is an additional field type called a checkbox. So, as with any other form, you can add fields for Name, Email address, Message, and then your checkbox field.
Within the new field you select “Checkbox” for input type and fill the rest of the fields as you would like. Near the bottom of the field settings is a tinyMCE box. This is where you add the message you want to appear next to your check box. You can add full HTML markup into this box, allowing the addition of links to your TOS pages. It is important to note here, none of the settings on the “Advanced Design Settings” tab will impact the text you enter here. This is a limitation of Divi I wasn’t able to overcome. Any styling in the tinyMCE box however, will be carried to your final page. So for example, in the screen shot above, I’m adding emphasis to the initial word and linking the TOS to my site policy page.
One additional way to add styling to the label field in by giving it a unique class or ID through the “Custom CSS” tab of the field settings. While this module still requires some tweaking on the part of the designer, it allows for the quick introduction of a checkbox without having to onboard a large form plugin like Gravity forms or Caldera.
[button link=”http://springhilldesign.net/plugins” type=”icon” newwindow=”yes”] Click to get the plugin![/button]
Metta!!
Hello, I have managed to get your plugin to work a couple of times -t hen it has stopped on me! I reinstalled but sadly no joy. The other thing I noticed is where as with the standard Divi contact form module when a person types there name or email in the field the name showing automatically disappears, with your plugin I have to delete the name then type in my name from the beginning. Sorry pester you with this and than you in advance.
Andrew Nash
I’m using the latetest DiviVersion: 3.0.37
Hi Andrew,
Sorry to hear of your troubles. Without actually looking at your site it is a little hard to troubleshoot why it stops working. Do you mean that it will send a few emails and then stop working, or…?
Does the standard Divi contact form still keep working?
I’ll look into the labels not disappearing.
Cheers,
Bob
Hi Bob, thanks again for your useful plugin, is it possible, maybe in a future version, to empty the fields when you start typing?
Thanks!
Andrea
That is so odd! On my install it does empty the field. I will look into this and maybe release a new version this weekend.
Cheers!
Can you navigate to http://robertmeans.net/eu-test/ and see how that form behaves?
Hi Andrea,
The plugin “broke” with the newest Divi theme update. I’ll fix it and have a new version posted this weekend. Sorry I don’t have auto-updating supported, yet!
Hi Bob,
sorry for my very very (very!) late reply, I just downloaded the new version and works as expected.
Many thanks for your job!
Best,
Andrea
Could you check the download link, because its not working? 🙂
Wow! Thanks you very much and sorry about that, link at the top worked, but not the one at the bottom. That was odd! Hope it works out for you.
It works, thanks so much for such a fast response. I love it. 🙂
No problem.
Mr Means, it is a great idea, and an answer to a problem I had.
First I have to say that I’m working with the last version of DIVI and I am using the most recent Divi Contact Form Module, the one with more input control.
At first I thought that your plugin was an addon to the Contact form module, but in fact it seems to be a similar module based on the previous version of the official Contact Form Module. Am I right ?
If I am, is it possible to have the functionality built over the new Contact form module ?
If not, I have to keep searching for such a solution.
Great idea, thanks again!
Gaston
Hey Gaston,
I just recently updated this plugin module to the new contact form. I’ll get it posted today. Due to the way that they updated this module I wasn’t able to conditionally display the tinyMCE box for adding in the link HTML and I haven’t had time to add back in the styling, so it will require a little CSS to get it looking good.
Cheers,
Bob
Thanks Mr Means. I’m looking forward to use it
Do you happen to know if there is a way to insert some text between the field, and or to pre-fill a field with a by default text ?
Thanks,
Gaston
Hi,
I’m not quite sure what you mean. Can you point me to an example?
Just making a guess to the first point (inserting text between fields), You can use the CSS pseudo-class ‘:after’ along with content. So for example, if your first field in the form is name, and you want someone to fill in their user name, you could assign your form the CSS class “myForm” and then use:
.myForm .et_pb_exp_contact_field_0:after{
content: ‘Please enter your username.’;
}
As to the second, if you were making the form manually, you could just assign it a value. However, in Divi, no not really. I suppose you could use javascript to accomplish this. Maybe I should rewrite the Divi module to allow you to enter a custom value for each if desired.
I’m going to upload the new module now. The only caveat that I will add is that with all the Divi updates I can’t say that this will continue working long-term. I will likely have to update it again with future Divi versions.
Namaste!
Thanks for those information. I will try what you suggested. Tell me when the new module is uploaded.
Gaston
The new module is uploaded on the plugin page..
Mr Means
I had an idea (it happens from time to time).
Look at this URL (a form built with the new unmodified Contact form module):
http://monkeyislandfoundation.org/applicant-form/
Look at the “agreement” field, the last item.
The point is to use the check box type field and have the text of the agreement entered as the “title” of the field (…but I don’t know how many characters could be used…). It could also be to choose between the answers “I agree”, or “I don’t agree”.
I wanted to share this with you because, with your knowledge, it could end with a better and simpler solution, easier to maintain.
Thanks again
Gaston
Hello,
How would I edit the css for the checkbox label? I cannot seem to find the correct selector.
Thanks