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. View a field’s internal name underneath the 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"}

Some field types, like Name fields and Address fields, contain sub-sections (First, Last, Middle Initial, etc.): {"Name:{"First":"John","Last":"Smith"},"Address":{"Line1":"1234 King Street","Line2":"Apt.1601","City":"Los Angeles","State":"California","PostalCode":"90210","Country":"United States"}}

Field types

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

Sections

  • Field types 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"}}}

Address fields

  • 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. Ex: {"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.

Time fields

  • To prefill a Date field set to the Time type, use a specific format (“HH-MM-SS”) to denote your time: {"Time":"12:30:00"}

Number fields

  • When prefilling a form via the Iframe embed, number field values should be passed without quotes. Ex: <script> Cognito.prefill({ "Name": { "First" : "John", "Last": "Smith" },"Number": 1});</script>

  • If a Number field contains numbers with commas, you will need to set the Number field type to Decimal or Percent (rather than Integer) when passing the data to a Number field on a different 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. Copy your form’s Iframe embed code (located in the Publish Code section of the Publish page).
  2. Add a 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 filling in a Name field inside the Contact Information section. Because a Name field contains different sections (First, Last, Middle, etc.), those sections are each 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 form. To do this:

  1. Prefill each Iframe as outlined in the steps above.
  2. Modify each prefill code to pass in multiple Iframes. For example, if you’re embedding two Iframes, include a line at the top of the first Iframe embed: var frame1 = document.getElementsByTagName('iframe')[0]; var frame2 = document.getElementsByTagName('iframe')[1];
  3. Include the frame number (frame1, frame 2, etc.) within the prefill code of each embedded Iframe. Once you’re finished, the first Iframe embed code should look something like this:
<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];
var frame4 = document.getElementsByTagName('iframe')[3];
  1. Begin with either your webpage’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, insert ?entry=
  3. Include your prefill code between curly brackets: http://mysite.com/contactus?entry={"Name":{"First":"John","Last":"Smith"},"Address":{"Line1":"1234 King Street","Line2":"Apt.1601","City":"Los Angeles","State":"California","PostalCode":"90210","Country":"United States"}}

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 ?entry=, 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.