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
Tags: contact form 7, jquery, PHP
Hi,
Thank you for your great work. This is very useful and I can see your demo is working perfectly fine. I am not sure what I am doing wrong. I have followed all steps but mine is not working. Also, when I add var val = $(“span.hiddendefault input”).val(); in js folder in any file I get syntax error massage for above line. Could you please help me getting this fixed. Thanks in advance.
Hi Ali, please can you give me a link to the site you are working on so I can see your page source and/or javascript files
Hi,
I’m using [dynamictext dynamictext-732 uneditable "CF7_URL"] in Contact Form 7. It is working fine, the url is showing up on the form, but the URL is not included in the submitted form I receive. Instead I get [dynamictext dynamictext-732 uneditable "CF7_URL"] in the form body. Do you know of a script or a tweak that can submit the URL with contact info.
Thanks
I checked the plugin documentation at http://wordpress.org/extend/plugins/contact-form-7-dynamic-text-extension/ it says that the shortcode to use is [dynamictext dynamicname "CF7_URL"] maybe try this?