Why us?

Behind every great website is a
great team
.

We have built 150+ websites for marketers and global brands.

Services
Technologies
About us

Why us?

Behind every great website is a
great team
.

We have built 150+ websites for marketers and global brands.

Guide

Triggering Elementor Form Successful Submissions in Google Tag Manager

Table of Contents

When using analytical tools like Google Analytics or Mixpanel on your website, you may need to track successful Elementor form submissions. Since there is no default event for this, many people attempt to trigger an event based on clicks on the submit button. However, this will trigger on every click, not just when the form is successfully submitted.

We explored many solutions, but adding a Data Layer with a new event worked best for us. All you need to do is copy and paste this small code into your Elementor Custom Code:

<script>
  jQuery(document).ready(function ($) {
    $(document).on('submit_success', function (evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'form_sent',
        form_name: evt.target.name
      });
    });
  });
</script>

Once this code is added, the form_sent event will appear every time an Elementor form on your website is successfully submitted. The best part of this Data Layer is the form_name, which you can easily use to create a variable in Google Tag Manager to distinguish between different Elementor forms on your website. Just remember to name your Elementor forms.

Picture of Roman Vlčák

Roman Vlčák

An incorrigible perfectionist passionate about pixel-perfect work, who constantly strives to deliver the highest possible quality. Outside of Webgate, he is a caring husband and father to his young son. In his free time, he likes traveling with his family and doing puzzles.

Senior WordPress Developer • Co-founder

Share this article

Let's work together!

Get a free consultation with our experts

Read
More
.

Codex and Claude connected through MCP to an editable Elementor website, illustrated on a pastel gradient background
Guide

How to Generate an Elementor Site with AI: My Process

Read more
Read more
Codex and Claude connected through MCP to an editable Elementor website, illustrated on a pastel gradient background
Guide

How to Connect Elementor MCP and Edit Your Website with AI

Read more
Read more
Illustration of a Claude design connected through MCP to editable Elementor blocks in WordPress
Guide

How to Turn a Claude Design into an Elementor Website with MCP

Read more
Read more

Subscribe to our quarterly newsletter and receive latest insights.

Topics: Improving B2B websites, AI tools in web development, UX/UI, website marketing trends etc.

By submitting this form you agree to the processing of your personal data according to our .

Contact

Let's work together!

Get a free consulting call with our experts

Book a call with
Webgate founders

Thank you for your interest!

We will contact you soon.