Jump to content

Prefill checkout form with content from lead generation form

Recommended Posts

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
Link to comment
  • Replies 3
  • Views 224
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

Link to comment
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

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.