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.

Tags: ,

23 Responses

  1. Lee says:

    Managed too accomplish the same kind of thing thanks too your guide. Thanks!

  2. Rob Smith says:

    Very useful guide, well written. I'd seen the dynamic text extension for Contact form 7 but you saved me a tonne of time figuring out how to pass URL parameters into the form. Thank you!

  3. William says:

    This is great! Though I implemented it and realized it only works for text fields and hidden fields. Any idea how to set a dropdown's default selection with this method?

  4. Jasmin says:

    I can't seem to get this function to work. I wonder if someone might be able to help? These are the steps that i took:-

    1. Added the above function code to the function.php page in WP and called my variable 'seating'

    2. Then created a form called 'seating enquiry' to which I added the dynamic field. The shortcode used was [dynamictext enquiry-seating "CF7_GET key='seating'"]

    3 The form page was then created and the shortcode [contact-form-7 id="6" title="seating-enquiry"] was used.

    4. A text link was created from my product seating page to the form page.
    Unfortuantely when the link is clicked the dynamic text field isn't auto populated with the name of my product page.

    Maybe I've overlooked something in the setup but am not too sure what. Any ideas or suggestions would be greatly appreciated.

    • Ant Cullen says:

      Hi Jasmin
      Have you loaded the jQuery javascript library and/or the javascript code on your page?

      • Ryan says:

        Hi Ant - I saw you responded to Jasmin about the installing of the jQuery Javascripts Library and/or the javascript code on your page..

        I am also having trouble with this and I am just a basic HTML/CSS guy.

        How do I add the jQuery javascript library? Does that go in the HTML file or within the functions.php file? I would appreciate your help! thanks

        Ryan

  5. Tom eagles says:

    Hi there is it possible to do this without having the parameter shown in the url?

    a good example of this is
    http://www.lightpoint.cz/jazykove-kurzy-skoly-light-point/

    they use the url tag course id is here

  6. Naresh says:

    hi.. i hav installed cf7 im building a link submission website wat i want is i hav to send the output of the form to home page as well as category page but not to email will u please help me..

  7. Great tutorial. What took you an hour, saved me an hour!

    Thanks.

  8. Woww!!!! Great tutorial. It's just what I was looking for a project I'm driving. THANKS A LOT!!!! Terrific

  9. Cltornes says:

    Hi
    Excelent tutorial. It really helped ma and was very easy.

    I just got one problem. If I add an ID to the string like this:

    [dynamictext enquiry-chalet id:amount "CF7_GET key='value1'"]

    Then it doesnt work any more. Is there a workaround for this? :)

  10. Nicola says:

    Thank you, you are a lifesaver!

  11. Martin says:

    Great tutorial, a real time saver!
    Just a quick question, what do I have to do in order to pass a value like "New Cars" or "Used cars"?
    Do I have to change something in the js or the functions.php file?
    Thanks!

  12. nfrost21 says:

    Trying to use this code to build a dynamic contact form. Can you help me understand what the following lines of code do?

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

    ...if I want to include multiple parameters:

    function parameter_queryvars( $qvars ) {
    $qvars[] = 'chalet_name';
    $qvars[] = 'chalet_file_name';
    $qvars[] = 'chalet_url';
    return $qvars;
    }

    ...do i need to create a separate 'echo_' function for each parameter.

    Thanks!

  13. Stefan Lesik says:

    Just what I was looking for - thanks! is it possible to auto populate more than one field? http://domainname.com/chalet-enquiry/?chalet=chaletname&address=chaletaddress? How do I do that?

  14. Chris says:

    Is it possible to add this tweak to a one page scrolling theme?
    So you click on the link, the page scrolls down to the contact-form and adds the value?

    Thanks in advance!

  15. I've been googling how to auto populate a field with java script through the URL string, I found this to be such an easier solution!! Contact Form 7 + Dynamic Text Extension did the job!! Thank you!!

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

NAME*:
WEBSITE:
COMMENT: