Prefilling a form

Cognito Forms can use properly formatted JSON to support prefilling form data. You can prefill form data when either embedding your form (via Seamless or Iframe embed), or using the public link to your form. You can even use the Redirect Url option to prefill one Cognito Form based on data from another Cognito Form.

Syntax

Getting started

When targeting a field to prefill, you need to reference the internal name of that field, not the field label. Enabling Developer mode on your form is an easy way to view the internal field names:

  1. Open your form builder and enable Developer mode in the form settings.
  2. Check the box Customize Field Names?
  3. You can now view a field’s internal name underneath its label in the field settings.

Prefilling a simple Textbox field will look something like this: {"Textbox":"Text"}

To prefill multiple fields, separate them with commas: {"Textbox":"Text","Email":"email@address.com","Website":"cognitoforms.com"}

Field types

When prefilling a form, certain field types require special formatting:

Sections

Some fields, like the Name field and the Address field, have smaller sections within them. These fields need to be contained in their own sets of curly brackets.

{"Name":{"First":"Bart","Last":"Simpson"}}

This same principle applies to fields that are inside of sections:

{"SectionTitle":{"Name":{"First":"Bart","Last":"Simpson"}}}

In the Address field, use “Postal Code” instead of “Zip Code” when prefilling values. Also, if an Address field is set to required, make sure to specify the country as well, or the user will receive a validation error upon submitting.

{"Address":{"Line1":"1234 King Street","Line2":"Apt.1601","City":"Los Angeles","State":"California","PostalCode":"90210","Country":"United States"}}

Repeating sections

To prefill a repeating section/table field, use the name of your repeating section followed by a set of square brackets. Then, in between curly brackets, prefill your fields as normal. If you want to prefill multiple repeating sections, separate each item with a comma:

{"RepeatingSectionName":[{"Textbox":"Stuff"},{"Textbox":"More stuff"}]}

If you’re prefilling any fields on your form, you must prefill your repeating section or table as well to ensure that the default number of sections appear. To do this, just prefill your repeating section/table with the correct number of default sections (the example below has 3):

{"RepeatingSectionName":[{},{},{}]}

Choice fields

To prefill a Choice field set to Checkboxes type, put the prefilled choice options into an array between square brackets:

{"ChoiceField":["First Choice","Second Choice"]}

Date fields

To prefill a Date field, use a specific format (“YYYY-MM-DD”) to denote your date:

{"Date": "2016-08-31"}

When passing data from a Date field on one form directly to a Date field on another form, you need to first create a Calculation field that targets the Date field and converts the date to the correct format:

=Date.ToString("yyyy-MM-dd")

You can then target the Calculation field to pass the data over to the other form.

Number fields

When passing data from a Number field on one form to a Number field on another form, and your Number field contains numbers with commas, you will need to set the Number field type to Decimal or Percent rather than Integer to correctly prefill the Number field on the other form.

URL encoding

We use commas, single quotes, and curly brackets in prefill links, which don’t always translate well in all browsers. Using the HTML encodings instead should provide you with a seamless link no matter what browser you’re in.

Character HTML Encoding
{ %7B
} %7D
%22
, %2C
[space] +

Seamless embed

  1. Begin with your form’s Seamless embed code, which is found in the Publish Code section of the Publish page.
  2. Next, add a parameter named “entry” beside the id label, along with some curly brackets. This parameter will help send the data to populate your form in JSON format: <div class="cognito"> <script src="https://services.cognitoforms.com/yourforminfo"></script> <script>Cognito.load("forms", { id: "27", entry: { "Name": { "First": "Bart", "Last": "Simpson" } } });</script> </div>
  3. In between the curly brackets, specify the fields you want to prefill and what exactly to prefill them with. In the above example, the Name field is filled in (“Bart Simpson”). Because a Name field has several different sections (such as First, Last, and Middle), those sections are contained in their own set of curly brackets.
  4. The embedded form will now prefill the Name field upon loading.

Prefilling a form via the Seamless embed code.

Iframe embed

  1. Begin with your form’s Iframe embed code, which is found in the Publish Code section of the Publish page:
  2. Next, add a short script underneath your code to include your prefill information: <script src="https://services.cognitoforms.com/scripts/embed.js"></script><script> Cognito.prefill({ "ContactInformation": { "Name": { "First" : "Billy" }}});</script>

  3. In between the curly brackets, specify the fields you want to prefill and what exactly to prefill them with. In this example, we’re going to fill in a Name field in the Contact Information section. Because a Name field has several different sections (such as First, Last, and Middle), those sections are contained in their own set of curly brackets.

  4. The embedded form will now prefill the name field upon loading.

If you have more than one Iframe embedded on the same webpage, you’ll need some additional script to prefill each specific form. To do this, first prefill each Iframe as outlined in the steps above.

Next, modify each prefill code to pass in multiple Iframes. For example, if you’re embedding two forms, the first embed code should include a line (var frame1, var frame2, etc.) for each form. The prefill code should also include the frame number (frame1) within the prefill code itself:

<script> 
var frame1 = document.getElementsByTagName('iframe')[0];
var frame2 = document.getElementsByTagName('iframe')[1];
      Cognito.prefill({"Name": { "First" : "Billy", "Last": "Bob" }}, frame1); 
</script>

If you’re embedding more than two forms, continue to include additional frames like so:

var frame1 = document.getElementsByTagName('iframe')[0];
var frame2 = document.getElementsByTagName('iframe')[1];
var frame3 = document.getElementsByTagName('iframe')[2];
  1. Begin with either your web page’s Url, or your form’s public link (found in the Share a link section on the Publish page.)
  2. At the end of your Url/public link, add the ?entry=, as well as some curly brackets to begin your prefill code: http://mysite.com/contactus?entry={"Address":{"City":"Los Angeles","State":"California", "PostalCode": "90210","Country":"United States"}}
  3. In between the curly brackets, you can specify the fields you want to prefill and what exactly to prefill them with. In the above example, an Address field is prefilled. Because an Address field consists of several different sections (including City, State, and Postal Code, and Country), those sections are contained in their own set of curly brackets.

Form to form

You have the ability to prefill a form based on the data entered from a different form. To begin:

  1. Open Form 1 and go to Submission Settings in the builder. Under Confirmation Options, select Redirect Url.
  2. Copy the public link of your Form 2 (the one you want to prefill) and paste it into the first form’s Redirect Url option. At the end of the Url, insert the “?entry” parameter, as well as some curly brackets: https://cognitoforms.com/YourOrg/Form2?entry={}
  3. In between the curly brackets, specify the fields you want to prefill. In this case, we’re going to prefill the first and last names from a Name field. However, instead of static values like “John” and “Smith”, we need to insert field tokens that will transfer whatever name someone enters on Form 1: https://cognitoforms.com/YourOrg/Form2?entry={"Name":{"First":"Name.First","Last":"Name.Last"}}
  4. Now, when you fill out the Name field on the first form and press Submit, it automatically redirects to the second form with the information already filled in:

Prefilling a form based on the data entered from a different form.