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. Prefilling an embedded form (Seamless)

2. Prefilling an embedded form (Iframe)

3. Prefilling values using a Url/public link

4. Tips and tricks


Prefilling values on an embedded form (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 values on an embedded form (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.
<iframe src="https://services.cognitoforms.com/f/M6vg3VoBY0-J5SMkPg?id=53" style="position:relative;width:100%;" frameborder="0" scrolling="yes" seamless="seamless" height="162" width="100%"></iframe>
<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:


Prefilling values using a 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.

Tips and tricks

A couple of things to keep in mind when prefilling your form data:

  • 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 straight 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"}]}
  • 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.

Printable View