In a previous post I described how to use URL parameters to auto populate input fields in a form on a WordPress site using the Contact Form 7 plugin. One of the comments I received asked whether the same technique can be used to set the default value of a CF7 select field. Here is one way in which this can be achieved, with the help of a bit of Javascript: -
1. Set up a WP query variable which will be used to pass data to the form containing the select by adding this code to your theme’s functions.php file: -
function parameter_queryvars( $qvars ) {
$qvars[] = ‘defaultvalue’;
return $qvars;
}
add_filter(‘query_vars’, ‘parameter_queryvars’ );
function echo_defaultvalue() {
global $wp_query;
if (isset($wp_query->query_vars['defaultvalue']))
{
print $wp_query->query_vars['defaultvalue'];
}
}
2. If you haven’t done so already, install the Contact Form 7 Dynamic Text Extension plugin.
3. Create a CF7 form containing a select field and a dynamic hidden input field into which the query variable will be passed: -
[select menu-nn id:test class:test-class "one" "two" "three" "four" "five"]
[dynamichidden hiddendefault "CF7_GET key='defaultvalue'"]
4. Add some Javascript code to the <head> section of the form page or your theme’s Javascript file. I’ve used jQuery in this case: -
var $ = jQuery.noConflict();
// use value of hidden CF7 input to set selected option in select field
$(document).ready(function(){
// get contents of hidden input; store in variable
var val = $(“span.hiddendefault input”).val();
// set the “selected” attribute for option with value equal to variable
$(‘select#test option[value=' + val + ']‘).attr(‘selected’, ‘selected’);
});
5. Send the value you want the select field to default to the form as follows: -
http://yoursite.com/form-with-select/?defaultvalue=two
6. Your select will now default to the value you pass to the page via the query variable.
View a demo here
See also: auto populate contact form 7 input fields with URL parameter
