How to collect date properties from your subscribers using a legacy form

You will learn

Learn how to collect date properties from your subscribers through a legacy form so that a day, month, and year input values combine inside Klaviyo as one date. Klaviyo can accept custom date fields submitted through a sign-up form.

In our example, we will walk through adding a birthday field to a sign-up form. This requires the following:

1. Adding Birthday as a value in your form's $fields hidden input.
2. Adding a block of code to your form for the date input selectors.

This guide walks through these two steps and then covers using the birthday field in Klaviyo.

Add birthday as a $fields value

The first step is to add the "Birthday" value to the $fields input of your form. If you already have a value here, you can add birthday as well, and separate the two with a comma. If this input doesn't exist, you can add it right after the hidden input with your list ID.

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

Add birthday selector fields to your form

Next, add the code below inside your form to add the birthday selectors. Note that the value for birthday_month options must be integers, but the label for those values can be text.

<div class="klaviyo_field_group select-date-widget">
 <label for="klaviyo_birthday_controls">Birthday</label>
 <div class="klaviyo_birthday_controls">
    <select name="Birthday_month" >
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
   </select>
   <select name="Birthday_day" >
     <option value=""> </option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option>
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
     <option value="16">16</option>
     <option value="17">17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20</option>
     <option value="21">21</option>
     <option value="22">22</option>
     <option value="23">23</option>
     <option value="24">24</option>
     <option value="25">25</option>
     <option value="26">26</option>
     <option value="27">27</option>
     <option value="28">28</option>
     <option value="29">29</option>
     <option value="30">30</option>
     <option value="31">31</option>
   </select>
 <input type="hidden" name="Birthday_year" value="2021" />
 </div>
</div>

This code will collect a month and day on your form, but automatically assigns the year 2021 to the date. This is because when sending birthday emails, you will likely only need to leverage the month and day. 

If you would like to collect a birthday year as well, you can change the birthday_year input to a select element with the years you want to use as options. 

• Adding a year selector is not important for Klaviyo because when you create a segment for someone's current birthday, Klaviyo will only look at the month and day. However, if you would like to collect a subscribers birthday year as well you can do so by updating the above code so that a subscriber can select a year, you can replace the hidden Birthday_year line of code with this:

​<select name="Birthday_year" >  
   <option value=""></option>  
   <option value="2021">2021</option> 
</select>

This will give the options of no value or 2021. To add more year options, it will look like this:

​<select name="Birthday_year" >  
​   <option value=""></option>  
   <option value="1990">1990</option>
   <option value="1991">1991</option>
   <option value="1992">1992</option>
   <option value="1993">1993</option>
   <option value="XXXX">XXXX</option>
</select>

Alternative: collect birthdays using a subscribe page

A less technical option is to add a date field to your subscribe page for a given list. 

Please note that if you use this method, subscribers must input their birthdays in the MM/DD format in order for Klaviyo to recognize the value as a date. 

If you want to follow up with subscribers after they first sign up to ask for their birthday information, you can insert a manage preferences tag into your welcome series email. In order to do this, you will need to update the subscribe page that is attached to the same list as your sign-up form.

Using a date field in Klaviyo

If your form is properly configured to collect date information, when it is submitted, these 2 dates will be combined into 1 field. This field will be added to Klaviyo as a custom property and added to each subscriber's Klaviyo profile. 

Learn how to set up a date property based flow.

Additional resources

• How to add custom fields to a legacy form
• How to customize the sign-up source property for a legacy form