Cognito Forms logo

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.

1. The basics

2. Prefilling embedded forms (Seamless)

3. Prefilling embedded forms (Iframe)

4. Prefilling forms via Url/public link


The basics

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 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 idea 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"}}

When prefilling 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"}]}

Note: 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":[{},{},{}]}

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

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

When prefilling a Date field, you'll need to use a specific format ("YYYY-MM-DD") to denote your date:

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

When specifying a field to prefill, you'll need to reference the internal name of that field, which is usually just the field label without spaces and special characters. To view the internal names of your fields:

  • Open your form builder and enable Developer mode in the form settings.
  • Check the box "Customize Field Names?"
  • Now, you'll be able the view a field's internal name underneath its label in the field settings.

With the Redirect Url option in your field settings, you have the ability to prefill one Cognito Form based on data from another Cognito Form. Please note:

  • When sending over numbers with commas, set the Number field type to Decimal or Percent rather than Integer. This will ensure that the Number field gets prefilled correctly.

Prefilling embedded forms (Seamless)

  • Begin with your form's Seamless embed code, which is found in the Publish Code section of the Publish page:

  • 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>
  • 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. When filling in our information, we simply need the field label in quotations ("Name"), followed by a colon and the information that you want to prefill the field with (also in quotations). Because a Name field has several different sections (such as First, Last, and Middle), those sections will need to be contained in their own set of curly brackets.
  • The embedded form will now prefill the name field upon loading:


Prefilling embedded forms (Iframe)

  • Begin with your form's Iframe embed code, which is found in the Publish Code section of the Publish page:

  • 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>
  • 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. When filling in our information, we simply need the field label in quotations ("Name"), followed by a colon and the information that you want to prefill the field with (also in quotations). Because a Name field has several different sections (such as First, Last, and Middle), those sections will need to be contained in their own set of curly brackets.
  • 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:

  • Prefill each Iframe as outlined in the steps above.
  • Next, modify each prefill code to pass in multiple Iframes. If you're embedding two forms, the first prefill code should look 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, just include additional frames like so:

var frame1 = document.getElementsByTagName('iframe')[0];
var frame2 = document.getElementsByTagName('iframe')[1];
var frame3 = document.getElementsByTagName('iframe')[2];

Prefilling forms via Url/public link

  • At the end of your website's URL or your form's public link (located in the Share a link section on the Publish page), add the "?entry" parameter, as well as some curly brackets. ​
http://mysite.com/contactus?entry={"Address":{"City":"Los Angeles","State":"California", "PostalCode": "90210","Country":"United States"}}
  • In between the curly brackets, you can specify the fields you want to prefill and what exactly to prefill them with. In this example, we're going to fill in an address field. Because an Address field consists of several different sections (including City, State, and Postal Code, and Country), those sections will need to be contained in their own set of curly brackets.

As a more advanced feature, you can also transfer data with the post request method when embedding forms on a website. For more information on how to do this, or general questions about prefilling fields, please submit a help request and we'd be happy to assist you.

Printable View