Show Which Fields Are Required
One of the missing features in the Divi Contact form module is something that is usually standard on other forms – asterisks for required fields! But don’t worry, it’s easy to add these! In this tutorial, I will show you how to show an asterisk on any required field in the Divi Contact Form module!
FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!
1. Add A Custom CSS Class To The Divi Contact Form
The first step in the tutorial is to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only make this affect only a specific module. This selector is also used in step #2 with the jQuery, so this is important for the code to know which fields to affect.
To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-asterisks” in the CSS Class input field of the Contact Form module.
2. Add The Custom jQuery Code Snippet
The second step is to add the custom jQuery code to your website. This step is also very easy, and we are doing the work with only a few lines of code. Simply copy the jQuery snippet below and place it into your Divi website.
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
<script>
jQuery(document).ready(function(){
jQuery(".pa-contact-form-asterisks *").each(function(){
if(jQuery(this).attr('data-required_mark') == 'required' && !jQuery(this).hasClass('et_pb_contact_captcha')){
var x = jQuery(this).attr('placeholder');
var x = jQuery(this).attr('placeholder',x + ' * ');
}
});
});
</script>After adding and saving the code, exit the Divi Builder and view the form on the frontend (the code only takes effect on the frontend). You will see any fields that are set to required will now have an asterisk.
The code is checking for any field within the contact form with the custom class that has the attribute of “required” within the code. This attribute is visible in the code when the “Required Field” setting is enabled. Our code simply finds it, then finds the placeholder text of that field, and adds an asterisk symbol after the placeholder text.
Do It With A Setting!
Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!
The Divi Contact Form Helper plugin has a toggle setting to quickly add an asterisk to any required fields. If you are showing the field label text, it will place it there, or if not it will place it on the placeholder text. Using the plugin can save you loads of time and add lots of additional functionality. Be sure to check out all the other amazing features!
Hey Nelson, Thanks for this great tutorial.
But this is not working with checkboxes, radio fields, and dropdown. Can you please add a code for it.
And also when we use labels on top by following your tutorial: https://www.peeayecreative.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/ asterisks are not showing on top labels. Is this possible?
Some of these things are just limitations of Divi, so I will recommend investing in the plugin which solves both issues.
Pschschschschsch … there is a secret third item in the list:
“3. The no code and module way -> Fill in the title text and press * (it is the one key with the plus sign on the keyboard) and you are ready to go”
You didn’t mention it in your article, there is nothing wrong with this method or have I made a mistake for the last 10 years? https://imgur.com/a/ucNOsKz
As they say, “Whatever works” sounds good to me.
Thanks Nelson, so what is the simplest way to add * Required field within the form? I feel the asterisks is great but really need some text below saying that.
If you have our plugin, you could use the description field for that, it would work nicely.