Stylesheet - Action Network

Custom Form HTML Style Guide

When writing your own HTML to add inputs to your pages on Action Network, follow this style guide to match your inputs to our styling so your code looks like it fits with your pages and form embeds visually and stores data as you expect.

Adding Inputs and Saving Data

Your HTML will appear at the bottom of your form, before the submit button, both on pages and in your embed of that page. You should not write your own form tag or submit input -- those will already be present in your form.

You can use almost any HTML you want -- every form input will work, as well as basic javascript/jQuery code for form logic. Action Network will accept any input name that you throw at it and save the value for that name that users enter in the database as a custom field, which you can then use to target emails or pull data from using reports.

Input HTML should include the input type, the input name, and the input value for checkboxes and radio buttons.

Here's an example of a text box that will save whatever a user enters to the database under the text_box name:

		  	
<input name="text_box" type="text" />

It will display like this:

Using the same form names on different pages will allow you to pull the same data across pages and will overwrite an activist's past answer stored in that form name. For example, if you use the input name story to collect people's stories on multiple pages, when you pull a report for the custom field story you'll receive stories from every page using that custom field unless you limit your targeting to one page or another, with the latest story per activist.

This means that you can collect standard information (like whether someone wants to volunteer) from activists by using the same form name every time. If you would like to make sure no overwriting occurs, use a unique form name on each page (like social_security_story instead of just story).

Text Box Inputs

Text box inputs should include a type and a name. You can optionally use a placeholder attribute to display a placeholder. Giving your inputs unique IDs that are different from the input's name is also recommend.

For example, this code:

		  	
<input name="text_box" type="text" placeholder="This is a text box with a placeholder" id="id_text_box" />

Will display like this:

Text Area Inputs

Text area inputs should include a name. You can optionally use a placeholder attribute to display a placeholder.

For example, this code:

		  	
<textarea name="text_area" placeholder="This is a text area with a placeholder" id="id_text_area"></textarea>

Will display like this:

Radio Button Inputs

Radio buttons that are part of the same group should have a type and the same name, as well as a unique value that will be stored in the database to indicate an activist's choice. Unique IDs that are different from the name are recommended as well. Radio buttons should be surrounded by a label with the class of radio, and the entire group should be surrounded by a span with the classes of controls and check_radio_field.

For example, this code will save either option_one or option_two into the database under the custom field radios when the activist submits the form, depending on their choice:

		  	
<span class="controls check_radio_field">
  <label class="radio">
        <input type="radio" name="radios" value="option_one" id="radio_option_one" />
        Option one
    </label>
    <label class="radio">
        <input type="radio" name="radios" value="option_two" id="radio_option_two" />
      Option two
  </label>
</span>

It will display like this:

Checkbox Inputs

Checkboxes should have unique names as well as unique values that will be stored in the database to indicate an activist's choice. Checkboxes that are part of the same group should have the class checkbox_group. Unique IDs that are different from the name are recommended as well. Checkboxes should be surrounded by a label with the class of checkbox, and the entire group should be surrounded by a span with the classes of controls and check_radio_field.

For example, this code will save 1 into the database under the custom field checkboxes_option_one and/or checkboxes_option_two when the activist submits the form, depending on their choices:

		  	
<span class="controls check_radio_field">
  <label class="checkbox">
        <input type="checkbox" name="checkbox_option_one" value="1" id="checkbox_option_one" />
        Option one
    </label>
    <label class="checkbox">
        <input type="checkbox" name="checkbox_option_two" value="1" id="checkbox_option_two" />
      Option two
  </label>
</span>

It will display like this:

Select Inputs

Select inputs should have a name, and each option within the input should have a unique value that will be stored in the database to indicate an activist's choice. You can have an option that has a blank value -- useful for making the top choice of your select box blank and using that for input validation, forcing the activist to pick a choice. You can group options by optgroups with a label attribute if you want. The select input should have a class of can_select and js-form_select2 and a unique ID that is different from the name is recommended as well. Finally, select inputs should be surrounded by a <div> tag with the class relative.

For example, this code will save the selected value into the database under the custom field select_input. If an activist chooses the top choice, nothing will be saved:

		  	
<div class="relative">
  <select name="select_input" class="can_select js-form_select2" id="id_select_input">
    <option value="">-- this is a blank option --</option>
    
    <optgroup label="Option Group 1">
      <option value="option_one">Option 1</option>
      <option value="option_two">Option 2</option>
    </optgroup>
    
    <optgroup label="Option Group 2">
      <option value="option_three">Option 3</option>
      <option value="option_four">Option 4</option>
    </optgroup>
  </select>
</div>

It will display like this:

Spacing and Grouping

Generally, each input should be surrounded in an <li> tag with the class control-group to space it out correctly. You can put more than one input together in a single <li> tag to have them display closer to each other. In addition, the <li> tag around a checkbox group needs the class checkbox_group_wrap.

For example, this code displays a few inputs, some in their own group and some together:

		  	
<li class="control-group">
  <input type="text" name="text_box" id="id_text_box" placeholder="Here is a textbox in its own group" />
</li>

<li class="control-group">
  <input type="text" name="text_box_2" id="id_text_box_2" placeholder="Here is a textbox" />
  <input type="text" name="text_box_3" id="id_text_box_3" placeholder="Grouped with another one" />
</li>

<li class="control-group checkbox_group_wrap">
  <span class="controls check_radio_field">
      <label class="checkbox">
      <input type="checkbox" name="checkbox_one" value="1" class="checkbox_group" id="id_checkbox_one" />
      And here are a few checkboxes
    </label>
    
    <label class="checkbox">
      <input type="checkbox" name="checkbox_two" value="2" class="checkbox_group" id="id_checkbox_two" />
      In their own group
    </label>
  </span>
</li>

Which will display like this:

Labels

Labels are optional but help give context and set off your inputs.

You can add labels before any input type by putting a label tag before your input HTML and inside your control group <li> tag with the class control-label and a for attribute pointing to the ID of the input to which this label is pointing to. Labels before select boxes should be placed outside of the <li> control group tag. Labels before checkbox and radio groups should have the class check_radio_label and can omit the for attribute -- this is not to be confused with the labels around each individual checkbox or radio button, but rather for labels addressing the entire group.

For example, this code shows you how to display labels before each input type:

		  	
<li class="control-group">
  <label class="control-label" for="id_text_box">Here is my text box:</label> 
  <input type="text" name="text_box" id="id_text_box" />
</li>

<li class="control-group">
  <label class="control-label" for="id_text_area">Here is my text area:</label> 
  <textarea name="text_area" id="id_text_area"></textarea>
</li>

<li class="control-group checkbox_group_wrap">
  <label class="control-label check_radio_label">Here is my checkbox group:</label>
  <span class="controls check_radio_field">
      <label class="checkbox">
      <input type="checkbox" name="checkbox_one" value="1" class="checkbox_group" id="id_checkbox_one" />
      Checkbox one
    </label>
    
    <label class="checkbox">
      <input type="checkbox" name="checkbox_two" value="1" class="checkbox_group" id="id_checkbox_two" />
      Checkbox two
    </label>
  </span>
</li>

<li class="control-group checkbox_group_wrap">
  <label class="control-label check_radio_label">Here is my radio group:</label>  
  <span class="controls check_radio_field">
    <label class="radio">
        <input type="radio" name="radios" value="option_one" id="id_radio_one" />
          Radio one
      </label>
      
      <label class="radio">
        <input type="radio" name="radios" value="option_two" id="id_radio_two" />
      Radio two
      </label>
  </span>
</li>

<label class="control-label" for="id_select_input">Here is my select box -- notice this label is outside of the control-group li tag:</label>
<li class="control-group">
  <div class="relative">
    <select name="select_input" class="can_select js-form_select2" id="id_select_input">
      <option value="option_one">Select one</option>
      <option value="option_two">Select two</option>
    </select>
  </div>
</li>

It will display like this:

Here is my text box:
Here is my text area:
Here is my checkbox group: Checkbox one Checkbox two
Here is my radio group: Radio one Radio two

Here is my select box -- notice this label is outside of the control-group li tag:

Required Fields

You can make any of your inputs required by adding the required class to them. For checkboxes, add the required_checkboxes class instead. Your activists will not be able to submit the form without filling out each required input.

We use the jQuery validation plugin to handle required fields, so you can use that API to further restrict your inputs. For example, adding the class ?number to a text box will cause an error to appear if the user enters in that box anything other than numbers. You can restrict inputs this way without making them required, so activists can leave them blank, but if they fill them out they need to use the right format. Click here to read more about the plugin's methods and options.

For example, this code shows you how to make each input type required. We've added a submit button and an error counting section so you can test it out.

		  	  	
<li class="control-group"> 
  <input type="text" name="text_box" id="id_text_box" placeholder="This text box is required" class="required" />
</li>

<li class="control-group"> 
  <input type="text" name="text_box" id="id_text_box" placeholder="Numbers only, please" class="number" />
</li>

<li class="control-group">
  <textarea name="text_area" id="id_text_area" placeholder="A required textarea" class="required"></textarea>
</li>

<li class="control-group checkbox_group_wrap">
  <span class="controls check_radio_field">
      <label class="checkbox">
      <input type="checkbox" name="checkbox_one" value="1" class="checkbox_group required_checkboxes" id="id_checkbox_one" />
      You must choose at least one
    </label>
    
    <label class="checkbox">
      <input type="checkbox" name="checkbox_two" value="1" class="checkbox_group required_checkboxes" id="id_checkbox_two" />
      Of these checkboxes
    </label>
  </span>
</li>

<li class="control-group checkbox_group_wrap">
  <span class="controls check_radio_field">
    <label class="radio">
        <input type="radio" name="radios" value="option_one" id="id_radio_one" class="required" />
          You must choose a an option
      </label>
      
      <label class="radio">
        <input type="radio" name="radios" value="option_two" id="id_radio_two" class="required" />
      To submit this form
      </label>
  </span>
</li>

<li class="control-group">
  <div class="relative">
    <select name="select_input" class="can_select js-form_select2 required" id="id_select_input">
      <option value="">-- pick an option --</option>
      <option value="option_one">Notice how the top option</option>
      <option value="option_two">Doesn't count because if has no value</option>
    </select>
  </div>
</li>

<li class="control-group">
  <input type="submit" value="Try Out Validation" />
</li>

<li id="error_message" class="js-error_message mt20"></li>

It will display like this -- try the submit button to see how it works!

You must choose at least one Of these checkboxes
You must choose a an option To submit this form

Custom Validation

If you use custom validation on your fields (added via the Questions & Custom Fields page), we will automatically ignore non-validating values if they are entered on forms. If you would like to enable javascript validation as well, so activists see a red error message and have to correct their input to submit, add a data-regex attribute with your regular expression to text or textarea inputs. Regular expresions will be evaluated with the "i" flag, for example "/[your regular expression]/i".

This code shows you how to make a text input accept only numbers.

		  	  	
<li class="control-group"> 
  <input type="text" name="text_box" id="id_text_box" placeholder="This field only takes numbers" data-regex="^\d+$" />
</li>

<li class="control-group">
  <input type="submit" value="Try Out Validation" />
</li>

<li id="error_message" class="js-error_message mt20"></li>

It will display like this -- try the submit button to see how it works!