Overview

• Plugin Page: Contact Form 7 on WordPress.org
• Created by: Takayuki Miyoshi
• Typical Use: Lead capture, contact, feedback forms

Step 1: Where Can Contact Form 7 Be Created?

• Login to your WordPress Dashboard.
• Go to Contact → Contact Forms in the left-hand menu.
• Click Add New to create a new form.
• A default form template is generated – you can edit it using the built-in markup.

Step 2: How to Create a Contact Form 7 Form

• Navigate to Contact → Contact Forms.
• Click Add New.
• Give your form a title (e.g., "Lead Capture Form").
• Use the form editor to customize your fields:

[text* your-name "Your Name"]
[email* your-email "Your Email"]
[submit "Submit Form"]

• Click Save.
• Copy the shortcode shown above the form (e.g., [contact-form-7 id="123" title="Test Form"]).
• Paste the shortcode into any WordPress Page, Post, or Widget where you want the form to appear.

Step 4: How to Add Hidden Fields in Contact Form 7

To pass dynamic data (like UTM parameters, user IDs, referrer URLs), hidden fields are essential.

Method A: Static Hidden Field

Add this in your form editor:

[hidden channel default:get]

This creates a hidden field named channel that auto-fills from the URL parameter.

When the form is loaded with a URL like:

https://yourdomain.com/page?channel=facebook

The field channel will be populated with facebook.

[hidden channeldrilldown1 default:get]
[hidden channeldrilldown2 default:get]
[hidden channeldrilldown3 default:get]
[hidden channeldrilldown4 default:get]
[hidden landing_page default:get]
[hidden landing_page_group default:get]

Video: Step-by-step walkthrough

Step 5: How Contact Form 7 Connects to a CRM

Contact Form 7 does not natively integrate with CRMs, but you can use plugins or webhooks to connect it to your CRM.

Method A: Using Flamingo (for local storage)

• Install and activate the Flamingo plugin.
• It stores form submissions in your WP database.
• Useful as a backup or for manual data export.

Method B: Using Contact Form 7 to API (Recommended for CRM integration)

• Install the Contact Form 7 – Success Redirects + Webhooks plugin.
• After installing, go to your form → Additional Settings tab.
• Add webhook/post URL configuration like this:

on_sent_ok: "location.replace('https://yourcrm.com/lead-endpoint');"

Or use the plugin settings UI to define a custom webhook. Map form fields to your CRM’s API request fields (via plugin interface or code). Works with CRMs like HubSpot, Zoho, Salesforce (via API endpoints).

Step 6: How to Use Contact Form 7 as an iFrame

While Contact Form 7 is normally embedded via shortcode, you can use an iframe for embedding on non-WordPress sites or external pages.

Step-by-Step

Create a new WordPress page and embed your form via shortcode:

[contact-form-7 id="123" title="Demo Form"]

Publish the page. For example:

https://yourdomain.com/contact-form-page

On your external site, use this <iframe>:

<iframe
  src="https://formsubmit.s2-tastewp.com/form-page/"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Enable Attry Tracking

To allow our script to track this iFrame, add the attribute data-attry-iframe to your <iframe> tag.

<iframe
  src="https://formsubmit.s2-tastewp.com/form-page/"
  data-attry-iframe
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Ensure your Contact Form 7 form includes matching hidden fields:

[hidden utm_source default:get]

Hidden fields will now auto-populate based on iframe URL parameters.