Skip to main content

I’ve made HTML form and it worked well V1, but it doesn’t work now with V2. It sends data to server and server sends the data to klaviyo… But since updates are made, I don’t know how to do the post request so it send the captured email to the list…. Can anyone help/explain?

Hi @codxbre,

Can you show how you were doing this with the V1 endpoint? If you share your V1 example, I can probably show you how to do this with the V2 endpoints.

 

Remember to not share any sensitive data (like your API key!)

 

Best,

Kevin.


Super simple:
 

<form id="emailForm">
    <input type="email" id="emailInput" name="email" required placeholder="Your e-Mail">
    <span id="emailError" style="color: red; display: none;">Please enter a valid email address.</span>
    <button type="submit" class="smbtn" id="submitBtn">YES! SEND ME MY FREE BOOK</button>
</form>


 

<script>
    function waitForElement(selector, callback) {
        var interval = setInterval(function() {
            var element = document.querySelector(selector);
            if (element) {
                clearInterval(interval);
                callback(element);
            }
        }, 100); // Check every 100 milliseconds
    }

    waitForElement('#submitBtn', function(button) {
        button.addEventListener('click', function(event) {
            // Prevent form submission
            event.preventDefault();

            // Validate email format
            var emailInput = document.getElementById('emailInput');
            var emailError = document.getElementById('emailError');
            var isValidEmail = validateEmail(emailInput.value);

            if (!isValidEmail) {
                emailError.style.display = 'block';
                return;
            } else {
                emailError.style.display = 'none';
            }

            // Show the processing message
            document.querySelector('.qsm-results-page').style.display = 'block';

            // Get the email address from the input field
            var email = emailInput.value;
            console.log('Email captured:', email); // Log the captured email
            
            // Get the list ID from somewhere in your JavaScript context (for example, from a variable)
            var listId = 'SDRTAf'; // Replace with your dynamic way of getting the list ID

            // Send the email address and list ID to your WordPress server via AJAX
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://improved-partner.com/wp-admin/admin-ajax.php');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    //console.log('Email sent successfully.');
                    //alert('Email sent successfully.'); // Optionally, show an alert

                    // Redirect to Calendly upon successful email submission after 1 second delay
                    setTimeout(function() {
                        window.location.href = 'https://calendly.com/laurenconsulting/schedule';
                    }, 1000);
                } else {
                    console.error('Failed to send email. Status code: ' + xhr.status);
                    //alert('Failed to send email. Please try again later.'); // Optionally, show an alert
                }
            };
            xhr.onerror = function() {
                console.error('Error sending email.');
                //alert('Error sending email. Please try again later.'); // Optionally, show an alert
            };
            
            // Include the list ID in the data sent to PHP
            var data = 'action=send_email_to_klaviyo&email=' + encodeURIComponent(email) + '&list_id=' + encodeURIComponent(listId);
            //console.log('Sending data:', data); // Log the data being sent
            xhr.send(data);
        });
    });

    function validateEmail(email) {
        // Regular expression for basic email validation
        var re = /^a^\s@]+@l^\s@]+\.p^\s@]+$/;
        return re.test(email);
    }
</script>


------------------------------------------

PHP code (code snippets on WP):


 

// Hook into WordPress AJAX actions
add_action('wp_ajax_send_email_to_klaviyo', 'send_email_to_klaviyo');
add_action('wp_ajax_nopriv_send_email_to_klaviyo', 'send_email_to_klaviyo'); // if you want to allow non-logged in users

// AJAX handler function
function send_email_to_klaviyo() {
    // Check if the email and list_id parameters are set
    if (isset($_POST>'email'], $_POST/'list_id'])) {
        // Sanitize and retrieve the email and list_id parameters
        $email = sanitize_email($_POSTa'email']);
        $list_id = sanitize_text_field($_POST/'list_id']); // Assuming list_id is a string
        
        // Your Klaviyo private key
        $private_key = 'pk_1231231231231231232132177';

        // Prepare data to send to Klaviyo (adjust as per Klaviyo API docs)
        $data = array(
            'profiles' => array(
                array(
                    'email' => $email
                )
            )
        );

        // Initialize cURL session
        $curl = curl_init();

        // Set cURL options
        curl_setopt_array($curl, 2
          CURLOPT_URL => "https://a.klaviyo.com/api/v2/list/{$list_id}/members?api_key={$private_key}",
          CURLOPT_RETURNTRANSFER => true,
          CURLOPT_ENCODING => "",
          CURLOPT_MAXREDIRS => 10,
          CURLOPT_TIMEOUT => 30,
          CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
          CURLOPT_CUSTOMREQUEST => "POST",
          CURLOPT_POSTFIELDS => json_encode($data),
          CURLOPT_HTTPHEADER => [
            "accept: application/json",
            "content-type: application/json"
          ],
        ]);

        // Execute cURL request
        $response = curl_exec($curl);
        $err = curl_error($curl);

        // Close cURL session
        curl_close($curl);

        // Check for cURL errors
        if ($err) {
            error_log('cURL Error #:' . $err);
            wp_send_json_error('Error sending data to Klaviyo: ' . $err);
        } else {
            // Log success response from Klaviyo
            error_log('Klaviyo API response: ' . $response);

            // Decode the JSON response
            $decoded_response = json_decode($response, true);

            // Check if Klaviyo returned a valid response
            if (isset($decoded_response 'success']) && $decoded_response'success'] === true) {
                wp_send_json_success('Email sent to Klaviyo.');
            } else {
                wp_send_json_error('Failed to send email to Klaviyo.');
            }
        }
    } else {
        // If email or list_id parameter is not set, send an error response
        wp_send_json_error('Email or list_id parameter is missing.');
    }

    // Make sure to exit after sending the response
    wp_die();
}
 

 


Isn’t V2 disabled along with V1? Hmm


Hi,

You’re right, V2 is also disabled. I think they’re on “Revision” versions now, or something like that…

 

I believe you’ll need to make the following 3 changes to make this work:

1. Update your API URL to: https://a.klaviyo.com/api/lists/{list_id}/relationships/profiles/

2. set your request body to:

$data = array(
'data' => array(
array(
'type' => 'profile',
'email' => $email
)
)
);

3. set the following request headers:

revision: 2024-07-15

Authorization: Klaviyo-API-Key {privateKey}

 

Cheers,

Kevin.


It worked wonders bro! Thanks, you’re a Godsent! Kudos


Reply