Add text before the Divi captcha

The Divi contact form module comes with a CAPTCHA that is enabled by default when you add a contact form module to your page.

CAPTCHA is an acronym for “completely automated public Turing test to tell computers and humans apart” and is a challenge-response test used in computing to determine whether or not the user is human. In other words, using a captcha will help stop your Divi contact form from getting spammed by robots by asking them a simple maths question.

The Divi captcha will add a simple math question to the left of the submit button that your users will need to answer before they can submit the form. If the user tries to submit the form without answering the CAPTCHA question or they answer the question wrongly, then the form will not be submitted and the user will be alerted to the errors.

Add custom text before the captcha numbers in Divi

If you want to add some custom text before the Divi contact form captcha to make it clearer that the user needs to answer the question or a brief explanation as to why you can do so using some custom CSS.

You can add this code into your custom CSS box in Page Settings, in the Theme options custom CSS box, or into your child theme CSS file.

 .et_pb_contact_right p:before {content: "ADD YOUR TEXT HERE";margin-right: 15px;}

How to change CAPTCHA font color and styling

In the contact form module settings under Design > Captcha Text you can control the font styling for;

• Captcha Font
• Captcha Font Weight
• Captcha Font Style
• Captcha Text Color
• Captcha Text Size
• Captcha Letter Spacing
• Captcha Line Height
• Captcha Text Shadow

These setting will only affect the numbers (7 + 10 etc) but not the “=” or the custom text you added via CSS above.

Change your custom captcha text color

To change the custom text you added in the step above you would need to add a color code into the CSS so, if you wanted the text to be dark grey (#333333) your CSS would need to be;

 .et_pb_contact_right p:before {content: "ADD YOUR TEXT HERE";margin-right: 15px; color:#333333;}

Change the captcha “=” color

The captcha text settings in the module do not affect the “=” which is likely a bug, so you will need to add the color of your choice into the modules advanced custom CSS area. Go to Contact Form Settings > Advanced > Custom CSS > Captcha Text and add;

 color:#333333;