Add Additional Fields to a Sign Up Form

Overview

When embedding a simple sign up form, or adding a pop-up for 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 fields to a simple sign up form, there are two steps.

  1. Specify What Additional Form Fields You Want Klaviyo to Accept
    We do this to avoid collecting fields with extraneous or sensitive information. You will need to specify these additional fields with a hidden input field inside your Klaviyo <form></form> tags named $fields.

    Place the following input near the top of your form, after the hidden input with your List ID:

    The value of this input should be a comma separated list of field names Klaviyo should include in your sign up form. For example, to insert a First Name field AND a Last Name field, this input would look like:

    <input type="hidden" name="$fields" value="first_name,last_name" />

  2. Add Inputs for These Fields to Your Form
    The first step only made it possible for your form to successfully collect data for the field labels you specified. This step did not actually add these fields to your form. 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.

    You will want to add a label for your field, and then add the input itself. Continuing with the example above, you would include the following form elements:
<label for="klaviyo_form_first_name">First Name:</label>
<input id="klaviyo_form_first_name" type="text" name="first_name" value="" />
<label for="klaviyo_form_last_name">Last Name:</label>
<input id="klaviyo_form_last_name" type="text" name="last_name" value="" />

You can place these form elements directly below the input type you see for email.

Create a Drop-Down Menu

If you want to create a field where your subscribers have to select an item from a drop-down, format your form element as follows:

<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

If you are interested in adding checkboxes to a simple embedded form, you will want to format your each checkbox input as follows:

<input type="checkbox" name="Gender" id="news-womens" value="Womens">
<label for="news-womens">Womens</label>​
  • 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."

As the steps above outline, make sure to also add another input to specify that you'd like Klaviyo to accept these checkbox fields. You will want to place this additional input near the top of your form, after the hidden input with your List ID:

<input name="$fields" type="hidden" value="Gender">

The value here should be what you set as the name of your checkbox input(s).

If you are creating a series of checkboxes where a subscriber may check more than one, you will need to add the following line: 

<input name="$list_fields" type="hidden" value="Gender">


Add Fields to a Popup or Flyout Form

The process of adding additional fields to a popup for flyout form requires only one step. All you need to do is 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.

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?
1 out of 2 found this helpful