Custom Shopify contact forms linking to Klaviyo

Custom Shopify contact forms linking to Klaviyo

Tom15
Visitor
3 0 0

Hi,

 

Has anybody had any luck linking a Shopify contact form to Klaviyo? The Newsletter and pop up are syncing correctly but we would ideally like it when somebody fills out our contact form to request swatches, they would then go to a specific list in Klaviyo.

 

Many thanks,

Tom

Replies 3 (3)

rajweb
Shopify Partner
531 46 103

Hey @Tom15 ,

Yes, it is possible to link a Shopify contact form to Klaviyo, but it requires a bit of customization. The standard Klaviyo integration with Shopify works well for things like newsletters and pop-ups, but for a contact form (like one for swatch requests), you'll need to ensure the data is captured and sent to Klaviyo correctly.

Here’s how you can set it up:

1. Install Klaviyo Shopify Integration:

- Ensure you’ve installed the Klaviyo integration with Shopify and have connected your Shopify store to Klaviyo.

2. Custom Contact Form:

- If you're using a custom contact form for the swatch request, you can create a custom form using Shopify’s built-in form functionality or a third-party app.

3. Use Shopify’s Webhooks or API:

- To send the form submissions to Klaviyo, you can use Shopify’s webhooks or API. When a customer submits a contact form, the webhook or API can send the form data to Klaviyo. For example, you can use a webhook to trigger a flow in Klaviyo that adds the person to a specific list.

4. Create a Custom Flow in Klaviyo:

- In Klaviyo, create a custom list (e.g., "Swatch Requests") and set up a flow that triggers when a user is added to that list. The flow can send a follow-up email or confirmation message for the swatch request.

5. Add Klaviyo API Code to Your Contact Form:

-You’ll need to add Klaviyo’s API call to your contact form's success handler (i.e., after the user submits the form). This involves making a POST request to Klaviyo's API to add the customer to the list for swatch requests.

-Klaviyo provides an API endpoint where you can send data to create a new profile or update an existing one. You'll pass the customer's information (like email, name, and the fact that they're requesting a swatch) to the endpoint.

Here’s a basic example of how the form might send data to Klaviyo via their API:

 

 

// Assuming you're using a custom contact form
var formData = {
  email: form.email.value,
  name: form.name.value,
  request: 'Swatch'
};

fetch('https://a.klaviyo.com/api/v1/list/your_list_id/subscribe/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Klaviyo-API-Key your_private_api_key'
  },
  body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

 

 

if you’re using a Shopify app for contact forms, you may need to check if that app supports Klaviyo integration or if it can trigger custom events that can then be used to add subscribers to a specific list.

If you need any further help with the code or the setup, feel free to let me know!

 

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

 

 

 

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

steve_michael2
Trailblazer
439 38 55

Hi @Tom15 ,

kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

Crafting exceptional online experiences with innovative design and technology.

Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
Tom15
Visitor
3 0 0

Hi Steve,

 

Our URL for the noted page is:

 

https://desser.co.uk/pages/fabric-swatches

 

Many thanks,

Tom