In our previous blog post we had discussed how to set up the form conversion tracking if you have only one elementor form in a page. But if you have multiple forms on a page and purpose of each form is unique, and you would like to track them? Well the good news is that it is possible! To track multiple forms in a page, you will need to access the form settings in WP admin dashboard. Login to your website’s WP admin and choose the page where the multiple forms are available. Open the elementor editor. Now click the first form and see its setting on the left side of the editor. Now go to additional setting options. You will see “Form ID” field here. We will use this form ID setting to identify each form. Enter meaningful information here in that field. If it is the main contact form of your website then “main-contact-form” might be a good option to enter here. Enter form id for each form as per your forms. I have used “request-call-back-header-form” for request a call back form. 
Save the page and go to website frontend and refresh the page. Then right-click anywhere on the Elementor form and choose the inspect option. You will see an element depicted in the below picture. 
You can see form id is visible here in the front end. Now we need to get this form id after successful form submission when “Thank You” message appears. To do this, we’ll use Simo Ahava’s technique of capturing the correct element.
We will need to follow these steps to implement this
- Create a Custom HTML tag with polyfill technique (Older browsers do not support this solution, only polyfill will support it)
- Create a Custom JS variable to pick the correct element (it will be used as a Utility variable)
- Create a Custom JS variable to return the value of Elementor form ID
#1. Custom HTML tag with Polyfill
Use polyfill and create a custom HTML tag with the following code, and set it to fire on all pages. <script> if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function(s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s), i = matches.length; while (–i >= 0 && matches.item(i) !== this) {} return i > -1; }; } </script>
#2. Utility variable
In this step create a user defined Custom JS variable with the following code: function() { return function(target, selector) { while (!target.matches(selector) && !target.matches(‘body’)) { target = target.parentElement; } return target.matches(selector) ? target : undefined; } } Name this variable cjs – find closest. (Note: It’s really important to name the variable exactly in that way because we’ll use it in Step #3 (case-sensitive)).
#3. Variable for returning the ID of the Elementor Form
In final step, create a variable that will return to the Elementor form ID. After submitting the form, a “Thank you” message will be displayed on the screen. function() { var el = {{cjs – find closest}}({{Click Element}}, ‘form.elementor-form’); return typeof el !== ‘undefined’ ? el.id : undefined; } Name the variable cjs – elementor form id. To work on this code, it must meet these three requirements:
- Utility variable must be named cjs – find closest (case-sensitive) because that exact name is used in the JS code above
- Built-in Click Element variable must be enabled in your container
- CSS Selector must pick the correct node, the actual <form> element. In most cases, form.element-form should work (because we’re targeting a form element with a CSS class elementor-form). If it doesn’t work in your case, you must get familiar with CSS Selectors first.
#4. Let’s test
Here’s a quick summary of what you have done so far to track multiple Elementor forms on the same page:
- You must add IDs to all Elementor forms on your website.
- Create a Custom HTML tag with polyfill method.
- Create a utility variable (Custom JS) that will climb the Document Object Model (DOM) and will pick the element
- Create a Custom JS variable that will use the utility variable and return the form element ID(CSS Selector is form.elementor-form)
After you have made all the changes listed above, publish changes in the Elementor builder, and then refresh the Preview & Debug mode. Finally, go to your website (where the Elementor Form is located) and refresh that page. Submit the form. An Element Visibility event should appear in the GTM debug console. Click on it and go to the Variables tab. Find the Custom JS variable cjs – elementor form id and check its value. It should contain the same ID of the form (that is the ID you entered in Elementor builder when you edited the form). If form id is not showing in the debug window, then you will need to create a click element trigger with the following setting:
- Trigger Type: Click – All Elements
- Trigger fires on: some clicks
Click ID >>matches CSS Selector >> #form.elementor-form 
If you see the above image, now create an Element visibility trigger to the rescue form submission tracking and Google Analytics event tag to pass values in Google Analytics. Create Element Visibility Trigger: Go to section “Element visibility trigger to the rescue form submission tracking” in our previously published blog post on elementor form tracking “Elementor Form Tracking with Google Tag Manager and Analytics” and follow the steps to create element visibility trigger. 
Google Analytics GTM Event Tag to pass values in GA:
- Track type – Event
- Category – elementor form (you can enter it as you’re desired)
- Action – Submitted (you can enter it as you’re desired)
- Lable – {{cjs–elementor-form-id}}
Add Element Visibility (ele-form-submission) as triggering firing on this tag. 
Setting up the Elementor Form Goal Conversion in Google Analytics Go to Google analytics, and navigate to Admin >> View >> Goals >> +New Goal
- Goal setup – Custom
- Goal description – Give a descriptive name to your Goal (as my goal name is “Header Banner Form – Request a call back”)
- Fill the goal details (Note: It is case-sensitive, as you choose in GTM Google analytics event tag “Elementor Form Submission”)
- Put the form id in “Lable” field that you want to track.
And structure it as Goal setup: Select Custom Goal description:
- Name – Give a descriptive name to your Goal (as my goal name is “Header Banner Form – Request a call back”)
Type: Select Event. Goal details:
- Category: Equals to > elementor form (It is case sensitive and should be same whatever you named it in GTM)
- Action: Equals to > Submitted (It is also case sensitive and should be same whatever you named it in GTM)
- Label: Equal to > request-call-back-header-form (It is the form ID of your form that you want to track)
- Click on Save.
Test:
Your multiple elementor forms conversion tracking is done now. For testing purpose, go to GTM > Preview, and then visit your website and refresh the page where forms are available. Fill the form and see “Elementor Form Submission” tag will fire. Also, check Google Analytics real-time report for events and conversions. If everything is fine and you are happy with your elementor form tracking, then submit the current workspace in GTM and publish it. If you want to set up other goals for different form IDs, then just repeat the process but change the Label with your Form ID in the Goal Conversion.
Looking for digital marketing agencies that can help in your existing/new projects? Let us know about your projects. Our team of experts can help you with anything related to SEO, SMO, PPC, online reputation, etc.
