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

Kayla M.

Updated

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?

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. 

Note:
Without custom coding, the data sent with this feature will not be captured to display on your page.

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.

After_Submission_Settings_-_all.png


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:

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.

Tip:
This feature will work for Single Optin and Double Optin forms, but will not work for forms triggered by a Two-Step Optin popup.

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":

After_Submission_Settings_-_pass_submission_data.png


Step 2. Add custom code to your page

Warning:
Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.

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:

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.

Note:
When copying the code, leave out the opening and closing <script> tags (i.e., <script> and </script>) if you are using Kajabi Pages.

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. 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!

Did you find this article helpful?

Need more help?

Contact Us