COS Reference

Table of contents
Close

HubSpot form markup

HubSpot forms use Javascript to dynamically render the form's markup on your HubSpot-hosted or externally-hosted page. This article explains the markup that is rendered by the form's embed code and includes selectors that can be used to style the various field types.

Form markup explained

HubSpot Help article screenshot

HubSpot's form editor provides an easy to use UI that ultimately outputs the markup of a single, two, or three-column form. It is important to remember that the markup gets generated, based upon the form that you create in HubSpot. Label tags, placeholder attributes, help text, columns, and initial field values should all be controlled from within HubSpot's Form editor (Contacts > Forms).

The embed code generates a form tag and a div wrapper with an action attribute that submits to HubSpot via the Forms API submission endpoint. Each row of inputs is wrapped in a fieldset tag. Within the fieldset tags, there are React JS div tags that are used for progressive profiling and dependent form fields. Most fields render with label and input tags with help text in a div. Dropdown select fields have select and option tags, while other multi-select fields render their options with ul and li tags. You can learn more about the CSS selectors, below.

Each input has a type attribute that indicates the type of field, in addition to an unique ID attribute. Validation error messages render within a within a ul, li, and label tag. At the end of the form, there is a hidden field named hs_context that collects contextual information (such as the user's user token cookie: hubspot_utk) in a JSON block, passes it as part of the submission. HubSpot generates this information automatically.

Below is the example output of the depicted form with each of the standard HubSpot contact properties. 

Sample form output 


<div id="hs_form_target_widget_3540739632">
   <form accept-charset="UTF-8" action=
      "https://forms.hubspot.com/uploads/form/v2/158015/d9629729-b734-4866-a8e7-531b479446b0"
      class="hs-form stacked hs-custom-form" data-form-id=
      "d9629729-b734-4866-a8e7-531b479446b0" data-reactid=".0" enctype=
      "multipart/form-data" id=
      "hsForm_d9629729-b734-4866-a8e7-531b479446b0_4033" method="post" name=
      "hsForm_d9629729-b734-4866-a8e7-531b479446b0_4033" novalidate="">
      <fieldset class="form-columns-2" data-reactid=".0.1:$0">
         <div class="hs_firstname field hs-form-field" data-reactid=
            ".0.1:$0.1:$firstname">
            <label data-reactid=".0.1:$0.1:$firstname.0" for=
               "firstname-d9629729-b734-4866-a8e7-531b479446b0_4033"><span data-reactid=".0.1:$0.1:$firstname.0.0">
            First Name</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$0.1:$firstname.1" style="display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$0.1:$firstname.$firstname">
               <input class="hs-input" data-reactid=
                  ".0.1:$0.1:$firstname.$firstname.0" id=
                  "firstname-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="firstname" placeholder="" type="text">
            </div>
         </div>
          <div class="hs_lastname field hs-form-field" data-reactid=
            ".0.1:$0.1:$lastname">
            <label data-reactid=".0.1:$0.1:$lastname.0" for=
               "lastname-d9629729-b734-4866-a8e7-531b479446b0_4033"><span data-reactid=".0.1:$0.1:$lastname.0.0">
            Last Name</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$0.1:$lastname.1" style="display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$0.1:$lastname.$lastname">
               <input class="hs-input" data-reactid=
                  ".0.1:$0.1:$lastname.$lastname.0" id=
                  "lastname-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="lastname" placeholder="" type="text">
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$1">
         <div class="hs_email field hs-form-field" data-reactid=
            ".0.1:$1.1:$email">
            <label data-reactid=".0.1:$1.1:$email.0" for=
               "email-d9629729-b734-4866-a8e7-531b479446b0_4033"><span data-reactid=".0.1:$1.1:$email.0.0">
            Email</span><span class="hs-form-required" data-reactid=
               ".0.1:$1.1:$email.0.1">*</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$1.1:$email.1" style="display:none;"></div>
            <div class="input" data-reactid=".0.1:$1.1:$email.$email">
               <input class="hs-input" data-reactid=
                  ".0.1:$1.1:$email.$email.0" id=
                  "email-d9629729-b734-4866-a8e7-531b479446b0_4033" name=
                  "email" placeholder="" required="" type="email" value=
                  "dhunt@hubspot.com">
            </div>
         </div>
         <ul class="hs-error-msgs inputs-list" style="display: block;" data-reactid=".0.1:$1.1:$email.3">
            <li data-reactid=".0.1:$1.1:$email.3.0"><label data-reactid=".0.1:$1.1:$email.3.0.0">Please complete this mandatory field.</label></li>
         </ul>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$2">
         <div class="hs_single_line_text_property field hs-form-field"
            data-reactid=".0.1:$2.1:$single_line_text_property">
            <label data-reactid=
               ".0.1:$2.1:$single_line_text_property.0" for=
               "single_line_text_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$2.1:$single_line_text_property.0.0">Single Line Text
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$2.1:$single_line_text_property.1" style=
               "display:block;">
               This is help text.
            </div>
            <div class="input" data-reactid=
               ".0.1:$2.1:$single_line_text_property.$single_line_text_property">
               <input class="hs-input" data-reactid=
                  ".0.1:$2.1:$single_line_text_property.$single_line_text_property.0"
                  id=
                  "single_line_text_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="single_line_text_property" placeholder="" type=
                  "text" value="This is a default value.">
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$3">
         <div class="hs_multi_line_text_property field hs-form-field"
            data-reactid=".0.1:$3.1:$multi_line_text_property">
            <label data-reactid=".0.1:$3.1:$multi_line_text_property.0"
               for=
               "multi_line_text_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$3.1:$multi_line_text_property.0.0">Multi-line text
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$3.1:$multi_line_text_property.1" style=
               "display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$3.1:$multi_line_text_property.$multi_line_text_property">
               <textarea class="hs-input" data-reactid=
                  ".0.1:$3.1:$multi_line_text_property.$multi_line_text_property.0"
                  id=
                  "multi_line_text_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="multi_line_text_property" placeholder="">
               </textarea>
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$4">
         <div class="hs_dropdown_select_property field hs-form-field"
            data-reactid=".0.1:$4.1:$dropdown_select_property">
            <label data-reactid=".0.1:$4.1:$dropdown_select_property.0"
               for=
               "dropdown_select_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$4.1:$dropdown_select_property.0.0">Dropdown select
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$4.1:$dropdown_select_property.1" style=
               "display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$4.1:$dropdown_select_property.$dropdown_select_property">
               <select class="hs-input" data-reactid=
                  ".0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0"
                  id=
                  "dropdown_select_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="dropdown_select_property">
                  <option data-reactid=
                     ".0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.0"
                     disabled selected value="">
                     - Please Select -
                  </option>
                  <option data-reactid=
                     ".0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.1:$Option 1"
                     value="Option 1">
                     Option 1
                  </option>
                  <option data-reactid=
                     ".0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.1:$Option 2"
                     value="Option 2">
                     Option 2
                  </option>
                  <option data-reactid=
                     ".0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.1:$Option 3"
                     value="Option 3">
                     Option 3
                  </option>
               </select>
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$5">
         <div class="hs_radio_select_property field hs-form-field"
            data-reactid=".0.1:$5.1:$radio_select_property">
            <label data-reactid=".0.1:$5.1:$radio_select_property.0"
               for=
               "radio_select_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$5.1:$radio_select_property.0.0">Radio select
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$5.1:$radio_select_property.1" style="display:none;">
            </div>
            <div class="input" data-reactid=
               ".0.1:$5.1:$radio_select_property.$radio_select_property">
               <ul class="inputs-list multi-container" data-reactid=
                  ".0.1:$5.1:$radio_select_property.$radio_select_property.0">
                  <li class="hs-form-radio" data-reactid=
                     ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 1">
                     <label class="hs-form-radio-display" data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 1.0"
                        for=
                        "radio_select_property0-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 1.0.0"
                        id=
                        "radio_select_property0-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="radio_select_property" type="radio" value=
                        "Option 1"><span data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 1.0.1">Option
                     1</span></label>
                  </li>
                  <li class="hs-form-radio" data-reactid=
                     ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 2">
                     <label class="hs-form-radio-display" data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 2.0"
                        for=
                        "radio_select_property1-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 2.0.0"
                        id=
                        "radio_select_property1-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="radio_select_property" type="radio" value=
                        "Option 2"><span data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 2.0.1">Option
                     2</span></label>
                  </li>
                  <li class="hs-form-radio" data-reactid=
                     ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 3">
                     <label class="hs-form-radio-display" data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 3.0"
                        for=
                        "radio_select_property2-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 3.0.0"
                        id=
                        "radio_select_property2-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="radio_select_property" type="radio" value=
                        "Option 3"><span data-reactid=
                        ".0.1:$5.1:$radio_select_property.$radio_select_property.0.$Option 3.0.1">Option
                     3</span></label>
                  </li>
               </ul>
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$6">
         <div class=
            "hs_multiple_checkboxes_property field hs-form-field"
            data-reactid=".0.1:$6.1:$multiple_checkboxes_property">
            <label data-reactid=
               ".0.1:$6.1:$multiple_checkboxes_property.0" for=
               "multiple_checkboxes_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$6.1:$multiple_checkboxes_property.0.0">Multiple
            checkboxes property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$6.1:$multiple_checkboxes_property.1" style=
               "display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property">
               <ul class="inputs-list multi-container" data-reactid=
                  ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0">
                  <li class="hs-form-checkbox" data-reactid=
                     ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1">
                     <label class="hs-form-checkbox-display"
                        data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1.0"
                        for=
                        "multiple_checkboxes_property0-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1.0.0"
                        id=
                        "multiple_checkboxes_property0-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="multiple_checkboxes_property" type="checkbox"
                        value="Option 1"><span data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1.0.1">Option
                     1</span></label>
                  </li>
                  <li class="hs-form-checkbox" data-reactid=
                     ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2">
                     <label class="hs-form-checkbox-display"
                        data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2.0"
                        for=
                        "multiple_checkboxes_property1-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2.0.0"
                        id=
                        "multiple_checkboxes_property1-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="multiple_checkboxes_property" type="checkbox"
                        value="Option 2"><span data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2.0.1">Option
                     2</span></label>
                  </li>
                  <li class="hs-form-checkbox" data-reactid=
                     ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3">
                     <label class="hs-form-checkbox-display"
                        data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3.0"
                        for=
                        "multiple_checkboxes_property2-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3.0.0"
                        id=
                        "multiple_checkboxes_property2-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="multiple_checkboxes_property" type="checkbox"
                        value="Option 3"><span data-reactid=
                        ".0.1:$6.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3.0.1">Option
                     3</span></label>
                  </li>
               </ul>
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$7">
         <div class="hs_single_checkbox_property field hs-form-field"
            data-reactid=".0.1:$7.1:$single_checkbox_property">
            <label data-reactid=".0.1:$7.1:$single_checkbox_property.0"
               for=
               "single_checkbox_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$7.1:$single_checkbox_property.0.0"></span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$7.1:$single_checkbox_property.1" style=
               "display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$7.1:$single_checkbox_property.$single_checkbox_property">
               <ul class="inputs-list" data-reactid=
                  ".0.1:$7.1:$single_checkbox_property.$single_checkbox_property.0">
                  <li class="hs-form-booleancheckbox" data-reactid=
                     ".0.1:$7.1:$single_checkbox_property.$single_checkbox_property.0.0">
                     <label class="hs-form-booleancheckbox-display"
                        data-reactid=
                        ".0.1:$7.1:$single_checkbox_property.$single_checkbox_property.0.0.0"
                        for=
                        "single_checkbox_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
                     <input class="hs-input" data-reactid=
                        ".0.1:$7.1:$single_checkbox_property.$single_checkbox_property.0.0.0.0"
                        id=
                        "single_checkbox_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                        name="single_checkbox_property" type="checkbox"
                        value="true"><span data-reactid=
                        ".0.1:$7.1:$single_checkbox_property.$single_checkbox_property.0.0.0.1">Single
                     checkbox property</span></label>
                  </li>
               </ul>
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$8">
         <div class="hs_number_property field hs-form-field"
            data-reactid=".0.1:$8.1:$number_property">
            <label data-reactid=".0.1:$8.1:$number_property.0" for=
               "number_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=".0.1:$8.1:$number_property.0.0">Number
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$8.1:$number_property.1" style="display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$8.1:$number_property.$number_property">
               <input class="hs-input" data-reactid=
                  ".0.1:$8.1:$number_property.$number_property.0" id=
                  "number_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="number_property" placeholder="" step="any" type=
                  "number" value="">
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$9">
         <div class="hs_file_upload_property field hs-form-field"
            data-reactid=".0.1:$9.1:$file_upload_property">
            <label data-reactid=".0.1:$9.1:$file_upload_property.0"
               for="file_upload_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$9.1:$file_upload_property.0.0">File upload
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$9.1:$file_upload_property.1" style="display:none;">
            </div>
            <div class="input" data-reactid=
               ".0.1:$9.1:$file_upload_property.$file_upload_property">
               <input class="hs-input" data-reactid=
                  ".0.1:$9.1:$file_upload_property.$file_upload_property.0"
                  id=
                  "file_upload_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="file_upload_property" size="30" type="file">
            </div>
         </div>
      </fieldset>
      <fieldset class="form-columns-1" data-reactid=".0.1:$10">
         <div class="hs_date_picker_property field hs-form-field"
            data-reactid=".0.1:$10.1:$date_picker_property">
            <label data-reactid=".0.1:$10.1:$date_picker_property.0"
               for=
               "date_picker_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
            <span data-reactid=
               ".0.1:$10.1:$date_picker_property.0.0">Date picker
            property</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$10.1:$date_picker_property.1" style="display:none;">
            </div>
            <div class="input" data-reactid=
               ".0.1:$10.1:$date_picker_property.$date_picker_property">
               <div class="hs-dateinput" data-reactid=
                  ".0.1:$10.1:$date_picker_property.$date_picker_property.0">
                  <input class="hs-input" data-reactid=
                     ".0.1:$10.1:$date_picker_property.$date_picker_property.0.0"
                     id=
                     "date_picker_property-d9629729-b734-4866-a8e7-531b479446b0_4033"
                     name="date_picker_property" readonly type="text"
                     value="">
                  <div class="hs-datepicker" data-reactid=
                     ".0.1:$10.1:$date_picker_property.$date_picker_property.0.1"
                     style="position:absolute;z-index:10000;">
                     <div class="pika-single is-hidden is-bound"
                        style=
                        "position: static; left: auto; top: auto;">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </fieldset>
      <div class="hs_submit" data-reactid=".0.3">
         <div class="hs-field-desc" data-reactid=".0.3.0" style=
            "display:none;"></div>
         <div class="actions" data-reactid=".0.3.1">
            <input class="hs-button primary large" data-reactid=
               ".0.3.1.0" type="submit" value="Submit">
         </div>
      </div>
      <input data-reactid=".0.4" name="hs_context" type="hidden"
         value=
         "{"css":"","pageUrl":"http://www.davidjosephhunt.com/-temporary-slug-7a9771b0-f92c-44ed-ae1f-f7a4a44a5327?hs_preview=oc7eJDa5-3540739637","pageTitle":"","isHostedOnHubspot":true,"timestamp":1446499489467,"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36","hutk":"9c9e4351ae15f4a8105fec97e218e89c","originalEmbedContext":{"portalId":"158015","formId":"d9629729-b734-4866-a8e7-531b479446b0","formInstanceId":"4033","pageId":3540739637,"redirectUrl":"http://www.davidjosephhunt.com/-temporary-slug-7a9771b0-f92c-44ed-ae1f-f7a4a44a5327?portalId=158015&hsFormKey=8875f00c8ce1981f130cc24ade5fb41a#widget_3540739632","deactivateSmartForm":true,"css":"","target":"#hs_form_target_widget_3540739632","contentType":"landing-page","formData":{"cssClass":"hs-form stacked hs-custom-form"}},"formName":"Standard properties","recentFieldsCookie":{},"pageId":3540739637,"boolCheckBoxFields":"single_checkbox_property","dateFields":"date_picker_property","redirectUrl":"http://www.davidjosephhunt.com/-temporary-slug-7a9771b0-f92c-44ed-ae1f-f7a4a44a5327?portalId=158015&hsFormKey=8875f00c8ce1981f130cc24ade5fb41a#widget_3540739632","formInstanceId":"4033","smartFields":{},"urlParams":{"hs_preview":"oc7eJDa5-3540739637"},"formValidity":{"lastname":{"valid":true,"errors":[]},"firstname":{"valid":true,"errors":[]},"multi_line_text_property":{"valid":true,"errors":[]}}}">
   </form>
</div>

Styling forms

You can style HubSpot forms by targeting fields with standard attribute selectors. Below is a list of these and other commonly used selectors. The selectors are nested within the class="hs-form" form tag element for the sake of specificity to only style HubSpot forms. If you want to style all forms, you can replace .hs-form with "body" or remove the nesting all together. For additional selectors, check out the HubSpot Boilerplate CSS file. 


/* All HubSpot Forms
   ========================================================================== */

/* Form Field (selector for form field wrapper) */
.hs-form .hs-form-field {}

/* Descriptions (targets class applied to Help Text divs) */
.hs-form .hs-field-desc {}

/* Labels (selects field labels and error messages) */
.hs-form label {}
.hs-form .hs-form-field > label {}

/* Inputs (selectors for all inputs)  */
.hs-form input[type="text"],
.hs-form input[type="password"], 
.hs-form input[type="datetime"], 
.hs-form input[type="datetime-local"], 
.hs-form input[type="date"], 
.hs-form input[type="month"], 
.hs-form input[type="time"], 
.hs-form input[type="week"], 
.hs-form input[type="number"], 
.hs-form input[type="email"], 
.hs-form input[type="url"], 
.hs-form input[type="search"], 
.hs-form input[type="tel"], 
.hs-form input[type="color"],
.hs-form input[type="file"],
.hs-form textarea,
.hs-form select {}

/* Inputs in focus (selectors for all inputs when clicked)  */
.hs-form input[type="text"]:focus,
.hs-form input[type="password"]:focus, 
.hs-form input[type="datetime"]:focus, 
.hs-form input[type="datetime-local"]:focus, 
.hs-form input[type="date"]:focus, 
.hs-form input[type="month"]:focus, 
.hs-form input[type="time"]:focus, 
.hs-form input[type="week"]:focus, 
.hs-form input[type="number"]:focus, 
.hs-form input[type="email"]:focus, 
.hs-form input[type="url"]:focus, 
.hs-form input[type="search"]:focus, 
.hs-form input[type="tel"]:focus, 
.hs-form input[type="color"]:focus,
.hs-form input[type="file"]:focus,
.hs-form textarea:focus,
.hs-form select:focus {}

/* Multi-line inputs (selectors to target multi-line fields */
.hs-form textarea {}
.hs-form textarea:focus {}

/* Dropdowns (selectors for dropdowns) */
.hs-form select {}
.hs-form select:focus {}

/* Multi-select (selectors for multi-select fields) */
.hs-form form.hs-form .hs-form-field ul.inputs-list {}

.hs-form form.hs-form .hs-form-field ul.inputs-list li input {}
.hs-form input[type="radio"] {}
.hs-form input[type="checkbox"] {}

/* Required (selectors for fields, when they do not pass validation) */
.hs-form input:focus:required:invalid, 
.hs-form textarea:focus:required:invalid, 
.hs-form select:focus:required:invalid {}

.hs-form input:focus:required:invalid:focus, 
.hs-form textarea:focus:required:invalid:focus, 
.hs-form select:focus:required:invalid:focus {}

/* Error message (selector for validation messages) */
.hs-form .hs-error-msgs label{}

/* Placeholder Text (styles the placeholder attribute text) */
::-webkit-input-placeholder { /* Webkit Browsers */}
:-moz-placeholder { /* Firefox 18- */}
::-moz-placeholder { /* Firefox 19+ */}
:-ms-input-placeholder { /* IE10 */}

/* Multi Column Form (selectors for fieldsets and field wrappers) 
   ========================================================================== */

.hs-form .hs-form fieldset.form-columns-1 {}
.hs-form .hs-form fieldset.form-columns-1 .hs-form-field {}

.hs-form .hs-form fieldset.form-columns-2 {}
.hs-form .hs-form fieldset.form-columns-2 .hs-form-field {}

.hs-form .hs-form fieldset.form-columns-3 {}
.hs-form .hs-form fieldset.form-columns-3 .hs-form-field {}

/* Submit buttons (selectors for all non-CTA buttons) 
   ========================================================================== */

body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {}

body .hs-button.primary:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {}

body .hs-button.primary:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {}


Default embedded form CSS

If you are embedding a form and do not disable the default CSS, the following code will render in a style tag within your external page's head tag:


.hs-button-reset,
.hs-form .hs-button {
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1;
    margin: 0;
    outline: 0;
    padding: 0
}

.base-hs-button-styles,
.hs-form .hs-button {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    padding: 7px 18px 7px;
    position: relative;
    text-align: center
}

.base-hs-button-styles:hover,
.hs-form .hs-button:hover {
    text-decoration: none
}

input.hs-input[type=checkbox],
input.hs-input[type=radio] {
    cursor: pointer
}

input.hs-input,
textarea.hs-input,
select.hs-input {
    display: inline-block;
    width: 210px;
    height: 18px;
    padding: 4px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    color: #666;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px
}

textarea.hs-input {
    padding-top: 5px
}

html.webkit textarea.hs-input {
    padding-top: 6px;
    padding-left: 5px
}

input.hs-input[type=checkbox],
input.hs-input[type=radio] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 3px 0;
    line-height: normal;
    border: none
}

input.hs-input[type=file] {
    background-color: #fff;
    padding: initial;
    border: initial;
    line-height: initial;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

input.hs-input[type=button],
input.hs-input[type=reset],
input.hs-input[type=submit] {
    width: auto;
    height: auto
}

input.hs-input[type=search] {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    border-radius: 16px;
    background-image: url("/common_assets/static-2.158/img/form/search.png");
    background-repeat: no-repeat;
    padding-left: 26px;
    padding-right: 6px;
    padding-top: 5px;
    padding-bottom: 3px;
    background-position: 8px 8px
}

html.firefox input.hs-input[type=search] {
    position: relative;
    top: 1px
}

input.hs-input[type=search].transparent-image {
    background-image: url("/common_assets/static-2.158/img/form/search-transparent.png")
}

input.hs-input[type="search"]::-webkit-search-decoration,
input.hs-input[type="search"]::-webkit-search-cancel-button,
input.hs-input[type="search"]::-webkit-search-results-button,
input.hs-input[type="search"]::-webkit-search-results-decoration {
    display: none
}

select.hs-input,
input.hs-input[type=file] {
    height: 27px
}

select[multiple].hs-input {
    height: inherit
}

textarea.hs-input {
    height: auto
}

.hs-input:-moz-placeholder {
    color: #bfbfbf
}

.hs-input::-webkit-input-placeholder {
    color: #bfbfbf
}

input.hs-input,
textarea.hs-input {
    -webkit-transition: border 0.2s linear, box-shadow 0.2s linear;
    -moz-transition: border 0.2s linear, box-shadow 0.2s linear;
    transition: border 0.2s linear, box-shadow 0.2s linear;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1)
}

input.hs-input:focus,
textarea.hs-input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)
}

input.hs-input.error,
.hs-form div.field.error input,
.hs-form div.field.error textarea,
.hs-form div.field.error .chzn-choices,
textarea.hs-input.error {
    border-color: #c87872;
    -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
    -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
    box-shadow: 0 0 3px rgba(171, 41, 32, 0.25)
}

input.hs-input.error:focus,
.hs-form div.field.error input:focus,
.hs-form div.field.error textarea:focus,
.hs-form div.field.error .chzn-choices:focus,
textarea.hs-input.error:focus {
    border-color: #b9554d;
    -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
    -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
    box-shadow: 0 0 6px rgba(171, 41, 32, 0.5)
}

.input-mini.hs-input,
input.mini.hs-input,
textarea.mini.hs-input,
select.mini.hs-input {
    width: 60px
}

.input-small.hs-input,
input.small.hs-input,
textarea.small.hs-input,
select.small.hs-input {
    width: 90px
}

.input-medium.hs-input,
input.medium.hs-input,
textarea.medium.hs-input,
select.medium.hs-input {
    width: 150px
}

.input-large.hs-input,
input.large.hs-input,
textarea.large.hs-input,
select.large.hs-input {
    width: 210px
}

.input-xlarge.hs-input,
input.xlarge.hs-input,
textarea.xlarge.hs-input,
select.xlarge.hs-input {
    width: 270px
}

.input-xxlarge.hs-input,
input.xxlarge.hs-input,
textarea.xxlarge.hs-input,
select.xxlarge.hs-input {
    width: 530px
}

.input-stretch.hs-input,
input.stretch.hs-input,
textarea.stretch.hs-input,
select.stretch.hs-input {
    box-sizing: border-box;
    width: 100%
}

textarea.hs-input.xxlarge {
    overflow-y: auto
}

input.hs-input.span1,
textarea.hs-input.span1,
select.hs-input.span1 {
    display: inline-block;
    float: none;
    width: 30px;
    margin-left: 0
}

input.hs-input.span2,
textarea.hs-input.span2,
select.hs-input.span2 {
    display: inline-block;
    float: none;
    width: 90px;
    margin-left: 0
}

input.hs-input.span3,
textarea.hs-input.span3,
select.hs-input.span3 {
    display: inline-block;
    float: none;
    width: 150px;
    margin-left: 0
}

input.hs-input.span4,
textarea.hs-input.span4,
select.hs-input.span4 {
    display: inline-block;
    float: none;
    width: 210px;
    margin-left: 0
}

input.hs-input.span5,
textarea.hs-input.span5,
select.hs-input.span5 {
    display: inline-block;
    float: none;
    width: 270px;
    margin-left: 0
}

input.hs-input.span6,
textarea.hs-input.span6,
select.hs-input.span6 {
    display: inline-block;
    float: none;
    width: 330px;
    margin-left: 0
}

input.hs-input.span7,
textarea.hs-input.span7,
select.hs-input.span7 {
    display: inline-block;
    float: none;
    width: 390px;
    margin-left: 0
}

input.hs-input.span8,
textarea.hs-input.span8,
select.hs-input.span8 {
    display: inline-block;
    float: none;
    width: 450px;
    margin-left: 0
}

input.hs-input.span9,
textarea.hs-input.span9,
select.hs-input.span9 {
    display: inline-block;
    float: none;
    width: 510px;
    margin-left: 0
}

input.hs-input.span10,
textarea.hs-input.span10,
select.hs-input.span10 {
    display: inline-block;
    float: none;
    width: 570px;
    margin-left: 0
}

input.hs-input.span11,
textarea.hs-input.span11,
select.hs-input.span11 {
    display: inline-block;
    float: none;
    width: 630px;
    margin-left: 0
}

input.hs-input.span12,
textarea.hs-input.span12,
select.hs-input.span12 {
    display: inline-block;
    float: none;
    width: 690px;
    margin-left: 0
}

input.hs-input.span13,
textarea.hs-input.span13,
select.hs-input.span13 {
    display: inline-block;
    float: none;
    width: 750px;
    margin-left: 0
}

input.hs-input.span14,
textarea.hs-input.span14,
select.hs-input.span14 {
    display: inline-block;
    float: none;
    width: 810px;
    margin-left: 0
}

input.hs-input.span15,
textarea.hs-input.span15,
select.hs-input.span15 {
    display: inline-block;
    float: none;
    width: 870px;
    margin-left: 0
}

input.hs-input.span16,
textarea.hs-input.span16,
select.hs-input.span16 {
    display: inline-block;
    float: none;
    width: 930px;
    margin-left: 0
}

input.hs-input[disabled],
select.hs-input[disabled],
textarea.hs-input[disabled] {
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed
}

.help-inline,
.help-block {
    font-size: 11px;
    line-height: 18px;
    color: #818181
}

.help-inline {
    padding-left: 5px
}

.help-block {
    display: block;
    max-width: 600px
}

.inline-inputs {
    color: #818181
}

.inline-inputs span,
.inline-inputs input {
    display: inline-block
}

.inline-inputs input.mini {
    width: 60px
}

.inline-inputs input.small {
    width: 90px
}

.inline-inputs span {
    padding: 0 2px 0 1px
}

.input-prepend input,
.input-append input {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0
}

.input-prepend .add-on,
.input-append .add-on {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ccc;
    z-index: 2;
    float: left;
    display: block;
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 4px 4px 4px 5px;
    margin-right: -1px;
    font-weight: normal;
    line-height: 18px;
    color: #bfbfbf;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px
}

.input-prepend .active,
.input-append .active {
    background: #bfe0bf;
    border-color: #59ad59
}

.input-append input {
    float: left;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px
}

.input-append .add-on {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    margin-right: 0;
    margin-left: -1px
}

.hs-form {
    margin-bottom: 18px
}

.hs-form fieldset {
    margin-bottom: 18px;
    padding-top: 18px
}

.hs-form fieldset legend {
    display: block;
    margin-left: 150px;
    font-size: 19.5px;
    line-height: 1;
    color: #414141
}

.hs-form .clearfix,
.hs-form .field,
.hs-form .hs-form-field {
    margin-bottom: 18px
}

.hs-form .clearfix:after,
.hs-form .field:after,
.hs-form .hs-form-field:after {
    content: "";
    display: table;
    clear: both
}

.hs-form label {
    padding-top: 5px;
    font-size: 13px;
    line-height: 18px;
    font-weight: bold;
    float: left;
    width: 130px;
    text-align: right;
    color: #414141
}

.hs-form .input {
    margin-left: 150px
}

.hs-form div.field.error {
    background: #fae5e3;
    padding: 6px 0;
    margin-bottom: 18px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px
}

.hs-form div.field.error>label,
.hs-form div.field.error span.help-inline,
.hs-form div.field.error span.help-block {
    color: #9d261d
}

.hs-form div.field.error .input-prepend span.add-on,
.hs-form div.field.error .input-append span.add-on {
    background: #f4c8c5;
    border-color: #c87872;
    color: #b9554d
}

.hs-form .hsErrMsgContainer ul {
    margin-top: 6px;
    margin-bottom: 0px;
    margin-left: 7px;
    list-style: none
}

.hs-form .hsErrMsgContainer ul li {
    font-size: 12px;
    color: #a44e47
}

.hs-form .hsErrMsgContainer .hs-block-message {
    min-width: 200px;
    width: 200px
}

.hs-form .hsErrMsgContainer .hs-block-message ul {
    margin-top: 0px
}

.hs-form .actions {
    background: #f5f5f5;
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 17px 20px 18px 150px;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px
}

.hs-form .actions .secondary-action {
    float: right
}

.hs-form .actions .secondary-action a {
    line-height: 30px
}

.hs-form .actions .secondary-action a:hover {
    text-decoration: underline
}

.hs-form .inputs-list {
    margin: 0 0 5px;
    width: 100%
}

.hs-form .inputs-list>li {
    display: block;
    padding: 0;
    width: 100%
}

.hs-form .inputs-list label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    line-height: 18px;
    text-align: left;
    white-space: normal;
    font-weight: normal
}

.hs-form .inputs-list label strong {
    color: #818181
}

.hs-form .inputs-list label small {
    font-size: 11px;
    font-weight: normal
}

.hs-form .inputs-list .inputs-list {
    margin-left: 25px;
    margin-bottom: 10px;
    padding-top: 0
}

.hs-form .inputs-list:first-child {
    padding-top: 6px
}

.hs-form .inputs-list>li+li {
    padding-top: 2px
}

.hs-form .inputs-list input[type=radio],
.hs-form .inputs-list input[type=checkbox] {
    margin-bottom: 0
}

.hs-form.stacked {
    padding-left: 20px
}

.hs-form.stacked fieldset {
    padding-top: 9px
}

.hs-form.stacked legend {
    margin-left: 0
}

.hs-form.stacked label {
    display: block;
    float: none;
    width: auto;
    font-weight: bold;
    text-align: left;
    line-height: 20px;
    padding-top: 0;
    margin-bottom: 4px
}

.hs-form.stacked .field {
    margin-bottom: 18px
}

.hs-form.stacked .field div.input {
    margin-left: 0
}

.hs-form.stacked .field div.input>input+a,
.hs-form.stacked .field div.input select+a,
.hs-form.stacked .field div.input textarea+a {
    margin-top: 4px;
    display: block
}

.hs-form.stacked .inputs-list {
    margin-bottom: 0
}

.hs-form.stacked .inputs-list>li {
    padding-top: 0
}

.hs-form.stacked .inputs-list>li label {
    font-weight: normal;
    padding-top: 0
}

.hs-form.stacked div.error {
    padding: 3px 10px 6px;
    margin-top: 0;
    margin-left: -10px;
    margin-bottom: 9px
}

.hs-form.stacked .actions {
    margin-left: -20px;
    padding-left: 20px
}

.hs-form {
    padding-left: 0px
}

.hs-form.stacked {
    padding-left: 0px
}

.hs-form.stacked fieldset {
    padding: 0
}

.hs-form .hs-button {
    color: #fff;
    text-shadow: 0 -1px 0 #3574e3;
    background-color: #3574e3;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ec8f4), color-stop(100%, #3574e3));
    background-image: -webkit-linear-gradient(top, #7ec8f4, #3574e3);
    background-image: -moz-linear-gradient(top, #7ec8f4, #3574e3);
    background-image: linear-gradient(top, #7ec8f4, #3574e3);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    border-top: 1px solid #64baf0;
    border-bottom: 1px solid #1c4ed5;
    border-right: 1px solid #468ee6;
    border-left: 1px solid #468ee6;
    border-radius: 4px;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.hs-form .hs-button:visited,
.hs-form .hs-button:hover {
    color: #fff
}

.hs-form .hs-button:hover:not(.inactive),
.hs-form .hs-button:focus:not(.inactive),
.hs-form .hs-button.hovered:not(.inactive) {
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0 0 5px #3574e3;
    border-top: 1px solid #4db0ee;
    border-bottom: 1px solid #1946be;
    border-right: 1px solid #3080e3;
    border-left: 1px solid #3080e3
}

.hs-form .hs-button:active:not(.inactive):not(.link),
.hs-form .hs-button.depressed:not(.inactive):not(.link),
.dropdown-open>.hs-form .hs-button:not(.inactive):not(.link) {
    background-color: #599eeb;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3574e3), color-stop(100%, #599eeb));
    background-image: -webkit-linear-gradient(top, #3574e3, #599eeb);
    background-image: -moz-linear-gradient(top, #3574e3, #599eeb);
    background-image: linear-gradient(top, #3574e3, #599eeb);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 0px rgba(255, 255, 255, 0.3);
    border-top: 1px solid #1c4ed5;
    border-bottom: 1px solid #4084e2;
    border-right: 1px solid #468ee6;
    border-left: 1px solid #468ee6
}

.dropdown-open>.hs-form .hs-button:not(.inactive):not(.link) {
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3)
}

.hs-form .hs-button.disabled.disabled.disabled.disabled,
.hs-form .hs-button[disabled][disabled][disabled] {
    background-color: #6387c5;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #88b1ce), color-stop(100%, #6387c5));
    background-image: -webkit-linear-gradient(top, #88b1ce, #6387c5);
    background-image: -moz-linear-gradient(top, #88b1ce, #6387c5);
    background-image: linear-gradient(top, #88b1ce, #6387c5);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0);
    border-top: 1px solid #7baacc;
    border-bottom: 1px solid #5774be;
    border-right: 1px solid #6c94c7;
    border-left: 1px solid #6c94c7;
    cursor: default;
    color: #ededed;
    text-shadow: none;
    opacity: 0.6
}

.hs-form .hs-button.disabled.disabled.disabled.disabled.next:before,
.hs-form .hs-button[disabled][disabled][disabled].next:before {
    opacity: 0.5
}

.hs-form .hs-button.disabled.disabled.disabled.disabled.previous:before,
.hs-form .hs-button[disabled][disabled][disabled].previous:before {
    opacity: 0.5
}

.hs-form .hs-button.next:before,
.hs-form .hs-button.previous:before {
    background: url(/style_guide/static-8.319/img/hs-button-arrows.png) center 0 no-repeat;
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 5px;
    content: " ";
    z-index: 99
}

.hs-form .hs-button.next {
    padding-right: 32px
}

.hs-form .hs-button.next:before {
    right: 9px
}

.hs-form .hs-button.previous {
    padding-left: 32px
}

.hs-form .hs-button.previous:before {
    background-position: center -16px;
    left: 9px
}

.hs-form .hs-button.inactive {
    cursor: default
}

.hs-form ul {
    list-style: none
}

.hs-form label {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.hs-form label.hidden {
    display: none
}

.hs-form .hs-field-desc {
    color: #aaa;
    margin: 0px 0px 5px 150px;
    font-size: 11px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.hs-form .hs-form-required {
    color: red
}

.hs-form .field {
    margin-bottom: 9px
}

.hs-form .hs-richtext {
    margin-bottom: 3px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 18px;
    font-size: 14px;
    color: #414141
}

.hs-form .hs-richtext hr {
    text-align: left;
    margin-left: 0;
    width: 91%
}

.hs-form .email-correction,
.hs-form .email-validation {
    padding-top: 3px;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.hs-form .email-correction a,
.hs-form .email-validation a {
    cursor: pointer
}

.hs-form .inputs-list {
    padding-left: 5px;
    list-style: none
}

.hs-form .inputs-list li input {
    margin: 3px 5px 3px 0px
}

.hs-form input[type=checkbox],
.hs-form input[type=radio] {
    margin-right: 5px
}

.hs-form input:not([type="image"]),
.hs-form textarea {
    box-sizing: content-box
}

.hs-form.stacked .hs-field-desc {
    margin: 0px 0px 2px 0px
}

.hs-form .hs-input,
.hs-form textarea.hs-input {
    box-sizing: border-box;
    max-width: 500px;
    width: 90%
}

.hs-form .hs-input:not[type=checkbox],
.hs-form .hs-input:not[type=radio],
.hs-form textarea.hs-input:not[type=checkbox],
.hs-form textarea.hs-input:not[type=radio] {
    min-height: 18px;
    min-width: 100px
}

.hs-form .actions {
    background: transparent;
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 17px 20px 18px 0px;
    border-top: none;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px
}

.hs-form .actions .secondary-action {
    float: right
}

.hs-form .actions .secondary-action a {
    line-height: 30px
}

.hs-form .actions .secondary-action a:hover {
    text-decoration: underline
}

.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.pika-single.is-hidden {
    display: none
}

.pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5)
}

.pika-single {
    *zoom: 1
}

.pika-single:before,
.pika-single:after {
    content: " ";
    display: table
}

.pika-single:after {
    clear: both
}

.pika-lendar {
    float: left;
    width: 240px;
    margin: 8px
}

.pika-title {
    position: relative;
    text-align: center
}

.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    filter: alpha(opacity=0);
    opacity: 0
}

.pika-label {
    display: inline-block;
    *display: inline;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff
}

.pika-prev,
.pika-next {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    text-indent: 20px;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: 0.5;
    *position: absolute;
    *top: 0
}

.pika-prev:hover,
.pika-next:hover {
    opacity: 1
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
    cursor: default;
    opacity: 0.2
}

.pika-prev,
.is-rtl .pika-next {
    float: left;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
    *left: 0
}

.pika-next,
.is-rtl .pika-prev {
    float: right;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
    *right: 0
}

.pika-select {
    display: inline-block;
    *display: inline
}

.pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0
}

.pika-table th,
.pika-table td {
    width: 14.28571%;
    padding: 0
}

.pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: bold;
    text-align: center
}

.pika-table abbr {
    border-bottom: none;
    cursor: help
}

.pika-button {
    cursor: pointer;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #666;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #f5f5f5
}

.is-today .pika-button {
    color: #3af;
    font-weight: bold
}

.is-selected .pika-button {
    color: #fff;
    font-weight: bold;
    background: #3af;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px
}

.is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    color: #999;
    opacity: 0.3
}

.pika-button:hover {
    color: #fff !important;
    background: #ff8000 !important;
    box-shadow: none !important;
    border-radius: 3px !important
}

.pika-week {
    font-size: 11px;
    color: #999
}

.hs-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    max-width: 500px
}

.hs-form fieldset.form-columns-1 .hs-input {
    width: 95%
}

.hs-form fieldset.form-columns-1 .input {
    margin-right: 8px
}

.hs-form fieldset.form-columns-1 input[type="checkbox"],
.hs-form fieldset.form-columns-1 input[type="radio"] {
    width: auto
}

.hs-form fieldset.form-columns-2 .hs-form-field {
    width: 50%;
    float: left
}

.hs-form fieldset.form-columns-2 .input {
    margin-right: 8px
}

.hs-form fieldset.form-columns-3 .hs-form-field {
    width: 32.7%;
    float: left
}

.hs-form fieldset.form-columns-3 .input {
    margin-right: 8px
}

.hs-form fieldset .hs-form-field.hidden-label {
    margin-top: 24px
}

.hs-form .hs-social-login {
    border-radius: 3px;
    box-sizing: content-box;
    width: 95%;
    max-width: 480px;
    height: 90px
}

.hsformerror {
    margin: 0 0 2px;
    padding: 2px 6px;
    height: auto;
    background-color: #fdd2d0;
    font-size: 11px;
    border: 1px solid #fcb3af;
    padding: 4px 16px 4px 10px;
    color: #000;
    display: none;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #fdd2d0));
    background-image: -webkit-linear-gradient(#fefefe, #fdd2d0);
    background-image: -moz-linear-gradient(#fefefe, #fdd2d0);
    background-image: -o-linear-gradient(#fefefe, #fdd2d0);
    background-image: linear-gradient(#fefefe, #fdd2d0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 6px #ddd;
    -moz-box-shadow: 0 0 6px #ddd;
    box-shadow: 0 0 6px #ddd;
    z-index: 99999
}

.hsformerror em {
    border: 10px solid;
    border-color: #fdd2d0 transparent transparent;
    bottom: -17px;
    display: block;
    height: 0;
    left: 60px;
    position: absolute;
    width: 0
}

.hsformerror p {
    font-family: Lucida Grande, Lucida Sans Unicode, bitstream vera sans, trebuchet ms, verdana, sans-serif;
    margin: 0;
    float: left;
    margin-right: 8px
}

.hsformerror:hover {
    cursor: default
}

.hsformerror .close-form-error {
    float: right;
    display: inline;
    top: 3px;
    position: absolute;
    font-family: Verdana !important;
    color: #b17c79 !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: normal !important
}

.hsformerror .close-form-error:hover {
    color: #cc8884
}

@media (max-width: 400px),
(min-device-width: 320px) and (max-device-width: 480px) {
    form.hs-form .form-columns-2 .hs-form-field,
    form.hs-form .form-columns-3 .hs-form-field {
        float: none;
        width: 100%
    }
    form.hs-form .form-columns-2 .hs-form-field .hs-input,
    form.hs-form .form-columns-3 .hs-form-field .hs-input {
        width: 95%
    }
}

@media (max-width: 422px) {
    .all-social-types {
        height: 100px
    }
}

@media (max-width: 342px) {
    .hs-social-login {
        height: 72px
    }
}    
    

Modifying the form embed code

In addition to styling the form, you can also modify the embed code to affect the markup and the behavior. For more on modifying the embed code Javascript, check out this article

Forms API

If you want complete control over your markup, you can write your own markup and use HubSpot's Forms API to submit contact data into HubSpot