How to Automatically Pass Form Data to Another Form

Last Update: November 17, 2016

We know how to prepopulate a JotForm Form via URL parameters as mentioned in this guide. Now how do we prepopulate another form from another form's data?

Here's a guide on how to redirect the user to another form and prepopulate the second form with the previous form's data. You can follow the steps below.

Step 1

First, I will setup two forms, namely "Form 1" and "Form 2".

Form 1: https://form.jotform.com/53541423066955 

Form 2: https://form.jotform.com/53542179889977 

 

Step 2

The two forms are identical and we are showing different input fields, this is to demonstrate how each field can be populated.

 

Step 3

The idea is that we want to have Form 1's data to be prepopulated to Form 2 after clicking the submit button, we will add the prepopulated URL of Form 2 in an email alert and in the "Thank You" page for you to see how it works. You can try filling out my Form 1 and see how it looks like.

Here's the final prepopulated Form 2 URL that I have:

https://form.jotform.com/53542179889977?fullName1[first]={fullName:first}&fullName1[last]={fullName:last}&email2={email}&textBox8={textBox}&textArea7={textArea}&dropDown4={dropDown}&radioButton5={radioButton}&checkBox6={checkBox:0},{checkBox:1},{checkBox:2}

 

This is how Form 2 URL is structured:

Blue highlight: Form 2's direct link

Magenta highlight:

"?" - We will start the prepopulation by adding first this symbol

"=" - To assign a value on a form field

"&" - To  add more than one form field to be prepopulated

Yellow highlight: This is the field name from Form 2. You can get the field name by following these guides:

a.) Step 3 on this link Prepopulating fields to your JotForm via URL parameters

b.) How to find field IDs and Names

Green highlight: This is the field name from Form 1 but wrapped in {}.

 

Step 4

To be more specific, here's how each part of the URL works: 

For form fields with single input or single text box, let's say email field, text box, text area, radio button, drop down, this is how they are structured:

 

Email field:

email2={email}

This states that you want the email field in Form 2 (left side) to be filled out using the email input from Form 1 (right side).

 

Radio button field:

radioButton5={radioButton} 

This states that you want to select the radio button in Form 2 (left side) to be filled out using the selected radio button in Form 1 (right side). Noticed that after the "=" sign, field names are wrapped in {}, this means we are getting the field value from Form 1. 

 

This is quite different for form fields with multiple text boxes or options, e.g. Full Name field and for Check boxes.

Full Name field having two text boxes, text box 1 is for the First name and text box 2 is for the Last name. If you check the field name in the HTML, you will see how the name attribute is structured. Below is a sample code for the first name.

<input class="form-textbox" type="text" size="10" name="q1_fullName[first]" id="first_1">

 

In our prepopulated Form 2 URL, this is how it looks like when prepopulating the first and last names:

First Name:

fullName1[first]={fullName:first} 

Last Name:

fullName1[last]={fullName:last}

Noticed that the right side part of the parameter is using ":" (colon), this is to specify which text box we want to get the value from the full name field, for first name use ":first", for last name use ":last".

 

For Check boxes, this is how we get the value from Form 1:

checkBox6={checkBox:0},{checkBox:1},{checkBox:2}

The right side shows using ":" (colon) again, but we will use numbers after it, these are indexes to identify the check boxes. I have 3 check box in my form which means I need to have indexes "0", "1" and "2". You can find this under the Properties window of the check box field. Separate each of them using a comma. Here's how to find them:

In the Properties wizard, click the "Advanced" tab and click "Field Details":

Here you can see the field unique name and field IDs:

 

 

Step 5 

Now I will add our custom prepopulated Form 2 URL in our email template (either on your email notification or autoresponder email) to have a copy of it in the emails, and in the "Thank You" page so that user will be redirected.

Here's a screenshot to where I am adding it to my autoresponder.

 

 In the insert/edit link window, paste the prepopulated URL here:

 

I will also add it in my "Thank You" URL to automatically redirect the user to Form 2. Here's a guide link that you can refer to know more about setting up this part.

Click the "Thank You" button:

Click the "Redirect to external link" option. Paste the custom Form 2 URL in this part and save the changes.

 

 

You now have an automated way to pass Form 1's data to Form 2 directly using its URL, you also have that saved in your email notification/autoresponder.

For questions, feel free to leave us a comment below.


3 Comments...


   
iiilucky1iii (March 09, 2016 at 04:22 PM)

I am having some major issues trying to get calculated fields to pre-populate. I have two forms; form #1 is a Purchase Order (https://form.jotform.com/60675198097166) this form will be filled out by my sales guys and then the salesman can click a switch field (on form #1) to "Request A Quality Control Inspection" upon turning the switch on, the form will trigger a condition to send out an email notification to said QC inspector with a Pre-Populated form "Form #2" (https://form.jotform.com/60676257886169) with the original Purchase Order information (hiding the costs, etc.) so that the QC inspector has the listed items to go and inspect.

For whatever reason only my first item's information is pre-populating...not the remaining 5 items. Please help if you can...I know it is confusing how I explained it! :)

-Amanda

View Answer


   
santanaw (June 05, 2016 at 04:22 PM)

In regards to this, can I pass data to a jotform form even if I embed the form on my webpage?

View Answer


   
cynthia (November 28, 2016 at 04:32 AM)

great


Send Comment