Cognito Forms – How to Pre-fill Field with Query Parameter

cognito-forms

I'd like to pass a query parameter to the form so that it pre-fills at least one of the fields.

Is this possible when embedding on a website?

Best Answer

I am a developer for Cognito Forms.

You can pre-fill select fields on your form by modifying the embed code that you place on your website.

First off lets start with your normal embed code:

<div class="cognito">
<script src="https://services.cognitoforms.com/include/required"></script>
<script src="https://services.cognitoforms.com/session/script/iibc3e48-82t9-4642-b097-dp442bc9d123"></script>
<script>Cognito.load("forms", { id: "1" });</script>
</div>

We will be adding new code to the line that contains the script tag:

<script>Cognito.load("forms", { id: "1" });</script>

We will be pre-filling a name field, by targeting the field by label name, in this case "Name":

<script>Cognito.load("forms", { id: "1", entry: {Name: {First: "John", Last: "Smith" } });</script>

We are targeting the field "Name" and we are setting the value for "First" to John, and the value for "Last" to smith.

Once added your new embed code will look like this:

<div class="cognito">
    <script src="https://services.cognitoforms.com/include/required"></script>
    <script src="https://services.cognitoforms.com/session/script/iibc3e48-82t9-4642-b097-dp442bc9d123"></script>
    <script>Cognito.load("forms", { id: "1", entry: {Name: {First: "John", Last: "Smith" } });</script>
    </div>

The Name field is not the only field that can be pre-filled. You can use this method on any of our other fields, with the exception of the File Upload field.

Related Topic