WordPress

Contact Form 7 configuration with Hidden Fields

Contact form 7 configuration with hidden fields little different then other form integration. You must know how to do this. This solution will help you pass the many hidden fields like campaign source, medium etc.

Firstly, Contact Form 7 does not support hidden fields. There is a free plugin Contact Form 7 Modules that add hidden field functionality. Start by installing this plugin into your WordPress site.

Once you installed Contact Form 7 Modules plugin you have to go contact form 7 and add or edit any form. Below is the sample edit form where you can notice after installing plugin we got one hidden field option.

Create hidden fields what you like to track or capture. For example, you might want to add following fields:

  • Source
  • Medium
  • Campaign name

It’s import that each field that you add, you give it an ID. This is required for our plugin to be able to target that specific field when adding the tracking data. See the screenshot below, here we just add IDs that are the same as the field name.

As you build the form you will see the shortcodes added to the form.

Now, visit the plugin’s settings page, under the Settings menu in your WordPress dashboard choose Campaign Tracker. You will see there is tab specifically for Contact Form 7 (see below). The rest of the setup is the same as outlined above for all form plugins. Choose the form that you would like to start tracking and map the form fields to the various tracking data fields.

Related Articles

How to install gulp4

Best Free WordPress Hosting In 2022

How To Create a Full screen Overlay Navigation

Smooth Scrolling Effects with only CSS

Sticky Navigation Bar On Scroll Using JavaScript

Upgrade MySQL 5.7 to 8. on Ubuntu very easy step

Why all sites now require SSL (https)

Developer Diary

Share
Published by
Developer Diary

Recent Posts

Git Tag Cheat Sheet

Introduction Git tags are an essential feature of version control systems, offering a simple way…

3 months ago

Understanding Web Storage: Cookies, Local Storage

Introduction The methods that browsers employ to store data on a user's device are referred…

4 months ago

Setting up OpenVPN Access Server in Amazon VPC – AWS

Introduction A well-known open-source VPN technology, OpenVPN provides strong protection for both people and businesses.…

4 months ago

Enhance Error Tracking & Monitoring: Integrate Sentry with Node.js & Express.js

Introduction Integrating Sentry into a Node.js, Express.js, and MongoDB backend project significantly enhances error tracking…

4 months ago

Comparing Callbacks, Promises, and Async/Await in JavaScript

Introduction In the world of JavaScript development, efficiently managing asynchronous operations is essential. Asynchronous programming…

6 months ago

How To Secure Nginx with Let’s Encrypt on Ubuntu EC2 Instance

Introduction Let's Encrypt is a Certificate Authority (CA) that makes it simple to obtain and…

8 months ago