How to Make Forms Tracking Work With the Elegant Themes Divi Contact Form

Want to make your forms tracking work with the Elegant Themes’ Divi Builder contact form? It’s easy using Insert Headers and Footers by WPBeginner. In this doc, we’ll show you how to make forms tracking work with the Elegant Themes Divi contact form by adding an id to the <form> elements of your Divi forms.

About The Id Attribute

The Elegant Themes forms don’t have an id set by default on the <form> elements.

While not technically required for valid HTML it’s certainly a best practice to include an id on a form.

Each form id on the site will need to be unique to minimize any confusion in the analytics later.

For forms tracking to work on a form, it’ll need to have an id element. Ids are added automatically for most forms and optin plugins, like WP Forms and OptinMonster.

For the Elegant Themes Divi Build contact form, we’ll need to add the id element with some JavaScript code.

Step 1: Install Insert Headers and Footers By WPBeginner.

To do this, navigate to Plugins » Add New and search for “insert headers and footers.”

Install Insert Headers and Footers

Next, click Install Now.

Finally, click Activate.

Step 2: Next, Navigate to Settings » Insert Headers and Footers

Insert Header and Footer Scripts

Step 3: Paste the following code in the “Scripts in Header” settings:

<script>
jQuery(document).ready(function(){
   jQuery('.et_pb_contact_form').attr('id', 'your_id_here');
});
</script>
Remember, your id should only include lowercase letters, numbers, underscores, and dashes and be clearly identify the contact form.

Now the Google Analytics forms events tracking will work:

Form Event Tracking

That’s it! Now you know how to make forms tracking working with the Elegant Themes Divi contact form!

Ever wondered how to make tracking work with Elegant Themes’ Bloom plugin? Then check out our guide here: How to make Forms Tracking work with the Elegant Themes Bloom Plugin.