Posts Tagged ‘PHP’

Contact Form 7 Default Select Value using URL Query Variable

Posted on 37 Comments

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 to which 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

Auto Populate Contact Form 7 Input Fields with URL Parameter

I've just finished a WordPress development project which required fields in contact forms to be auto-populated with values based on the page from which the form page was called. In this case I was using the Contact Form 7 plugin. It's fairly simple to set default input field values with Contact Form 7 but assigning values dynamically based on context proved to be a bit more of a challenge. Needless to say though, a bit of hacking and an hour so on Google yielded a satisfactory result.

The site allows users to browse from a selection of ski chalets and submit a reservation enquiry. First of all I had to work out how to pass the name of the chalet being enquired about to the contact form page. I found this post which told me how to do this using a bit of extra code in the theme's functions.php file as follows:


// chalet name for enquiry form
function parameter_queryvars( $qvars ) {
    $qvars[] = 'chalet';
    return $qvars;
}
add_filter('query_vars', 'parameter_queryvars' );

function echo_chalet() {
    global $wp_query;
        if (isset($wp_query->query_vars['chalet']))
        {
            print $wp_query->query_vars['chalet'];
        }
}

This sets up a new WordPress query variable called "chalet", allowing the chalet enquiry form page to be called as follows:

http://domainname.com/chalet-enquiry/?chalet=chaletname

Next, how to insert the value of "chaletname" into the relevant field on the form? Some unsuccessful hacking of Contact Form 7's text.php module followed by further Googling led me to the Contact Form 7 Dynamic Text Extension plugin which is designed specifically to add this capability to Contact Form 7. The plugin creates a new field type tag for the form called "dynamictext", which allowed me to create an input field in the form to accept the "chaletname" variable passed to the page as follows:


[dynamictext enquiry-chalet "CF7_GET key='chalet'"]

It works a treat and even better allowed me to leave the Contact Form 7 core code unhacked.

View a demo here

Thanks to WordPress Warrior for the functions.php extension and Sevenspark for the plugin.