Pass information from one form to a checkout form

SmallSitesSarah · June 11

My client wants a lead generation form on his home page. When someone submits the form, it should redirect them to the checkout page, which has a custom form. Is there a way to prefill the checkout form with the information from the lead generation form so the user isn't asked to fill information twice? Happy to hear any ideas for a workaround if this isn't possible.

This is conceptual, so there's no site for me to link to. It would look like this:

Lead generation form

Pet name
Gender
Age
Weight
Your email address

Once this is complete, the user is redirected to the checkout page.

Your email [autofill]
Your name
Pet name [autofill]
Species
Breed
Gender [autofill]
Age [autofill]
Weight [autofill]
Your pet's health concern
Current medications

Widle · June 11

I can provide you a code with animation & styles @SmallSitesSarah

Lead generation form

<!DOCTYPE html>
<html>
<head>
    <title>Lead Generation Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #leadForm {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 300px;
            transition: transform 0.5s ease-in-out;
        }

        #leadForm.fade-out {
            transform: scale(0.5);
            opacity: 0;
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333333;
        }

        input[type="text"],
        input[type="email"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #28a745;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            font-size: 16px;
        }

        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <form id="leadForm">
        <label for="petName">Pet name:</label>
        <input type="text" id="petName" name="petName"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        
        <label for="weight">Weight:</label>
        <input type="text" id="weight" name="weight"><br><br>
        
        <label for="email">Your email address:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('leadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const petName = document.getElementById('petName').value;
            const gender = document.getElementById('gender').value;
            const age = document.getElementById('age').value;
            const weight = document.getElementById('weight').value;
            const email = document.getElementById('email').value;
            
            // Store data in sessionStorage
            sessionStorage.setItem('petName', petName);
            sessionStorage.setItem('gender', gender);
            sessionStorage.setItem('age', age);
            sessionStorage.setItem('weight', weight);
            sessionStorage.setItem('email', email);
            
            // Add fade-out animation to the form
            document.getElementById('leadForm').classList.add('fade-out');

            // Wait for animation to finish before redirecting
            setTimeout(function() {
                window.location.href = 'checkout.html';
            }, 500); // 0.5 second
        });
    </script>
</body>
</html>

the user is redirected to the checkout page. with auto fill

<!DOCTYPE html>
<html>
<head>
    <title>Checkout Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #checkoutForm {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 400px;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333333;
        }

        input[type="text"],
        input[type="email"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form id="checkoutForm">
        <label for="email">Your email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <label for="name">Your name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="petName">Pet name:</label>
        <input type="text" id="petName" name="petName"><br><br>
        
        <label for="species">Species:</label>
        <input type="text" id="species" name="species"><br><br>
        
        <label for="breed">Breed:</label>
        <input type="text" id="breed" name="breed"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        
        <label for="weight">Weight:</label>
        <input type="text" id="weight" name="weight"><br><br>
        
        <label for="healthConcern">Your pet's health concern:</label>
        <input type="text" id="healthConcern" name="healthConcern"><br><br>
        
        <label for="medications">Current medications:</label>
        <input type="text" id="medications" name="medications"><br><br>
        
        <button type="submit">Checkout</button>
    </form>

    <script>
        window.onload = function() {
            // Retrieve data from sessionStorage
            document.getElementById('email').value = sessionStorage.getItem('email');
            document.getElementById('petName').value = sessionStorage.getItem('petName');
            document.getElementById('gender').value = sessionStorage.getItem('gender');
            document.getElementById('age').value = sessionStorage.getItem('age');
            document.getElementById('weight').value = sessionStorage.getItem('weight');
        }
    </script>
</body>
</html>

SmallSitesSarah · June 12

On 6/11/2024 at 5:29 AM, LoftyDevs said:

I can provide you a code with animation & styles @SmallSitesSarah

Lead generation form

<!DOCTYPE html>
<html>
<head>
    <title>Lead Generation Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #leadForm {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 300px;
            transition: transform 0.5s ease-in-out;
        }

        #leadForm.fade-out {
            transform: scale(0.5);
            opacity: 0;
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333333;
        }

        input[type="text"],
        input[type="email"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #28a745;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            font-size: 16px;
        }

        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <form id="leadForm">
        <label for="petName">Pet name:</label>
        <input type="text" id="petName" name="petName"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        
        <label for="weight">Weight:</label>
        <input type="text" id="weight" name="weight"><br><br>
        
        <label for="email">Your email address:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('leadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const petName = document.getElementById('petName').value;
            const gender = document.getElementById('gender').value;
            const age = document.getElementById('age').value;
            const weight = document.getElementById('weight').value;
            const email = document.getElementById('email').value;
            
            // Store data in sessionStorage
            sessionStorage.setItem('petName', petName);
            sessionStorage.setItem('gender', gender);
            sessionStorage.setItem('age', age);
            sessionStorage.setItem('weight', weight);
            sessionStorage.setItem('email', email);
            
            // Add fade-out animation to the form
            document.getElementById('leadForm').classList.add('fade-out');

            // Wait for animation to finish before redirecting
            setTimeout(function() {
                window.location.href = 'checkout.html';
            }, 500); // 0.5 second
        });
    </script>
</body>
</html>

the user is redirected to the checkout page. with auto fill

<!DOCTYPE html>
<html>
<head>
    <title>Checkout Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #checkoutForm {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 400px;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333333;
        }

        input[type="text"],
        input[type="email"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form id="checkoutForm">
        <label for="email">Your email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <label for="name">Your name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="petName">Pet name:</label>
        <input type="text" id="petName" name="petName"><br><br>
        
        <label for="species">Species:</label>
        <input type="text" id="species" name="species"><br><br>
        
        <label for="breed">Breed:</label>
        <input type="text" id="breed" name="breed"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        
        <label for="weight">Weight:</label>
        <input type="text" id="weight" name="weight"><br><br>
        
        <label for="healthConcern">Your pet's health concern:</label>
        <input type="text" id="healthConcern" name="healthConcern"><br><br>
        
        <label for="medications">Current medications:</label>
        <input type="text" id="medications" name="medications"><br><br>
        
        <button type="submit">Checkout</button>
    </form>

    <script>
        window.onload = function() {
            // Retrieve data from sessionStorage
            document.getElementById('email').value = sessionStorage.getItem('email');
            document.getElementById('petName').value = sessionStorage.getItem('petName');
            document.getElementById('gender').value = sessionStorage.getItem('gender');
            document.getElementById('age').value = sessionStorage.getItem('age');
            document.getElementById('weight').value = sessionStorage.getItem('weight');
        }
    </script>
</body>
</html>

@LoftyDevs I think this is really close. I tested this one of my existing sites, but when I hit submit, I got a 404. You can see it at www.c10sinthecity.com/test-page Password: TEST

Widle · June 21

@SmallSitesSarah

"If there are no issues, could you please provide full information about them? Can you also explain what the actual issues are?"

SmallSitesSarah · July 16

On 6/21/2024 at 6:37 AM, LoftyDevsbyWidleStudioLLP said:

@SmallSitesSarah

"If there are no issues, could you please provide full information about them? Can you also explain what the actual issues are?"

Hi. I'm not in the conceptualization phase anymore so this should be easier. The information from the form on this page should prefill the checkout form on this page. Is it possible?

Password: SecondOpinion

Widle · July 17

Hello @SmallSitesSarah

index..html

<!DOCTYPE html>
<html>
<head>
    <title>Lead Generation Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #leadForm {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 300px;
            transition: transform 0.5s ease-in-out;
        }

        #leadForm.fade-out {
            transform: scale(0.5);
            opacity: 0;
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333333;
        }

        input[type="text"],
        input[type="email"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #28a745;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            font-size: 16px;
        }

        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <form id="leadForm">
        <label for="petName">Pet name:</label>
        <input type="text" id="petName" name="petName"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        
        <label for="weight">Weight:</label>
        <input type="text" id="weight" name="weight"><br><br>
        
        <label for="email">Your email address:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('leadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const petName = document.getElementById('petName').value;
            const gender = document.getElementById('gender').value;
            const age = document.getElementById('age').value;
            const weight = document.getElementById('weight').value;
            const email = document.getElementById('email').value;
            
            // Store data in sessionStorage
            sessionStorage.setItem('petName', petName);
            sessionStorage.setItem('gender', gender);
            sessionStorage.setItem('age', age);
            sessionStorage.setItem('weight', weight);
            sessionStorage.setItem('email', email);
            
            // Add fade-out animation to the form
            document.getElementById('leadForm').classList.add('fade-out');

            // Wait for animation to finish before redirecting
            setTimeout(function() {
                window.location.href = '/checkout'; // Update to the actual URL of your checkout page
            }, 500); // 0.5 second
        });
    </script>
</body>
</html>

in this code, the importance is

// Wait for the animation to finish before redirecting
setTimeout(function() {
window.location.href = '/checkout'; // <<----Update to the actual URL of your checkout page
}, 500); // 0.5 second

this code updates the URL and Using the code Block not Using Default Form page

and this is a checkout page

<!DOCTYPE html>
<html>
<head>
    <title>Checkout Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #checkoutForm {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 400px;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333333;
        }

        input[type="text"],
        input[type="email"] {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form id="checkoutForm">
        <label for="email">Your email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <label for="name">Your name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="petName">Pet name:</label>
        <input type="text" id="petName" name="petName"><br><br>
        
        <label for="species">Species:</label>
        <input type="text" id="species" name="species"><br><br>
        
        <label for="breed">Breed:</label>
        <input type="text" id="breed" name="breed"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        
        <label for="age">Age:</label>
        <input type="text" id="age" name="age"><br><br>
        
        <label for="weight">Weight:</label>
        <input type="text" id="weight" name="weight"><br><br>
        
        <label for="healthConcern">Your pet's health concern:</label>
        <input type="text" id="healthConcern" name="healthConcern"><br><br>
        
        <label for="medications">Current medications:</label>
        <input type="text" id="medications" name="medications"><br><br>
        
        <button type="submit">Checkout</button>
    </form>

    <script>
        window.onload = function() {
            // Retrieve data from sessionStorage
            const email = sessionStorage.getItem('email');
            const petName = sessionStorage.getItem('petName');
            const gender = sessionStorage.getItem('gender');
            const age = sessionStorage.getItem('age');
            const weight = sessionStorage.getItem('weight');

            // Prefill the form
            document.getElementById('email').value = email || "";
            document.getElementById('petName').value = petName || "";
            document.getElementById('gender').value = gender || "";
            document.getElementById('age').value = age || "";
            document.getElementById('weight').value = weight || "";

            // Log the retrieved data to the console
            console.log('Email:', email);
            console.log('Pet Name:', petName);
            console.log('Gender:', gender);
            console.log('Age:', age);
            console.log('Weight:', weight);
        }
    </script>
</body>
</html>

https://fuchsia-amethyst-7bl9.squarespace.com/breeds - my demo site
password - demo

SmallSitesSarah · July 17

@LoftyDevsbyWidleStudioLLP thanks for your time on this. For whatever reason, I'm unable to test this on my site because it moves all the content up over the header. See screen recording. Any ideas?

SmallSitesSarah · July 26

I'd like information from a lead-generation form on the home page (Form 1) to be passed to the checkout page (Form 2). When the user is redirected from Form 1 to Form 2, matching fields should auto-populate so they won't have to enter the same information twice.

Form 1: www.mynextvet.com

Form 2: www.mynextvet.com/checkout

Password: SecondOpinion

Edited July 26 by SmallSitesSarah

creedon · July 26

Please see the following.

Pass information from one form to a checkout form

Recommended Posts

SmallSitesSarah

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Widle

Widle - Squarespace Website Design Experts

SmallSitesSarah

Widle

Widle - Squarespace Website Design Experts

SmallSitesSarah

Widle

Widle - Squarespace Website Design Experts

SmallSitesSarah

SmallSitesSarah

creedon

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources