Add and Customize a Legacy Embedded Signup Form

read

Overview

If you are using a legacy Klaviyo embedded form or would like to custom code your own embedded form, you can do so by editing the default code snippet provided below and pasting it on your site. 

Default Embedded Form Code

The code below contains the default, customizable code that you can use to install a GPDR compliant embedded form on your site. Please bear in mind that you will need to replace LIST_ID with your list's ID. Learn more about finding the ID for a given list.

<form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_LIST_ID" 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="LIST_ID">
<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">
<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">
<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 class="klaviyo_helptext klaviyo_gdpr_text"> We use email and targeted online advertising to send you product and services updates, promotional offers and other marketing communications based on the information we collect about you, such as your email address, general location, and purchase and website browsing history. <br>
<br>
We process your personal data as stated in our Privacy Policy {Insert privacy policy link}. You may withdraw your consent or manage your preferences at any time by clicking the unsubscribe link at the bottom of any of our marketing emails, or by emailing us at {insert customer support email address}.</div>
</div>
</div>
</div>
<div class="klaviyo_messages">
<div class="success_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>
<style type="text/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;
}
</style>
<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,
extra_properties: {
$source: '$embed',
$method_type: "Klaviyo Form",
$method_id: 'embed',
$consent_version: 'Embed default text'
}
});
</script>

Form Configuration Options

The JavaScript to connect a simple signup form looks similar to this:

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#email_subscribe', {
 hide_form_on_success: true
 });
</script>

Learn more

If you are interested in adding additional fields to your signup form to capture content interests, gender, or other custom properties, check out this guide.

Below is a list of additional options you can use to configure your simple signup form. Each option should be included as another key in the attachToForms call. For example, to append additional pre-set fields to someone's profile when the form submits, you would use the extra_properties argument. Here is an example usage below:

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
  KlaviyoSubscribe.attachToForms('#email_subscribe', {
    hide_form_on_success: true,
    extra_properties: {
      $source: 'HomePageSignUp',
      Brand: 'Klaviyo'
    }
  });
</script>

In the above example, whenever someone signs up using this form, a "Source" property will automatically get added to the subscriber's profile with the value of HomePageSignUp. A "Brand" property will also be added to his/her profile with the value set to Klaviyo. These fields are not visible to the subscriber, but allow you to capture information of our choosing about the person based on the way he/she opted in.

Here is a list of available configuration options available:

  • extra_properties: optional, dictionary. The extra_properties argument allows you to assign additional fields to someone's profile when the form submits. For example, if you want to track that someone is signing up via the form on your homepage, you could set the extra_properties setting to: { $source: 'HomePageSignUp' }. Learn more about the $source property here.
  • success_url: optional, string. If specified, after a successful form submission, the page will redirect to this URL.
  • success: optional, function. Allows you to set a custom function to run on a successful AJAX post.
  • custom_success_message: boolean, default: false. If set to true, you will be able to define a custom success message (see below)
  • success_message: optional, string/HTML. The default message is: "Thanks for subscribing! Check your email for a confirmation message."
  • hide_form_on_success: boolean, default: false. If set to true, this will hide the form fields after a user submits the form.

Change the Message Displayed After Someone Subscribes

By default, we'll show a message to subscribers that reads, "Thanks for subscribing! Check your email for a confirmation message." If you want to customize this message, you can use the success_message option noted above. Here is an example of what this would look like:

<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#email_subscribe', {
   hide_form_on_success: true,
   success_message: "Thank you for signing up! Your special offer is on its way!"
 });
</script>

If you disable double opt-in for a list, it will be important to customize your list's success message so subscribers know not to expect a confirmation email.

The success_message option also accepts HTML if you want to display more than text. Or, if you're going to be displaying an HTML thank you message, you can add that HTML directly in the form HTML in the success_message div and then set the custom_success_message option to true to indicate we should just show the HTML there. Here's an example indicating which areas of the default form code need to be edited:

<form id="email_subscribe" class="klaviyo_default_styling" action="http://manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="http://manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
 ...
 <div class="klaviyo_messages">
 <div class="success_message" >
    <p class="thank_you" >This is a custom thank you message!</p>
 </div>
 </div> 
 ...
</form>
...
<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#k_id_embedded_subscription_form', {
   hide_form_on_success: true,
   custom_success_message: true
 });
</script>

Redirect Subscribers to a New Page After Submit

For certain forms, you might want to redirect subscribers to a completely separate thank you page after they subscribe. To do this, you will use the success_url option. This code will be pasted after hide_form_on_success: true, in the default form code:

<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#email_subscribe', {
   hide_form_on_success: true,
   success_url: "http://www.example.com/thank-you"
 });
</script>

The Success Callback

If you'd like to execute some JavaScript after someone subscribes to your newsletter, there's a success callback option you can use. For example, say you wanted to identify the person who signed up and also record an event in Klaviyo. You could use Klaviyo's web tracking to set the success like so:

<script type="text/javascript">
 KlaviyoSubscribe.attachToForms('#email_subscribe', {
 ...
 success: function ($form) {
 // `$form` is a jQuery wrapper around the form that was submitted. This makes it easy to get the email address or form fields.
   var email = $form.find('[name="email"]').val();
   _learnq.push(['identify', { $email: email }]);
   _learnq.push(['track', 'Signed Up for Newsletter']);
 }
 ...
 });
</script>

Multiple Forms on the Same Page

If you're planning on having multiple signup forms on the same page, make sure you give each form element a unique ID. The form ID is used in two places:

First, the form ID is used as the ID of the form element:

signupformCode2small.png

Second, you will find this same ID used in the corresponding JavaScript. Each form needs to be followed by a Javascript snippet that allows the form to submit to Klaviyo. The JavaScript snippet for a given form will need to be configured with the same form ID.

signupFormCode3.png

If you add more than one form to your site, make sure you pick a new ID and change it in both the HTML and the JavaScript. 

Was this article helpful?
15 out of 61 found this helpful