These changes require a Divi child theme. Please check the following article if you have not set a child theme yet: https://intercom.help/elegantthemes/faq-s-and-troubleshooting/how-to-make-a-child-theme

1. Next, create a new folder in the child theme folder , for example includes folder.

2. Now copy the  /includes/builder/module/ContactForm.php  file from the parent theme into the  child-theme/includes/  folder.

3. Open up the  ContactForm.php   file in the child theme and replace this line (at the very top): 

class ET_Builder_Module_Contact_Form extends ET_Builder_Module_Type_WithSpamProtection

with

class Custom_ET_Builder_Module_Contact_Form extends ET_Builder_Module_Type_WithSpamProtection
  • Replace:  $this->vb_support = 'on';   with  $this->vb_support = 'off';

  • Remove this line from the bottom:  new ET_Builder_Module_Contact_Form;  

5. Finally, add the following code to the functions.php file in your child theme folder:

/*================================================
#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' );

function divi_custom_contact_form_class( $classlist ) {
// Contact Form Module 'classname' overwrite.
$classlist['et_pb_contact_form'] = array( 'classname' => 'Custom_ET_Builder_Module_Contact_Form',);
return $classlist;
}

add_filter( 'et_module_classes', 'divi_custom_contact_form_class' );

Now you are ready to customize the Contact Form module the way you need and keep the changes while updating/reinstalling the parent Divi theme.

You might want to add the following changes to your Contact Form module:

Did this answer your question?