Kaspars

Neil Murray

<p><strong>NEW:</strong> Subscribe to the <a href="https://formcontrols.com/pro" rel="nofollow ugc">🚀 PRO version</a> for advanced analytics and tracking features, and professional support by the plugin author.</p>
<p>This is an addon for the <a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7</a> plugin with the following features:</p>
<ul>
<li><a href="https://formcontrols.com/docs" rel="nofollow ugc">Track form submissions, errors and completions</a> with Google Analytics (GA4), Google Tag (gtag.js), Google Tag Manager (GTM), Matomo (formerly Piwik) and Facebook Pixel.</li>
<li>Redirect to URL on form submission.</li>
<li>Enable native WordPress shortcodes in form content.</li>
<li>Disable AJAX form submissions.</li>
<li>Disable default form CSS.</li>
<li>Disable automatic paragraph formatting.</li>
<li>Disable HTML5 input field types or enable the HTML5 input type fallback.</li>
<li>Specify the Google reCAPTCHA language.</li>
<li>Store form submissions in <a href="https://preseto.com/go/cf7-storage?utm_source=wporg" rel="nofollow ugc">Storage for Contact Form 7</a> or <a href="https://wordpress.org/plugins/tablepress/" rel="ugc">TablePress</a>.</li>
</ul>
<p>Please note that some settings work on the per-page level and will apply to all forms on the same page. For example, disabling AJAX form submissions for one form will disable AJAX submissions on all forms on the same page.</p>
<h4>Requirements</h4>
<ul>
<li><a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7</a> version 4.3 or later for features related to submission tracking and redirects.</li>
</ul>
<h4>Usage</h4>
<p>The plugin adds a new “Controls” tab for each Contact Form 7 form in the WordPress administration area.</p>
<h4>Form Submission Storage</h4>
<p><em>Setup the official companion plugin <a href="https://preseto.com/go/cf7-storage?utm_source=wporg" rel="nofollow ugc">Storage for Contact Form 7 plugin</a> for capturing the form submissions safely in the WordPres database.</em></p>
<p>Alternatively, there is also a basic integration with the <a href="https://wordpress.org/plugins/tablepress/" rel="ugc">TablePress plugin</a>. Select the TablePress table where to store the form submissions. The plugin will add any missing columns for each form field, and append the form entries as rows to the table. Additionally, fields <code>cf7_time</code> (submission time as <a href="https://en.wikipedia.org/wiki/ISO_8601" rel="nofollow ugc">ISO 8601</a>) and <code>cf7_url</code> (URL where the form was submitted) are stored along with the form data.</p>
<h4>Analytics Tracking</h4>
<p>The plugin <em>automatically</em> triggers analytics events for the following services:</p>
<ul>
<li><a href="https://support.google.com/analytics/topic/14088998" rel="nofollow ugc">Google Analytics (GA4)</a> using <a href="https://support.google.com/tagmanager/answer/9442095" rel="nofollow ugc">Google Tag Manager</a> and <a href="https://developers.google.com/tag-platform/gtagjs" rel="nofollow ugc">Global Tag (gtag.js)</a> with <code>ga()</code>, <code>_gaq.push()</code> and <code>dataLayer.push()</code> implementations,</li>
<li><a href="https://matomo.org/" rel="nofollow ugc">Matomo</a> (formerly Piwik),</li>
<li><a href="https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking" rel="nofollow ugc">Facebook Pixel Conversion Tracking</a>.</li>
</ul>
<p>It passes the following data with the event:</p>
<ul>
<li>“Contact Form” as the event category,</li>
<li>“Submit”, “Sent”, “Error” or “Spam” as the event action, and</li>
<li>the form title as the event title.</li>
</ul>
<h4>Facebook Pixel</h4>
<p>The <a href="https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#standard-events" rel="nofollow ugc">standard Contact event</a> is used for Facebook Pixel with <code>content_category</code> property set to the event type (Submit, Sent, Error, Spam) and <code>content_name</code> set to the form title.</p>
<h4>Contribute</h4>
<ul>
<li>Report issues and suggest improvements <a href="https://github.com/kasparsd/contact-form-7-extras" rel="nofollow ugc">on GitHub</a>.</li>
<li>Add <a href="https://translate.wordpress.org/projects/wp-plugins/contact-form-7-extras" rel="nofollow ugc">a translation to your language</a>.</li>
</ul>


Controls for Contact Form 7 (Redirects, Analytics & Tracking)

Works Great!!! Having issues with the Contact 7 Form sample code. Found this plugin which creates easy functionality. Thanks for making our lives easier!! 

Works Great!!

Very useful plugin!
I would love to see an Autocomplete Option to turn Autocomplete OFF for ALL forms. By default fields have Autocomplete ON. Although it's possible to change it by field attribute, I'd found it easier to have a global settings to disable Autocomplete for all forms.

Love to see Autocomplete Setting

Analytics, tracking, redirects and storage for Contact Form 7.

Openmost

<p>Elevate your website analytics with the DataLayer plugin!<br />
This robust plugin creates a fully populated and standardized dataLayer object, ensuring seamless integration with both Google Tag Manager and Matomo Tag Manager.</p>
<ul>
<li>Instant Setup: Automatically generates and populates a dataLayer object with essential website and user interaction data.</li>
<li>Universal Compatibility: Works flawlessly with Google Tag Manager and Matomo Tag Manager, making it easier to manage your tagging needs.</li>
<li>Customizable Data: Easily add or modify data points to fit your specific tracking requirements.</li>
<li>Performance Optimized: Lightweight and optimized for speed to ensure your site remains fast and responsive.</li>
</ul>
<p>Get a quick look at all the generated structures!</p>
<h4>Archive page `dataLayer` structure</h4>
<p>Easy access to your archive data with a standard event name and subject.</p>
<pre><code>{
    "event": "view_archive_date", //_date may be replaces with _tax value
    "page": {
        "type": "archive",
        "title": "january 2025 - Example",
        "url": "https://example.com/2025/01",
        "path": "2025/01",
        "locale": "en_US",
        "archive_type": "date",
        "taxonomy": false,
        "post_type": false,
        "date": {
            "year": 2025,
            "month": 1,
            "day": null
        }
    }
}
</code></pre>
<h4>Author page `dataLayer` structure</h4>
<p>Easy access to all author details on his archive page.</p>
<pre><code>{
    "event": "view_author",
    "page": {
        "id": 1,
        "nickname": "openmost",
        "display_name": "openmost",
        "first_name": "Ronan",
        "last_name": "HELLO",
        "description": "The creator of this super plugin",
        "type": "author",
        "url": "https://example.com/author/openmost",
        "path": "author/openmost",
        "title": "Author: openmost"
    }
}
</code></pre>
<h4>Error page `dataLayer` structure</h4>
<p>This <code>dataLayer</code> structure allows you to easily track the 404 error and detect the referring page that led to this error.<br />
What a great trick yeah?</p>
<pre><code>{
    "event": "view_error_404",
    "page": {
        "type": "error",
        "title": "Page not found - Website",
        "url": "https://example.com/url-that-encountered-a-404-error",
        "path": "/url-that-encountered-a-404-error",
        "locale": "en_US",
        "error_type": "404",
        "http_status_code": 404
    }
}
</code></pre>
<h4>Search results page `dataLayer` structure</h4>
<p>The search key in this object allows you to get the search term and total results to detect invalid searches.<br />
Very useful for Matomo Tag Manager, and nice hack for Google Tag Manager.</p>
<pre><code>{
    "event": "view_search_results",
    "page": {
        "type": "search",
        "url": "https://example.com",
        "path": "",
        "title": "You searched for Demo - Example",
        "locale": "en_US"
    },
    "search": {
        "search": "Demo",
        "search_cat": "",
        "search_count": 3,
        "query": "Demo",
        "found_posts": 3,
        "post_count": 3
    }
}
</code></pre>
<h4>Home, Post Type `dataLayer` structure (blog posts, custom post type single page)</h4>
<p>The following structure is generated for a single post page, but it automatically adapts to your custom post type, page, etc.</p>
<pre><code>{
    "event": "view_single_post",
    "page": {
        "type": "post",
        "id": 1,
        "url": "https://example.com/blog/super-article-path",
        "path": "/blog/super-article-path",
        "title": "Super article title | Example",
        "locale": "en_US",
        "is_home": false,
        "is_front_page": false,
        "post_name": "super-article-path",
        "post_title": "Super article title",
        "post_excerpt": "",
        "post_status": "publish",
        "post_date": "2024-08-17 13:30:00",
        "post_date_gmt": "2024-08-17 13:30:00",
        "post_modified": "2024-08-17 13:30:00",
        "post_modified_gmt": "2024-08-17 13:30:00",
        "post_type_name": "post",
        "post_type_label": "Posts",
        "post_type": {
            "name": "post",
            "label": "Posts",
            "label_singular": "Post",
            "label_plural": "Posts",
            "description": "The super post type description"
        },
        "guid": "https://example.com/?p=1",
        "post_mime_type": false,
        "comment_status": "open",
        "comment_count": "0",
        "author": {
            "id": 1,
            "nickname": "openmost",
            "display_name": "openmost",
            "first_name": "Ronan",
            "last_name": "HELLO",
            "description": "The creator of this super plugin"
        },
        "taxonomies": {
            "category": {
                "name": "category",
                "label": "Categories",
                "description": "",
                "object_type": [
                    "post"
                ],
                "terms": {
                    "Uncategorized": {
                        "term_id": 1,
                        "slug": "uncategorized",
                        "name": "Uncategorized",
                        "term_group": 0,
                        "term_taxonomy_id": 1,
                        "taxonomy": "category",
                        "description": "",
                        "parent": 0,
                        "count": 1,
                        "filter": "raw"
                    }
                },
                "primary_term": [] //Filled only with YoastSEO plugin
            }
        },
        "category": [
            "Uncategorized"
        ],
        "page_template": ""
    }
}
</code></pre>
<h4>Term and taxonomy page `dataLayer` structure</h4>
<pre><code>{
    "event": "view_archive_category", // this event name changed for every taxonomy
    "page": {
        "type": "archive",
        "title": "Uncategorized archives - Example",
        "url": "https://example.com/blog/category/uncategorized",
        "path": "blog/category/uncategorized",
        "locale": "en_US",
        "archive_type": "taxonomy",
        "taxonomy": "category",
        "post_type": "category",
        "date": {
            "year": null,
            "month": null,
            "day": null
        }
    }
}
</code></pre>
<h4>Pagination `dataLayer` structure</h4>
<p>The <code>pagination</code> object structure is automatically added to all pages that have pagination.</p>
<p>Easy access to your pagination data, detect if users are using your pagination as much as you want.</p>
<pre><code>{
    pagination: {
        "posts_per_page": 10,
        "post_count": 1,
        "paged": true,
        "page_number": 2,
        "max_num_pages": 5
    }
}
</code></pre>
<h4>Authenticated user `dataLayer` structure</h4>
<p>The <code>user</code> object is automatically added to all page when user is logged in.</p>
<p>User hashed data with SHA256 is very useful for GDPR consent with Google Ads services and user provided data.</p>
<pre><code>{
    user: {
        "id": 1,
        "user_login": "openmost",
        "user_nicename": "Openmost",
        "user_email": "no-reply@openmost.io",
        "user_registered": "2024-01-01 12:00:00",
        "display_name": "openmost",
        "roles": [
            "administrator"
        ],
        "sha256_id": "6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b",
        "sha256_user_login": "b2754b994c2fb636d1943ac0170f4ea192a891fb0f09cfdd100a9ffa983f053d",
        "sha256_user_email": "679d031c25e557ee84ca86ecaf333ccd8d3d1a3900ee728da83d79a819daf535"
    }
}
</code></pre>
<h4>Plugin : Contact Form 7 `dataLayer` structure</h4>
<p>This plugin automatically detects the use of WP Contact Form 7.<br />
No configuration needed.</p>
<p>Form submitted</p>
<pre><code>{
    "event": "wpcf7_submit",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Form with invalid fields</p>
<pre><code>{
    "event": "wpcf7_invalid",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Form spamming detected</p>
<pre><code>{
    "event": "wpcf7_spam",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Email sent successfully</p>
<pre><code>{
    "event": "wpcf7_mail_sent",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Failed to send mail</p>
<pre><code>{
    "event": "wpcf7_mail_failed",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>As each event handles <code>wpcf7_form_details</code>, here is an example of the object values when the form is submitted with invalid fields.</p>
<pre><code>"wpcf7_form_detail": {
        "contactFormId": 145,
        "pluginVersion": "6.0.3",
        "contactFormLocale": "en_US",
        "unitTag": "wpcf7-xxxxxx",
        "containerPostId": 0,
        "status": "validation_failed",
        "inputs": [
            {
                "name": "your-message",
                "value": ""
            },
            {
                "name": "your-name",
                "value": ""
            },
            // All other inputs
        ],
        "formData": {},
        "apiResponse": {
            "contact_form_id": 145,
            "status": "validation_failed",
            "message": "One or more fields contain an error. Please check and try again.",
            "invalid_fields": [
                {
                    "field": "your-name",
                    "message": "Please complete this field..",
                    "idref": "last_name",
                    "error_id": "wpcf7-f145-o1-ve-your-name"
                },
                {
                    "field": "your-first-name",
                    "message": "Please complete this field.",
                    "idref": "first_name",
                    "error_id": "wpcf7-f145-o1-ve-your-first-name"
                },
                // All other invalid fields
            ],
            "posted_data_hash": "",
            "into": "#wpcf7-f145-o1"
        }
    }
</code></pre>
<h4>Plugin : WP Forms `dataLayer` structure</h4>
<pre><code>{
    event: 'wp_forms_submit',
    wp_forms_form_detail: {} // the HTML tag found in DOM
}
</code></pre>


DataLayer for GTM and Matomo

Add contextual information to dataLayer for GTM and MTM

Controls for Contact Form 7 (Redirects, Analytics & Tracking) vs DataLayer for GTM and Matomo