Contact Form 7

Contact Form 7 (CF7) is one of the most widely used WordPress form plugins, with millions of active installations. It uses a simple tag-based syntax for building forms and submits them via AJAX rather than a full page reload.

AttributionHub handles Contact Form 7 in two ways:

1. Field population — CF7 forms render as standard .wpcf7-form HTML elements in the page DOM. The standard forms handler detects and populates hidden fields automatically.
2. AJAX conversion tracking — CF7 submits forms via AJAX (XHR), which bypasses the normal browser form submission flow. A dedicated handler listens for CF7’s wpcf7mailsent custom DOM event to capture successful submissions for conversion tracking.

Prerequisites

Before you begin, make sure:

• The AttributionHub tracking script is installed on your site (see Installation)
• You have Contact Form 7 installed and activated in WordPress
• You have access to the WordPress admin panel to edit forms

Step 1: Open Your Form

1. In your WordPress admin, go to Contact > Contact Forms
2. Click on the form you want to add attribution tracking to, or create a new form

Step 2: Add Hidden Fields to the Form Template

In the CF7 form editor, you will see the form template — a text area with CF7 shortcode tags. Add hidden field tags for each attribution value you want to capture.

Add the following hidden field tags to your form template (typically after your visible fields and before the submit button):

[hidden ah_lt_channel]
[hidden ah_lt_source]
[hidden ah_lt_medium]
[hidden ah_lt_campaign]
[hidden ah_lt_content]
[hidden ah_lt_term]
[hidden ah_lt_landing_url]
[hidden ah_ft_channel]
[hidden ah_ft_source]
[hidden ah_ft_medium]
[hidden ah_ft_campaign]
[hidden ah_ft_landing_url]
[hidden ah_visitor_id]
[hidden ah_touch_count]

Each [hidden field_name] tag creates an <input type="hidden" name="field_name"> element in the rendered form. Add as many or as few as your reporting needs require.

Your complete form template might look like:

<label>Your Name
  [text* your-name]</label>

<label>Your Email
  [email* your-email]</label>

<label>Your Message
  [textarea your-message]</label>

[hidden ah_lt_channel]
[hidden ah_lt_source]
[hidden ah_lt_medium]
[hidden ah_lt_campaign]
[hidden ah_lt_landing_url]
[hidden ah_ft_channel]
[hidden ah_ft_source]
[hidden ah_visitor_id]

[submit "Send"]

Step 3: Configure the Mail Template

To receive attribution data in the email notification (and to save it via CF7 integrations), add the corresponding mail tags to your mail template.

1. In the CF7 form editor, switch to the Mail tab
2. In the Message Body, add the attribution fields where you want them to appear:

Name: [your-name]
Email: [your-email]
Message: [your-message]

--- Attribution Data ---
Channel (Latest): [ah_lt_channel]
Source (Latest): [ah_lt_source]
Medium (Latest): [ah_lt_medium]
Campaign (Latest): [ah_lt_campaign]
Landing Page: [ah_lt_landing_url]
Channel (First): [ah_ft_channel]
Source (First): [ah_ft_source]
Visitor ID: [ah_visitor_id]

3. Save the form

Step 4: Test the Integration

1. Visit a page on your site that contains the CF7 form
2. Open your browser’s DevTools (F12)
3. In the Elements panel, find the form (it will have the class wpcf7-form) and inspect the hidden <input> elements — they should have attribution values populated
4. Submit a test form entry
5. Check your email notification — the attribution values should appear in the email body
6. If you use a CF7 database plugin (like Flamingo), check the saved entries for attribution data

For a full testing walkthrough, see Verify It Works.

How It Works

Field Population

CF7 renders forms as standard HTML <form class="wpcf7-form"> elements. The [hidden field_name] tags generate <input type="hidden" name="field_name"> elements. AttributionHub’s standard forms handler finds these hidden fields by their name attribute, matches them to the field mapping, and sets their values.

AJAX Conversion Tracking

CF7 submits forms via AJAX (XHR) rather than a traditional form submission. Here is the sequence:

1. The visitor clicks “Submit”
2. CF7’s JavaScript sends the form data via AJAX to the WordPress backend
3. WordPress processes the form (sends email, runs actions, etc.)
4. CF7’s JavaScript receives the response and fires the wpcf7mailsent custom DOM event on the form element
5. AttributionHub’s dedicated handler listens for this event and fires conversion tracking

Without the dedicated handler, the AJAX submission would be invisible to conventional form submission tracking. The handler ensures that successful CF7 submissions are captured as conversion events.

Recommended Hidden Fields

The table below lists the most commonly used fields. For the complete field catalog, see Field Reference.

Core Attribution Fields (Latest Touch)

Core Attribution Fields (First Touch)

Global Fields

For additional fields including latest-non-direct touch (ah_lnd_*), drill-down fields, raw UTM parameters, and ad click IDs, see the full Field Reference.

Custom Field Mapping

If you want to use different field names in your CF7 form, override the defaults:

<script>
  window.attrhub = {
    settings: {
      fieldMapping: {
        "latest.attribution.channelGroup": "lead_channel",
        "latest.attribution.source": "lead_source",
        "latest.attribution.campaign": "campaign_name",
      },
    },
  };
</script>

Then use the custom names in your CF7 template:

[hidden lead_channel]
[hidden lead_source]
[hidden campaign_name]

See Configuration for the full mapping reference.

Tips

• Flamingo plugin — Install the Flamingo plugin to save all CF7 submissions to the WordPress database. Attribution values are stored alongside other form data, making it easy to query and export.
• CF7 conditional fields — If you use the “Conditional Fields for Contact Form 7” plugin, hidden fields work normally and are submitted regardless of conditions.
• Multiple forms on one page — AttributionHub detects and populates all CF7 forms on the page independently.
• CF7 integrations — If you use CF7 integration plugins (e.g., for Salesforce, HubSpot, or Mailchimp), the hidden field values are included in the integration payload. Map them to the appropriate fields in your connected service.
• SMTP plugins — Some SMTP plugins modify CF7’s email sending. This does not affect AttributionHub — the hidden fields are populated before the form is submitted, regardless of how the email is sent.
• Caching plugins — If you use a caching plugin (WP Super Cache, W3 Total Cache, etc.), make sure the AttributionHub script is not cached with stale data. The script reads fresh attribution data from localStorage on every page load, so page caching does not typically cause issues.

Troubleshooting

Hidden fields are empty in emails

1. Make sure you added the corresponding mail tags (e.g., [ah_lt_channel]) to the Mail tab in the CF7 editor. Hidden fields are populated in the form, but CF7 only includes values in the email if you add the mail tags.
2. Verify the hidden field names in the form template match the AttributionHub field names. Names are case-sensitive.
3. Inspect the hidden <input> elements in DevTools to confirm they have values before submission.
4. Enable logging (enableLogging: true in settings) and check the browser Console.

AJAX submission not tracked

1. Make sure the CF7 JavaScript runtime is loaded. Type window.wpcf7 in the browser Console — it should return an object.
2. The wpcf7mailsent event only fires on successful submissions. If the form has validation errors, the event does not fire (which is correct behavior — you only want to track successful submissions).
3. Some CF7 add-ons may modify the AJAX behavior. If the wpcf7mailsent event is not firing, check for JavaScript errors in the Console.

CF7 shows “There was an error trying to send your message”

This is a CF7 issue, not an AttributionHub issue. Common causes include misconfigured SMTP settings, missing mail server, or server-side errors. The hidden fields should still be populated correctly — the issue is with CF7’s email delivery.