Better Captcha for DIVI Contact form

1)

You need to create a child of your theme, if you don’t have one already. We are using the Orbisius Child Theme Creator plugin from “Svetoslav Marinov (Slavi)”.

AND make sure you have a folder named “includes” in it.
It should look like this : “public_html/wp-content/themes/Divi-child-theme/includes”

2)

Find the original “ContactForm.php” file from your divi theme and make a duplicate in the “includes” folder.
The original file should be in “public_html/wp-content/themes/Divi/includes/builder/module”
It should look like this : “public_html/wp-content/themes/Divi-child-theme/includes/ContactForm.php”

3)

Edit the “ContactForm.php” file of the “includes” folder.
At the top, rename your class and turn off the “vb_support” in the function “init()”
your code should look like this:

//class ET_Builder_Module_Contact_Form extends ET_Builder_Module_Type_WithSpamProtection {
class Custom_ET_Builder_Module_Contact_Form extends ET_Builder_Module_Type_WithSpamProtection {
function init() {
parent::init();

$this->name = esc_html__( 'Contact Form', 'et_builder' );
$this->plural = esc_html__( 'Contact Forms', 'et_builder' );
$this->slug = 'et_pb_contact_form';
$this->vb_support = 'off';
$this->child_slug = 'et_pb_contact_field';
$this->child_item_text = esc_html__( 'Field', 'et_builder' );

Search inside the “ContactForm.php” file for a line that looks like this:

$et_pb_captcha = sprintf('
<div class="et_pb_contact_right">
<p class="clearfix">
<span class="et_pb_contact_captcha_question">%1$s</span> = <input type="text" size="2" class="input et_pb_contact_captcha" data-first_digit="%3$s" data-second_digit="%4$s" value="" name="et_pb_contact_captcha_%2$s" data-required_mark="required" autocomplete="off">
</p>
</div>',
sprintf( '%1$s + %2$s', esc_html( $et_pb_first_digit ), esc_html( $et_pb_second_digit ) ),
esc_attr( $et_pb_contact_form_num ),
esc_attr( $et_pb_first_digit ),
esc_attr( $et_pb_second_digit )
);

Copy the following code underneath the above code and replace all the “smobilesoft.com” with your own url.
It should looks like this:

$et_pb_captcha = sprintf( '
<div class="et_pb_contact_right">
<p class="clearfix">
<span class="et_pb_contact_captcha_question">%1$s</span> <img src=\'http://smobilesoft.com/wp-content/themes/Divi-child-theme/imgeq.jpg\' style="vertical-align: top;"> <input type="text" size="2" class="input et_pb_contact_captcha" data-first_digit="%3$s" data-second_digit="%4$s" value="" name="et_pb_contact_captcha_%2$s" data-required_mark="required" style="vertical-align: top;max-width: 80px;text-align: center;padding-top: 0px;font-size: 30px;">
</p>
</div> ',
sprintf( '<img src=\'/http://smobilesoft.com/wp-content/themes/Divi-child-theme/img%1$s.jpg\'> <img src=\'http://smobilesoft.com/wp-content/themes/Divi-child-theme/imgplus.jpg\'> <img src=\'http://smobilesoft.com/wp-content/themes/Divi-child-theme/img%2$s.jpg\'>', esc_html( $et_pb_first_digit ), esc_html( $et_pb_second_digit ) ),
esc_attr( $et_pb_contact_form_num ),
esc_attr( $et_pb_first_digit ),
esc_attr( $et_pb_second_digit )
);

And finally comment the last line of the file.
It should looks like this:

}

//new ET_Builder_Module_Contact_Form();

4)

Edit the “functions.php” file of your child theme.
Add the following code:

/*================================================
#Load custom Contact Form Module
================================================*/
function divi_custom_contact_form() {
get_template_part( '/includes/ContactForm' );
$dcfm = new Custom_ET_Builder_Module_Contact_Form();
remove_shortcode( 'et_pb_contact_form' );
add_shortcode( 'et_pb_contact_form', array( $dcfm, '_render' ) );
}

add_action( 'et_builder_ready', 'divi_custom_contact_form' );

5)

Upload the number and sign images inside your child theme, “public_html/wp-content/themes/Divi-child-theme”.
You can use the one of the following zip file:
catpcha_images

Ready!!!!!

You can create your own images, just keep the naming scheme:

img1.jpg for number 1, img2.jpg for number 2 and so on up to number 15.
imgeq.jpg is for the equal sign and imgplus.jpg is for the plus sign.
Keep your images around 60 pixels height.