Contact Form 7: Set the Default Value for Select Fields Using the URL

Contact Form 7 and Default Select from URL VariableContact Form 7 is my favorite contact form plugin for WordPress. Not only is it well-documented on the developer’s web site,  but it offers a plethora of valuable features that have made it my go-to contact form. One of those features is Contact Form 7’s ability to use variables in the URL ($_GET variables) to set the default value for email form fields.

Contact Form 7’s documentation explains in detail how to set the default value of text fields to $_GET variables passed in the URL; however, as of this writing, it doesn’t tell you that you can also set the default value of a select field by passing the value of the field in the URL.

The issue came up with a client whose site contained a fairly extensive employee page. Each employee’s bio included a series of contact information including an email link. When I originally built the page, I used javascript email-masking to make sure the email addresses weren’t easily available to spam bots, but that approach meant that the employees’ email addresses were visible to humans with just a click. Contact Form 7 makes it possible for users to email each employee without the employee’s email address being visible to the end user until the employee responds, and eliminates email addresses from source code completely. Not only that, but it was more time-consuming–and thus more costly for the client–for me to maintain the page with javascript email-masking. With Contact Form 7,  I can use simple hyperlinks to the main contact form on the employee page, and my Contact Form 7 contact form grabs the value for the recipient of the email from the URL.

How It’s Done

The first step is building the select field on the “Form” tab of Contact Form 7. For this example, I’ll use three employees and three email addresses: Employee One, at employeeone@yourdomain.com, Employee Two, at employeetwo@yourdomain.com, and Employee Three, at employeethree@yourdomain.com. The form field would look like this:

[select* the-recipient default:get "Employee One|employeeone@yourdomain.com" "Employee Two|employeetwo@yourdomain.com" "Employee Three|employeethree@yourdomain.com"]

You can name the select field whatever you want; for the purposes of this example, I used “the-recipient.” The “default:get” tells Contact Form 7 that it should get the default value of the select field from the URL. (If you wanted to use a form with a $_POST variable instead of hyperlink with a $_GET variable, it would be “default:post”.)

The Trick

The undocumented part–and the trick to making “default:get” work with a select field–is this: to set the default value of a select field, you must pass the value of the field, not the index, to Contact Form 7.

So, let’s say you want to create a link to your contact form, which is on a page called “/contact/” at yourdomain.com, selecting Employee Two as the recipient.

The URL for the hyperlink would be:

http://yourdomain.com/contact/?the-recipient=Employee%20Two

Notice that I replaced the space in “Employee Two” with the URL code for a space, “%20”. If you don’t know all the URL codes, there are numerous online URL encoding sites where you can enter a character string and the site will give you the correctly encoded, URL-safe version to use in the links, so the values for the select fields don’t have to be limited character-wise.

Of course, you can pass additional values to Contact Form 7 using the URL for $_GET variables or a form for $_POST variables, too.