Add Custom Fields to a Signup Form

read

Overview

When embedding a simple sign up form, or adding a pop-up or fly-out, you may want to add form fields to collect additional information about your subscribers as they opt-in.

From within Klaviyo, you can adjust the layout and style of your form. Currently, to add fields to a Klaviyo sign up form, you have to make some small adjustments to the basic form code after you've added the code to your site.

 

Add Fields to an Embedded Sign Up Form

When adding custom fields to a simple sign up form, there are two steps:

  1. Specify your custom fields in an <input> element.
  2. Add a <label> and <input> for each custom field to your form.

The sections below cover both of these steps in detail.

Specify Your Custom Fields in an <input> Element

We do this to avoid collecting fields with extraneous or sensitive information. You specify your custom fields by adding a hidden <input> element with the attribute name="$fields". This hidden <input> element should be placed inside your Klaviyo <form></form> tags after the default hidden input that contains your List ID. Here is an example.

signupCustomPropExample.png

Notice that the value attribute of this input is a comma separated list of field names you want to include in your signup form. For example, to insert a favorite_color field and a favorite_sports_team field, we modify the example above as follows.

signupCustomPropExample.png

Below is an example of the snippet you can copy/paste. Make sure to modify the names of the custom fields to reflect the custom properties you want to use.

<input type="hidden" name="$fields" value="myCustomPropertyOne,myCustomPropertyTwo"/>

Add a <label> and <input> Element for Each Custom Field

After specifying which fields you would like to collect, you have to add inputs to your form so your subscribers can fill out the fields. Each input is a combination of an <label> element and an <input> element. The name attribute of each <input> element should be listed in the value attribute where you specified your custom fields above. Continuing with the example above, we can see how our Favorite_Color and Favorite_Sports_Team properties each require both a label and an input element. Note how the name attribute matches what we specified above.

signupCustomPropHighlight.png

Place these form elements directly below the Klaviyo default input with the attribute type="email".

Below is a copy of the code snippet you can copy/paste. Remember to update the snippet for your custom fields.

<label for="klaviyo_form_favorite_color">Favorite Color:</label>
<input id="klaviyo_form_favorite_color" type="text" name="favorite_color" value="" />
<label for="klaviyo_form_favorite_sports_team">Favorite Sports Team:</label>
<input id="klaviyo_form_favorite_sports_team" type="text" name="favorite_sports_team" value="" />

Add a Dropdown Menu to an Embedded Signup Form

Instead of a text input, you can also add a dropdown menu. First, make sure you have specified the custom field you want to add, and added the name of your custom field to the value attribute. Then, add a <label> and <select> element. Below is an example.

<label for="Primary Interest">Primary Interest:</label>
  <select name="Primary Interest">  
     <option value="News">News</option>  
     <option value="Politics">Politics</option>  
     <option value="Business">Business</option>  
     <option value="Sports">Sports</option>  
     <option value="Arts">Arts</option>  
  </select>
  

Add Checkboxes to an Embedded Signup Form

You can also add checkboxes to your signup form. First, make sure you have specified the custom field you want to add, and added the name of your custom field to the value attribute. Then, add a <label> and <input> element. Below is an example.

<label for="news-womens">Womens</label>​
<input type="checkbox" name="Gender" id="news-womens" value="Womens">

Note the following:

  • The input type should be checkbox
  • The name should be the name of the property you would like to populate in Klaviyo
  • The id should be unique to this form field - it doesn't have to be descriptive
  • The value should be the value of the property you wish to populate in Klaviyo when someone checks the box
  • If you'd like to assign a label to your checkbox, use the label tag and make sure to reference the id of the checkbox to which you want to apply the label

In this example, when someone signs up and checks the box Women's, Klaviyo will create "Gender" as a custom property on the subscriber's profile and populate that property with the value "Women's."

Learn more

You can also collect more complex data like subscriber birthdays.

Hide Fields After Submission

You can hide elements in your form after submission by adding class="klaviyo_form_actions" to the elemenets you want to hide.

For example, below is the code for adding a custom field to collect data on a customer's favorite color. The class="klaviyo_form_actions" has been added to both elements, so both elements will be hidden after the form is submitted.

<label class="klaviyo_form_actions" for="klaviyo_form_favorite_color">Favorite Color:</label>
<input class="klaviyo_form_actions" id="klaviyo_form_favorite_color" type="text" name="favorite_color" value="" />

Add Fields to a Popup or Flyout Form

The process of adding additional fields to a popup for flyout form requires only one step. Locate the following area of your form code:

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js">
  </script>
  <script type="text/javascript">
  KlaviyoSubscribe.attachModalSignUp({
     list: '[LIST_ID]',
     delay_seconds: 0.5,
     content: {
     }

Within where you see "content:", you will then see several key/value pairs. Here, you are going to add another:

extra_fields: ["ExtraProperty1", "ExtraProperty2"] 

Using the above syntax, replace "ExtraProperty1" and "ExtraProperty2" with the additional fields you would like to add. The following is a full example where we've added the First Name and Last Name fields to a popup:

<script type="text/javascript">
  KlaviyoSubscribe.attachModalSignUp({
     list: 'f4RzvZ',
     delay_seconds: 0.5,
     content: {
          clazz: ' klaviyo_modal_[LIST_ID]',
          header: "Interested in our Newsletter?",
          subheader: "Stay in the know with news and promotions.",
          button: "Subscribe",
          success: "Thanks! Check your email for a confirmation.",
          styles: '[STYLE CODE WILL BE HERE],
          extra_fields: ["$first_name", "$last_name"]
     }
    });
  </script>

Klaviyo will automatically assume these fields are text fields. If you want to specify a different type of field, you can use an array of JSON data to create these fields with specified types:

extra_fields: [{
    "name": "Form field name", 
    "type": "text/email", 
    "label": "Form field label"
  }]

Special Fields in Klaviyo

Klaviyo supports a few special field names that will add common information to someone's Klaviyo profile. The special fields are listed below -- make sure to use the syntax displayed here when adding these fields to your form:

  • $first_name, First name
  • $last_name, Last name
  • $phone_number, Phone number
  • $organization, Company or organization someone is affiliated with
  • $title, Occupation title at a company or organization

Add Custom Properties to Subscriber Profiles

If you want to pass a set hidden custom property that gets assigned to each subscriber's profile, this is possible through the "extra_properties" dictionary.

extra_properties: optional, dictionary. Set custom properties to someone's profile when the form submits.

For example, if you want to track where a subscriber is signing up from, you can add a custom $source property.

extra_properties: {            
            $source: 'Home Page'          
        }

This is the same for embedded signups, pop-ups, and fly outs. 

<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: 'Home Page'          
        }      
     });
  </script>
Was this article helpful?
5 out of 19 found this helpful