Hello
I’m having some trouble integrating an embedded signup form. I am migrating from Mailchimp to Klaviyo so wanting to retain the existing styling of the current form.
Below is the original section of code that creates the form on the footer of the page
<div class="top-footer">
<div class="container">
<div class="row row-footer">
<div class="col-xs-12 col-sm-6 text-right">
<h5 class="c_newsletterHeading">Subscribe to our newsletter and<br> get 10% off your first order</h5>
</div>
[%if [@config:show_newsletter_subscribe@]%]
<div class="top-footer">
<div class="container">
<div class="row row-footer">
<div class="col-xs-12 col-sm-6 text-right">
<h5 class="c_newsletterHeading">Subscribe to our newsletter and<br> get 10% off your first order</h5>
</div>
<div class="col-xs-12 col-sm-4 text-center c_newsletter">
<form method="post" action="https://uniquepartyshop.us20.list-manage.com/subscribe/post?u=89f1fe2529382a64c94464f77&id=0f1518c8a4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="hidden" name="list_id" value="1">
<input type="hidden" name="opt_in" value="y">
<div class="input-group">
<input name="email" class="form-control" type="email" value="" id="mce-EMAIL" placeholder="Email Address" required/>
<input name="inp-submit" type="hidden" value="y" />
<input name="inp-opt_in" type="hidden" value="y" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" value="Subscribe" id="mc-embedded-subscribe" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"/>
<i class="fa fa-arrow-right"></i>
</button>
</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="y" class="terms_box" required/>
I have read and agree to
<a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> and
<a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
</label>
</div>
</form>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div>
</div>
</div>
</div>
And below is the replacement code, which appears to work ok in that it creates the success message, but does not add the email to the list at all.
<div class="top-footer">
<div class="container">
<div class="row row-footer">
<div class="col-xs-12 col-sm-6 text-right">
<h5 class="c_newsletterHeading">Subscribe to our newsletter and<br> get 10% off your first order</h5>
</div>
<div class="col-xs-12 col-sm-4 text-center c_newsletter">
<form id="email_signup" class="validate" 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="list_id" value="1">
<input type="hidden" name="g" value="XJAkx2">
<input type="hidden" name="$fields" value="$consent">
<input type="hidden" name="$list_fields" value="$consent">
<div class="input-group">
<input name="email" class="form-control" type="email" value="" id="k_id_email" placeholder="Email Address" required/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" value="Subscribe" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"/>
<i class="fa fa-arrow-right"></i></button>
</span>
</div>
<div class="klaviyo_messages">
<div class="success_message" style="color: white; display:none;"></div>
<div class="error_message" style="color: white; display:none;"></div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="y" class="terms_box" required/>
I have read and agree to
<a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> and
<a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
</label>
</div>
</form>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachToForms('#email_signup', {
hide_form_on_success: true,
success_message: "Thank you for signing up! Your special offer is on its way!",
extra_properties: {
$source: '$embed',
$method_type: "Klaviyo Form",
$method_id: 'embed',
$consent_version: 'Embed default text'
}
});
</script>
</div>
</div>
</div>
</div>
Can someone see what I might be missing?
thank you, Rod
