How to Autofill Forms by Passing Submission Data to the Checkout Page in kajabi?

Streamline Your Sales Process: Pre-fill Checkout Forms with Kajabi

The checkout process should be smooth and seamless for your customers. No one wants to re-enter information they already provided. This guide will show you how to pre-fill forms on your Kajabi checkout page by passing submission data from a previous form.

Benefits of Pre-filling Checkout Forms:

• Improved User Experience: Eliminate the need for customers to re-enter information, reducing frustration and cart abandonment.
• Reduced Errors: Pre-filled forms minimize the possibility of typos or inconsistencies in checkout data.
• Faster Checkout: A streamlined checkout process leads to increased sales conversions.

Here's how to achieve this with Kajabi:

Step 1: Enable Submission Data Passing

1. Go to your Kajabi dashboard and navigate to Marketing > Forms.
2. Select the first form users will complete, typically a lead capture form.
3. Click on After Submission Settings.
4. Under "After Submitting the Form," check the box for "Send the contact to a custom thank you page."
5. Choose the second page containing the checkout form from the dropdown menu.

Step 2: Implement the First Javascript Code

1. Go to your Kajabi dashboard and navigate to Website > Landing Pages.
2. Select the second page containing the checkout form you want to pre-fill.
3. Click on Settings in the editor.
4. Open the Custom Code section.
5. Copy and paste the following Javascript code into the Custom Code box:
   
   

Note: Remove "Opening <script> and Closing </script> before pasting code."

<script>
// Function to get URL parameters as an object
function getQueryParams(url) {
let params = {};
let queryString = url.split('?')[1];
if (queryString) {
queryString.split('&').forEach(param => {
let [key, value] = param.split('=');
params[key] = decodeURIComponent(value);
});
}
return params;
}

// Function to construct a query string from an object
function constructQueryString(params) {
return Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join('&');
}

// Construct the new URL and redirect
function redirectToNewPage(baseUrl) {
let params = getQueryParams(window.location.href);
let queryString = constructQueryString(params);
let newPageUrl = baseUrl + (queryString ? '?' + queryString : ''); // Append params if they exist
window.location.href = newPageUrl;
}

// Example usage
redirectToNewPage('https://www.funnelpandit.com/offers/VAUs5xHe/checkout');
</script>

1. Make sure to update the Redirect URL to your checkout page. 

Step 3: Implement the Second Javascript Code

1. Go to your Kajabi settings and navigate to checkout Settings.
2. Go to the Footer tracking code at the bottom of the page.
3. Copy and paste the following Javascript code into the Custom Code box:
4.  Don't forget to save. 

Note: Copy and paste as it is with ("Opening <script> and Closing </script>.)

<script type="text/javascript">
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 ? nameParam.replaceAll('+', ' ') : '';
var email = emailParam ? emailParam : '';

var x = document.getElementById("checkout_offer_member_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("checkout_offer_member_email"); //get the Email field of the form
y.value = email; //autofill email field with the value we got from the URL
</script>

Step 4: Update the Loader code on the "Do not delete page". (You can change the page name what you want)

Here is the website link where you can copy the loader code https://css-loaders.com/spinner/

Additional Tips:

• Ensure proper form field naming consistency between both forms for successful data transfer.
• Test pre-filling functionality thoroughly across different devices and browsers.
• Consider using Kajabi automation features to send abandoned cart reminders with pre-filled information.

Implementing this technique can significantly enhance your buyer experience and boost your conversions.