How to Autofill Forms by Passing Submission Data to the Thank You Page

Learn to use the "Pass submission data to the thank you page" setting in your Forms to autofill a second Form.

In this article:

• What does the "pass submission data to the thank you page" setting do?
• How to set up autofill forms with custom coding
• Step 1. Enable pass submission data
• Step 2. Add custom code to your page 

What does the "pass submission data to the thank you page" setting do?

Pass submission data to the thank you page is a great feature for those with developer experience to display data submitted (e.g., name and email) on the thank you page by enabling this feature with custom code. 

Where is this feature located?

This feature is made possible with the After Submission settings in Forms.

Learn about the Form After Submission settings.

In this guide, we show you how to use this feature to autofill a second form after the initial form is submitted.

How to set up autofill forms with custom coding

Are you setting up a form to lead to another form?

Perhaps you want your users to complete a simple form submission before asking more detailed questions.

Or, maybe you want your users to complete a form before getting access to your application.

This guide will help you create a seamless user experience by auto-filling the second form with the name and email submitted in the first form.

What does this setup look like?

With this setup, your users will be redirected to an auto-filled form after submitting the first form.

The second form will autofill their name and email by pulling the data from the first form submission to create a frictionless experience for your users:

To accomplish this setup, there are two crucial steps: 

• enable pass submission data
• add custom code to your page

Before setting up this configuration, you will first need to:

• Create your Forms
• Create your Pages

For the purpose of this guide, we will be creating two forms and two pages (one form per page).

If you have already prepared your landing pages with your forms then continue to the first step to begin setting up your autofill forms.

Step 1. Enable pass submission data

In this step, enable pass submission data for the first form your users will submit.

First, enable "Send the contact to a custom thank you page". Your "custom thank you page" will be the second page containing the second form:

• Open the Marketing tab from the Dashboard.
• Click Forms.
• Select the first Form your users will complete.
• Navigate to the After Submission settings.
• Enable Send the contact to a custom thank you page.
• Select the second page with your second form from the dropdown:

Then, enable "Pass submission data to the thank you page":

Step 2. Add custom code to your page

After enabling the After Submission settings, it is now time to add custom code to your second page to enable the autofill.

This step will vary depending on the editor used to build your pages. Click the editor used to create your page and learn how to add the custom code to your specific editor:

• Kajabi Pages
• Premier

For this step, you will need to copy and paste the Javascript code below to the second page containing the form you wish to autofill:

<script>
const queryString = window.location.search; //get the URL of the page

const urlParams = new URLSearchParams(queryString); //process the URL so you can pick out the parameters inside

const nameParam = urlParams.get('name') //get the name parameter inside the URL

const emailParam = urlParams.get('email') //get the email parameter inside the URL

var name =nameParam;
var email =emailParam;

var x = document.getElementById("form_submission_name"); //get the Name field of the form
x.value = name; //autofill name field with the value we got from the URL
var y = document.getElementById("form_submission_email"); //get the Email field of the form
y.value =email; //autofill email field with the value we got from the URL
</script>

Kajabi Pages

With Kajabi Pages, you can add the custom code directly from your page editor!

First, copy the custom code above.

Then, navigate to your Kajabi account.

• Open the Website tab from the Dashboard.
• Click Pages.
• Select the second page containing the form you want autofilled.
• Then, click Settings in the editor.
• Open Custom Code.
• Paste the Javascript code into the Javascript box.
• Click Save to keep and apply your changes:

After entering and saving your custom code onto your page, your set up is complete! 

When a visitor completes and submits the first form, the second form will autofill with their name and email from the information submitted in the first form.

Premier

If you are using Premier, you will need access to the Code Editor only available with the Pro Plan or Kajabi Access. Check out kajabi.com/pricing to learn more about the features available with your pricing plan.

First, copy the entire custom code above (including the opening and closing <script> tags; <script> and </script>).

Then, navigate to your Kajabi account to access the Code Editor for your page built with Premier. Learn to access the code editor for your page.

In the code editor, add the custom code to your page template:

• Open the Templates folder.
• Select the index.liquid file.
• Scroll to the bottom of the file.
• Place your cursor before the closing body tag (i.e., </body>).
• Click the enter key on your keyboard to create an empty line.
• Paste your custom Javascript code into the line directly above the closing body tag (i.e., </body>). 
• Click Save to keep and apply your changes:

After entering and saving your custom code onto your page, your setup for a Premier page is complete! 

Now, when a visitor submits the first form, the second form will autofill with their name and email from the information submitted in the first form.

And that’s how you can autofill Forms by passing Form submission data! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!