Get Value From URL Parameter To Pre-fill Contact Form 7

Updated March 4th, 2020
Updated March 4th, 2020
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print

Below you will find Javascript code that will help you get a value from a URL parameter and input it into a Contact Form 7 field. This works for any contact form input field, not just Contact Form 7.

There are 4 things you need to do to make this code work for you. First, you have to place this Javascript on form page. You can paste it right into the HTML editor in WordPress below the form or add it to a specific page using the functions.php file.

Then you need to update 3 things in the script:

  1. VARIABLE
  2. PARAMETER
  3. INPUT-FIELD-ID

These are explained in the video, so be sure to watch it closely.

UPDATE

There are circumstances when the code above will pre-fill “undefined” into the form field if the parameter the code is looking for is not in the URL. The updated code below fixes that issue.

The addition is the “if” statement at the bottom. The code inside that if statement will only run if VARIABLE has a value.

<script type="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var VARIABLE = getUrlParameter('PARAMETER');

if (VARIABLE != null) {
     document.getElementById('INPUT-FIELD-ID').value = VARIABLE;
}

</script>

More Contact Form 7 Tutorials you may want to check out after this one:

Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Responses

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

  1. Hi i try you code and working fine but its not take my all value in inpur field what i do now for this something get split my data but input value is report title and its long lenght and when i get in contact form 7 field its show only half data where is issue can you give me idea ??

    1. If I understand, the URL parameter is being put into your form properly, but the title is so long that only have of it shows in the input field. Is that correct?

  2. I also get an “Uncaught SyntaxError: Unexpected identifier error” from the browser inspect window. Test was successful with alert (‘I am here’);

  3. I tried the updated version, everything works as described except, i stll get the undefined in text fields if the url is written with out parameters.

    ex.
    url.com/form = Field message is: undefined

    url.com/form/?message= = Field message is: empty

    url.com/form/?message=this%20is%20my%20note =Field message is: this is my note

    Can this work with out parameter in the url

    1. Hi Steve,

      Yes, it should work just fine without parameters in the URL.

      If when you add a parameter to the URL it works as it should then there is an error in the if statement that detects whether the variables have a value. Double check that the VARIABLE, PARAMETER and INPUT-FIELD-ID are correct in this part of the code.

      var VARIABLE = getUrlParameter(‘PARAMETER’);

      if (VARIABLE != null) {
      document.getElementById(‘INPUT-FIELD-ID’).value = VARIABLE;
      }

  4. Thanks Bjorn for the tips!
    I tried pre-populating a dropdown box using this method but it doesn’t work.
    Did I make a mistake, or does the method only work for textboxes (number, text), and not for selections (dropdown, radio, checkbox) ?

    Any advice on how to pre-fill selections of pre-defined options (dropdown, radio, checkbox)?

  5. Turns out the method does work with selections.
    I happen to make the mistake of using the same name for some PARAMETER = VARIABLE. Thanks!

  6. The code works when the URL replaces SPACE with %20, but fails when it uses +

    Name = Jake Smith
    mydomain.com/?name=Jake%20Smith -> works
    mydomain.com/?name=Jake+Smith -> fails

    Any advice on how to make it work with + to represent SPACE ?

    I’m asking because I’m using CF7 redirection plugin which automatically replaces SPACE with +
    https://wordpress.org/plugins/wpcf7-redirect/

WPLearningLab