Klaviyo Custom Form Integration

custom.scss.liquid

/*------------------------------------------------
KLAVIYO signup form
------------------------------------------------*/

.klaviyo_styling{
  max-width: none;
}

.klaviyo-form-wrap.klaviyo_form_actions {
  text-align: left;
  display: block;
  position: relative;
}


.klaviyo_styling input[type=email] {
  border: solid 1px #ccc;
  border-radius: 3px;
  padding: 7px 9px;
  width: 100%;
  height: 45px;
  color: #222;
  font-size: 14px;
  line-height: 20px;
}


.klaviyo_styling .klaviyo_submit_button {
  background-color: #127931;
  cursor: pointer;
  padding: 10px 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  height: 34px;
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 3px;
  position: absolute;
  top: 6px;
  right: 8px;
}


.klaviyo_styling .klaviyo_messages .error_message {
  color: #FFF;
  margin-top: 10px;
  text-shadow: none;
  display: inline-block;
}

.klaviyo_styling .klaviyo_messages .success_message {
  margin-top: 20px;
  color: #127931;
}

klaviyo.liquid

{% comment %} Newsletter Signup Functionality {% endcomment %}
<script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=XXXXXX"></script>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>

<script type="text/javascript">
  KlaviyoSubscribe.attachToForms('.newsletter-signup', {
   hide_form_on_success: true,
   success_message: "Thanks for signing up! Please check your email for confirmation.",
   extra_properties: {
    $source: 'Footer Signup Form'
  }
});
</script>

{% comment %} Back In Stock Functionality {% endcomment %}
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "XXXXXX",
      platform: "shopify",
      list: 'XXXXXX' // BIS list ID
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Sold Out - Notify Me When Available",
      product_page_class: "btn",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: true
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     font_family: 'Arial, sans-serif;',
     drop_background_color: "#000",
     background_color: "#FFF",
     text_color: "#222",
     button_text_color: "#FFF",
     button_background_color: "#dc0915",
     close_button_color: "#dc0915",
     error_background_color: "#dc0915",
     error_text_color: "#FFF",
     success_background_color: "#dc0915",
     success_text_color: "#FFF"
    }
  });
</script>

newsletter.liquid

<form id="email_signup" class="klaviyo_styling" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
  <input type="hidden" name="g" value="ENTER LIST ID HERE">

  <div class="klaviyo-form-wrap klaviyo_form_actions">
    <input class="" type="email" name="email" value=""  id="k_id_email" placeholder="Your Email Address"/>
    <button type="submit" class="klaviyo_submit_button">Subscribe</button>
  </div>

  <div class="klaviyo_messages">
    <div class="success_message" style="display:none;"></div>
    <div class="error_message" style="display:none;"></div>
  </div>
</form>

Please create a klaviyo.liquid snippet and put the JS above into that then include in the theme.liquid file using

{% include "klaviyo" %}