When a user reach out via the Shopify Contact Form that contact is not pushed to Klaviyo in automatic. If you want to subscribe users to a specific Klaviyo list (or just newsletter) you will need to add some Javascript code to the form.
What you'll need:
-
Access to a Klaviyo account
-
Your Klaviyo Public ID API
-
Your Klaviyo list ID
-
Access to Shopify
-
HTML & Javascript knowledge
Steps:
Collect Klaviyo list ID and Public API
To
Locate the Shopify Contact Form liquid file
Before you start: if the Shopify store you are editing is live and receiving traffic, make sure you duplicate the theme and rename it. By doing this we will be able to 'unpublish' our changes in case of errors in a matter of a click. Additionally we will understand what changes have been done on each versions of the theme via the descriptive name.
Step 1 - Duplicating
Step 2 - Renaming
Now that you have duplicated and Renamed the theme version, you can click Customise and locate the contact form liquid file by searching "contact".
In this scenario it's called "main-page-contact.liquid" in the Shopify theme Shades.
Subscribe contact to Klaviyo list on submit
To subscribe a contact to Klaviyo via the Shopify contact form you need to make sure the contact form have certain parameters such as:
Make sure your liquid form has an ID
{%- liquid assign formId = 'ContactForm'-%}
Example
Make sure your form has a submit button
<input type="submit" class="contactform" value="Send Message" id="contactbutton">
Example
Now it's time to subscribe them to the list by adding this Javascript code after the {% endform %} and last </div>.
<script type="text/javascript">
$(document).ready(function(){
$("#ContactForm").on("submit",function(){
let email = $("#ContactFormEmail").val();
if(email !== ""){
let settings = {
"async": true,
"crossDomain": true,
"url": "https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
"data": {
"g": "HkSPiR",
"$fields": "$source",
"email": email,
"$source": "Shopify Contact form"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});
}
});
});
</script>
Fire custom event on submission (optional)
If you'd like to track an event on Klaviyo every time someone contacts you, you can create and fire a custom javascript event. Remember that the customer's profile must be cookied first via the step above.
To track an event such as a Lead, use the code below:
<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(['track', 'Lead', {
$value "$500"
}
]);
</script>
Remember that these are variable you can edit:
-
Lead = (event name)
-
$value = (value of conversion inside brackets - optional)
Fire a Custom Javascript event (optional)
aaaa
