Skip to main content

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>


	b%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();fnamesf0]='EMAIL';ftypesf0]='email';fnamesf1]='FNAME';ftypesf1]='text';fnamesf2]='LNAME';ftypesf2]='text';fnamesf3]='ADDRESS';ftypesf3]='address';fnamesf4]='PHONE';ftypesf4]='phone';fnamesf5]='BIRTHDAY';ftypesf5]='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

@rodbland Just taking a quick glance at your code, it looks like you didn’t put a valid List ID in the value for the hidden input for “list_id.”  This is what you have:

… <input type="hidden" name="list_id" value="1"> … 

 

You should get the LIST ID of the List you want people to go into.  To get the List ID, you navigate to the List in Klaviyo and it’s shown in the “Settings” tab like this:

Here’s Klaviyo’s documentation on more info on using Legacy Embedded Signup Forms:

How to Add and Customize a Legacy Embedded Signup Form

Thanks for that, but I don’t think that’s the problem. That piece of code only applies to mailchimp and is redundant.

 

The piece for the list id is here

 

<input type="hidden" name="g" value="XJAkx2">

 

Hello @rodbland,

Do you happen to have Double Opt-In enabled on the list that this signup form is linked to? Keep in mind that if double opt-in was still enabled on the list, only customers who have signed up to this form and confirmed their subscription would be added to the designated list. Customers who signup, but do not confirm their subscription would not be added to the list. 

Building off of what @retention had highlighted, since this appears to be a Custom/Legacy form built on HTML/CSS, other resources you may want to take a look at to assist you in this are:

You can also find other resources that may be able to assist you through our extensive network of agency partners as many of them specialize in coding assistance.

-David

Hi everyone!

Might not be the best location to ask. Is this method still working? 

<input type="hidden" name="g" value="LIST_ID_HERE">

Hi @JayneG, 

 

If you’re trying to embed a form on your website I’d check out  our documentation here. 

 

-Taylor

Reply


Terms & Conditions

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy |
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.