Klaviyo Forms

How to use this repo?

npm install klaviyo-forms --save

var klaviyoSubmitForm = require("klaviyo-forms")
var $klaviyoForms = $('[data-holstee-klaviyo]')
$klaviyoForms.on("submit", klaviyoSubmitForm())
$klaviyoForms.on("submitted", function(e, request, data){
  if(e) console.log(e)
  request.then(function(response){
    console.log("logging")
    console.log(response)
    console.log(data)
  });
})

Then you can construct your Klaviyo forms in full HTML.

<form data-holstee-klaviyo>
  <input type="hidden" name="token" value="YOURTOKEN">
  <input type="hidden" name="event" value="Testing New Klaviyo Tech Solution">
  <input type="email" name="customer_properties[$email]" placeholder="email">
  <input type="hidden" name="properties[Total Price]" value="24.99">
  <input type="hidden" name="properties[Sku]" value="HOL-FAKE-SKU">
  <input type="submit">
</form>

The way things are currently

Klaviyo recommends in their API documentation to use klaviyo like this:

<script>
  var _learnq = _learnq || [];
  _learnq.push(['account', 'YOURTOKEN']);
  _learnq.push(['identify', {
    // Change the line below to dynamically print the user's email.
    '$email' : '[email protected]'
  }]);
  (function () {
  var b = document.createElement('script'); b.type = 'text/javascript'; b.async = true;
  b.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'a.klaviyo.com/media/js/analytics/analytics.js';
  var a = document.getElementsByTagName('script')[0]; a.parentNode.insertBefore(b, a);
  })();
</script>

This does a couple of really antiquated things.

1. It uses script tags...
2. It attaches the Klaviyo Analytics file to the DOM
3. It allows you to identify a use based on an email address

What it doesn't do is get that email address from the customer.

What I'm currently working with is a monstrosity that I created here this is my existing Klaviyo file, there's a couple of really antiquated things here as well.

1. It uses AMD (Built for RequireJs, now using webpack)
2. It selects individual forms, which are the heart of any Klaviyo event and does the same repetitive selecting every time I want to create a Klaviyo form, I wized up toward the end, but it's still not good enough!