Pass Form Data from One Form to Another Using Querystrings

MWPE_XZ3zf_NKycOvvcqkLrT1GXm5bh1bq9_JmHhFgODkjYhJDgq8hwdJAwqMDhsmeHfoB-Gd0Zr7pEKCEaN0QCiyE4=s0Ever wish you could pass form data from one form to another form? Saving your users time sounds like a great idea! How about being able to directly associate form submissions with the referring source that brought the user to your form? Google Analytics might be able to show you big picture traffic sources and click events on a submit button, but what if you want to directly associate form submissions to a traffic source? Stick around for a few minutes and learn how to unlock these features and more using querysting variables to pass form data automatically with Ninja Forms!

The Mighty Querystring

Using a querystring to pass form data to a Ninja Form isn’t a new thing to version 3.0. We’ve talked about what querystrings are and how they can be used previously for earlier versions of Ninja Forms.

If you’re a veteran using querystrings, you can skip right down to the section on How to Pass Form Data from Another Form. We’ve only added functionality, so everything you already know still works as it always has.

If you’re wondering what the heck a querystring is or why you’d want to use one, stick with me for a minute!

What is a Querystring?

When you click on a URL or enter a URL into a browser’s address bar, your browser sends a request to the server hosting that address, and the host server responds with the content of the page that corresponds to that URL. You can think of a querystring as data piggybacking on the URL being passed to the host server. A querystring variable takes this form:

?key=value

…and would look like this in a URL:

https://www.examplesite.com/examplepage1/?key=value

You can even get fancy and pass multiple bits of data by stringing multiple variables together like so:

?key=value&key=value

The key/value pair is the functional part of the querystring that passes the data along and defines where it should go. Let’s look at an example of how they can be used!

A Querystring Example

Say you’ve made some Facebook adverts and want to see every form submission that results from a user that’s come from your Facebook ad. It’s simple:

  1. Append the querystring variable ?source=facebook to your Facebook ad link (I’ve selected this specific key and value arbitrarily, you can change them so long as you remain consistent).
  2. Add a hidden field to your form. Open that field’s setting drawer and see the space there for a Default Value. Name it {source}.

pass form data with querystrings hidden field example

That’s all there is to it. When the user clicks the link in the Facebook ad, the hidden field will be passed the value of the source key in the URL, which in this example we’ve set to “facebook”. When you view the submission in your database, you’ll see that value!

This is only one example of how to pass data to a form from an outside source. Let’s look now at how to pass data from one form to another!

How to Pass Form Data from Another Form

As an example, let’s say we have a short form that collects an email address (Form A), then redirects the user to a longer form that also requires an email address in addition to other information (Form B). Since they’ve already given their email once in Form A, we don’t want to make them do it again in Form B.

1) In Form B, open the email field settings drawer and find the Default Value space under the Advanced section. Assign the field a default value of {key} , or any other key name of your choice surrounded by { }.

pass form data with default value {key}

This field is now ready to be passed the value of {key}, which we’ll assign in Form A now.

2) In Form A, go to the Emails and Actions tab of the form and add a redirect action. In the URL space of the redirect action enter the URL of Form B’s page, followed by the key you entered in step 1, followed by the merge tag for the email field. You can add the merge tag for the form’s email field by clicking the merge tag icon on the right side of the URL field space, and selecting the email field from the list! My example now looks like this:

pass form data from another form; redirect action

That’s all there is to it! You can see it in action below:

populate a form gif

Bonus!

Cool Easter Egg for those of you that have made it this far! When you’re testing a form, add the following querystring to the end of the page’s URL to autopopulate every field of the form! You’re welcome πŸ˜€

?ninja_forms_test_values=1

What clever uses of querystring variables have you found for your forms? I’d love to hear what you’ve come up with!

Pass data from one form to another with Ninja Forms? Yes you can!Click To Tweet