How to Create a Dynamic WordPress Contact Form

Say you want to allow users to contact you, and you want to provide some context for their inquiry. For example, you might want to know where they came from before they sent you their message. You can achieve this with a combination of Contact Form 7 and my plugin, Contact Form 7 Dynamic Text…

Written by

Chris Mavricos

Published on

BlogCode · How To · WordPress Tutorials

Say you want to allow users to contact you, and you want to provide some context for their inquiry. For example, you might want to know where they came from before they sent you their message. You can achieve this with a combination of Contact Form 7 and my plugin, Contact Form 7 Dynamic Text Extension.

This tutorial assumes you have already installed the Contact Form 7 and Dynamic Text Extension plugins.

The Contact Page

First thing you’ll need is a Contact Page. Create a new WordPress page and call it something exciting like “Contact”.

The Contact Form

Next, you’ll need to create a Contact Form. Navigate to Contact > Edit in your Control Panel. You’ll get a default form with your basic fields: Name, Email, Subject, Message.

To provide some context to the form, we’ll add a new field. We’ll call it “Context”, but you could call it something more specific (like “Product” or “URL” or whatever). To do this, we add a Dynamic Text Field that will pull the context from the GET variables in the URL (we’ll set those up in the next step). The GET variable will be called “context”.

You can use the WPCF7 Tag Generator to create the Dynamic Text field.

Name contact-form-context
id contact-form-context
Make this field uneditable checked
Keeps the user from changing this on you
Dynamic Value CF7_GET key=”context”
This tells the form to grab the context GET variable from the URL.

The tag ends up looking like this:

[dynamictext contact-form-context id:contact-form-context uneditable "CF7_GET key='context'"]

Take the shortcode and place it in the Form Text with a label like “Context”

<p>Context <br/>
[dynamictext contact-form-context id:contact-form-context uneditable "CF7_GET key='context'" ]
</p>

Save your form. Copy the shortcode it generates for you and place it in the text of the Contact page you created, for example (surround this with square brackets []):

contact-form 1 "Contact form 1" 

Linking to the Contact Page

Now all that’s left is to pass the context variable to the Contact Form. Say you have a bunch of posts (or pages) and when a user contacts you, you want to know what page they clicked “contact” on.

For each page you want this on, you just create a link to the Contact page with the proper variable set in the URL. Use the following format:

<?php 

echo '<a href="http://mysite.com/contact?context='. urlencode("My Page About Aardvarks").'" >Contact Us</a>'; 

?>

Where contact is the slug of your contact page, context is the key of the variable you set the contact form to pick up in the Dynamic Value contact form tag field (i.e. CF7_GET key=’context’), and

more generally, to always pass the title of the post:

<?php

global $post;
echo '<a href="http://mysite.com/contact?context='.urlencode(get_the_title($post->ID)) .'">Contact Us</a>';

?>

Now when a user clicks the link, they’ll be taken to your contact form with the context field pre-populated. Awesome!

Here’s an example, context set to “how-to-create-a-dynamic-wordpress-contact-form”:
Contact Me!

An Alternate Solution: Contact Form on each page

If you’d rather put the contact form on each page, you can do that too! You only need to create one form, but for your dynamic text field you just use the shortcode CF7_get_post_var key='title' instead of the CF7_GET shortcode.

Want to set the URL instead of the post title? Just use the shortcode CF7_URL instead of CF7_get_post_var key=title.

Chris Mavricos

Hi, I'm Chris. I'm a web developer and founder of SevenSpark located in Boulder, CO. I've been developing websites since 2004, and have extensive experience in WordPress theme, plugin, and custom development over the last 15+ years.