Learn to use the "Pass submission data to the thank you page" 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?
The Pass submission data to the thank you page is a great feature for those with developer experience to display the 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 great user experience by autofilling 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 autofilled 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 seamless experience for your users:
To accomplish this setup, there are two crucial steps:
- enable pass submission data
- and add custom code to your page
Before setting up this connection, 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.
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:
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
With Kajabi Pages, you can add the custom code directly from your page editor!
First, copy the custom code above.
</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.
- Click Save to keep and apply your changes:
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;
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.,
- Click the
enterkey on your keyboard to create an empty line.
- Click Save to keep and apply your changes: