How to add custom fields to a legacy form

You will learn

Learn how to add custom fields to a legacy sign-up form by making some small adjustments to the basic form code after you've added the code to your site. Adding custom fields to a form allows you to collect additional information about your subscribers as they opt-in.

Add fields to an embedded sign-up form

When adding custom fields to a simple sign up form, there are 2 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:

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

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.

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 sign-up 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 sign-up form

You can also add checkboxes to your sign-up 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."

Hide fields after submission

You can hide elements in your form after submission by adding class="klaviyo_form_actions" to the elements 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 sign-ups, popups, and flyouts. 

<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>

Additional resources

• Getting started with sign-up forms
• Legacy sign-up forms vs. built-in sign-up forms reference
• Customize the sign-up source property for a legacy form