# How To Show Asterisks On Required Fields In The Divi Contact Form

> In this tutorial I will show you how to show asterisks on required fields in the Divi Contact Form module.
> URL: https://www.peeayecreative.com/how-to-show-asterisks-on-required-fields-in-the-divi-contact-form/
> Last modified: 2026-09-18T06:51:17+00:00

## 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!

			
				
				
				
				
				**▶️ Please [watch the video above](#video) to get all the exciting details! 👆**

			
			
				
				
				
				
			
				
				
				
				
				
				
				
				
				
				
				**FYI:** You can do this with a setting directly in the Divi Contact Form module with our popular [Divi Contact Form Helper](https://www.peeayecreative.com/product/divi-contact-form-helper/) plugin! Take a look, it is so easy!

			
				
				
				
				
				[](https://www.peeayecreative.com/product/divi-contact-form-helper/)
			
			
				
				
				
				
			
				
				
				
				
				
				
				
				
				
				
				
## 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.

			
				
				
				
				
				
#### Where To Paste The jQuery Code

				**1. Divi Assistant**
If you are using our [Divi Assistant](https://www.peeayecreative.com/product/divi-assistant/) plugin, simply paste the code in the **jQuery** tab in the custom code window in the Divi Visual Builder.

**2. Child Theme**
If you are using a child theme, paste this code into the **scripts.js** file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can [generate a child theme](https://www.peeayecreative.com/how-to-generate-a-divi-child-theme-directly-on-your-site/(opens%20in%20a%20new%20tab)) directly on your site or **[download our free child theme](https://www.peeayecreative.com/free-divi-child-theme-download/)**.

**3. Divi Theme Options Integration**
Otherwise, paste this code in your **Divi>Theme Options>Integrations** tab in the **"Add code to the < head > of your blog"** code area.

*If you need help understanding where to paste the code, please check out our complete guide about **[where to add custom code In Divi](https://www.peeayecreative.com/where-to-add-custom-code-in-divi-css-javascript-php/)**.*

			
				
				
				
				
				
				
				
					`<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](https://www.peeayecreative.com/product/divi-contact-form-helper/) plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!*

			
				
				
				
				
				[](https://www.peeayecreative.com/product/divi-contact-form-helper/)
			
			
				
				
				
				
			
				
				
				
				
				
				
				
				
				
				
				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!

			
				
				
				
				
				
			
				[Learn More About The Plugin](https://www.peeayecreative.com/product/divi-contact-form-helper/)