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
.