Skip to main content
Solved

hosted page for subscription not creating any profile in klaviyo

  • May 25, 2023
  • 1 reply
  • 110 views

Forum|alt.badge.img+2

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

Best answer by David To

 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

1 reply

David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2455 replies
  • Answer
  • May 25, 2023

 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