Klaviyo

by ckissi

HTML

<script src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_NvHLhd" 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="NvHLhd">
 <!-- <input type="hidden" name="$fields" value="$consent">
 <input type="hidden" name="$list_fields" value="$consent"> -->
 <div class="klaviyo_field_group">
 <!-- <label for="k_id_email">Newsletter Sign Up</label> -->
 <input class="" type="email" value="" name="email" id="k_id_email" placeholder="Your email"/>
 <!-- <div class="klaviyo_field_group klaviyo_form_actions" style="display:none">
   <div class="klaviyo_helptext"> How would you like to hear from us? (please select at least one option) </div>
   <input type="checkbox" name="$consent" id="consent-email" value="email" checked>
   <label for="consent-email" >Email</label><br>
   <input type="checkbox" name="$consent" id="consent-web" value="web" >
   <label for="consent-web">Online advertisements</label>
 </div> -->
 </div>
 <div class="klaviyo_messages">
 <div class="success_message" id="error_message" style="display:none;"></div>
 <div class="error_message" style="display:none;"></div>
 </div> <div class="klaviyo_form_actions">
 <button type="submit" class="klaviyo_submit_button">Subscribe</button> </div>
</form>

CSS

.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID {
 font-family: "Helvetica Neue", Arial;
}.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext {
 font-family: "Helvetica Neue", Arial;
 padding-top: 10px; padding-bottom: 10px;
}.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text {
 font-size: 14px;
 line-height: 1.3;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID label,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID label {
 color:#222;
}
.klaviyo_styling .klaviyo_field_group .klaviyo_form_actions {
 text-align:left;
 }
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=checkbox] + label,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=checkbox] + label {
 display: inline;
 font-weight:normal;
 padding-left:5px;
}.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=text],
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=email],
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=text],
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=email] {
 border-radius: 2px;
}.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button {
 background-color:#0064cd;
 border-radius: 2px;
}.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover {
 background-color:#0064cd;
}

JavaScript

KlaviyoSubscribe.attachToForms('#email_signup', {
   hide_form_on_success: true,
   /*extra_properties: {
       $source: '$embed',
       $method_type: "Klaviyo Form",
       $method_id: 'embed',
       $consent_version: 'Embed default text'
 		}*/
 });
 
 function mailchimpNew($form) {
  $($form).on("submit", function(e) {
    e.preventDefault();
    const $this = $(this);
    const serialize = $this.serialize();
    const action = $this.attr("action").replace("post?u=", "post-json?u=");
    var errorHolder;
    var successHolder;
    if($($form).attr('id') === "mc-embedded-subscribe-form-popup") {
        errorHolder = $this.find('[id$="mce-error-response"]');
        successHolder = $this.find('[id$="mce-success-response"]');
    } else {
        errorHolder = $this.find('[id$="error_message"]');
        successHolder = $this.find('[id$="fmessage"]');
    }
    $.ajax({
      url: action,
      type: $this.attr("method"),
      dataType: "jsonp",
      jsonp: "c",
      data: serialize
    }).done(function(data) {
      if (data.result === "error") {
         errorHolder.show().html(data.msg.replace(/^\d\s-\s/g, ""));
      } else if (data.result === "success") {
         errorHolder.hide().empty();
         successHolder.show().html('Thanks for signing up!' + '<br>' + 'Check your email to confirm your newsletter subscription.');
         $($form).addClass("submitted");
         if($($form).attr('id') === "mc-embedded-subscribe-form") {
             $('.fncontainer .email').hide();
             $('.fncontainer .btn').hide();
             $('.fwrapper .fintro').hide();
         }
         // Close popup after successful submission
         setTimeout(function() {
            $('.newsletter-slide').removeClass("show");
         }, 2000);
      }
    });
  });
}