Using a child theme allows you to customize the Divi module without losing changes when the parent theme is updated. Moving the Contact Form Module to a child theme ensures that your customizations remain intact and your contact form functions correctly.
In this article, we will guide you through the process of moving the Contact Form Module to a child theme in Divi.
Install and Activate a Child theme for Divi
Using an FTP connection, your hosting File Manager app, or the Advanced File Manager plugin, copy the file ContactForm.php located in the Divi Parent theme folder/includes/builder/module/ to the Child theme/includes/ folder.
Open the ContactForm.php file from the Child theme/includes/ folder and find and replace this line of code:
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
Find and replace this line of code:
$this->vb_support = 'on';
With:
$this->vb_support = 'off';
Remove this line of code (located at the bottom of the file):
if ( et_builder_should_load_all_module_data() ) {
new ET_Builder_Module_Contact_Form();
}Edit the functions.php located in the Child theme folder and add this code after the existing PHP 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' );
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' );
Notes:
After completing the process, you can add/customize the ContactForm.php to your needs.
Because the ContactForm.php was copied to the Child theme, when using the Visual Builder, the visual of the Contact Form module will be replaced with a dark grey container. However, all the Contact Form module's settings will still work as expected.
