Customize a Embedded Sign Up Form

read

Overview

The sign up form builder allows you to style a simple sign up form and then copy/paste the styled form code to your website with a few clicks. First, navigate to your list and select the Sign Up Forms option from the top menu bar. Next, click Standard Embed.

2017-05-19_11-16-35.png


After you customize your form's basic styling, you will see the corresponding code below. Copy this code and paste it into the main template code of your website.

2017-05-17_13-40-15.png

Form Configuration Options

The JavaScript to connect a simple sign up 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 sign up 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 sign up 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 from the form on your home page, 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 sign ups 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:

634841

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.

634844

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?
3 out of 15 found this helpful