Solved

hosted page for subscription not creating any profile in klaviyo

  • 25 May 2023
  • 1 reply
  • 81 views

Badge +1

Hello, 

 

Got a hosted page created. It gives the confirmation message saying successfully subscribed. Don't see any errors with the script and the correct list ID is being used. However cannot seem to get klaviyo to create any profiles. what am I missing. Appreciate if anyone could point in the right direction. 

 

Given below is the code I have used. 


    <script src="https://www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
</head>
<body>
    <div class="logo">
        <img src="https://d3k81ch9hvuctc.cloudfront.net/company/XXXXXX/images/0b510b0b-e6ff-40d8-bf53-a8721f5fc904.png" alt="Logo">
    </div>

    <div class="signup-message">
        Subscribe to our newsletter for an exclusive first access to our launch collection + weekly news, promotions, and parent tips & tricks<br>
        + 15% off your first order!
    </div>

    <div class="container">
        <div class="frame-container">
            <div class="photo-container">
                <img src="https://d3k81ch9hvuctc.cloudfront.net/company/XXXXXX/images/31165081-b60c-474b-9606-a3d33cabde52.jpeg" alt="Signup Image">
            </div>

            <form id="signup-form">
                <label for="first-name">First Name:</label>
                <input type="text" id="first-name" name="first-name" required>
                
                <label for="last-name">Last Name:</label>
                <input type="text" id="last-name" name="last-name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <input class="submit-button" type="submit" value="Subscribe">
            </form>
        </div>
    </div>

    <script>
        // Klaviyo form submission code
        var $form = document.getElementById("signup-form");

        $form.addEventListener("submit", function (e) {
            e.preventDefault();
            
            // Get form field values
            var firstName = document.getElementById("first-name").value;
            var lastName = document.getElementById("last-name").value;
            var email = document.getElementById("email").value;

            // Klaviyo subscribe API call
            KlaviyoSubscribe.attachToForms('#signup-form', {
                listId: 'XXXXXX',
                subscribe: {
                    email: email,
                    properties: {
                        $first_name: firstName,
                        $last_name: lastName
                    }
                }
            });

            // Reset the form
            $form.reset();

            // Display success message
            alert("Thank you for subscribing!");
        });
    </script>
</body>
</html>

 

thank you in advance

icon

Best answer by David To 25 May 2023, 17:26

View original

1 reply

Userlevel 7
Badge +60

 Hello @Rkamath,

Welcome to the Klaviyo Community!

I took the liberty of removing some potentially sensitive data from your code along with moving this post to our Developer Group. Those group members may be able to spot something you may have missed.

Alternatively, if you need more hands on assistance, I would encourage you to reach out to our expansive network of Klaviyo Partners. Some of our partners also excel at helping others with custom coded assets. 

David

Reply