CMS 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 (Marketing > Lead Capture > 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 


<span id="hs_cos_wrapper_my_form" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form">
   <h3 id="hs_cos_wrapper_my_form_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>
   <div id="hs_form_target_my_form">
      <form novalidate="" accept-charset="UTF-8" action="https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/6333443/f57de912-d759-4f67-ae76-efe001bbf926" enctype="multipart/form-data" id="hsForm_f57de912-d759-4f67-ae76-efe001bbf926_5033" method="POST" class="hs-form stacked hs-custom-form hs-form-private hsForm_f57de912-d759-4f67-ae76-efe001bbf926 hs-form-f57de912-d759-4f67-ae76-efe001bbf926 hs-form-f57de912-d759-4f67-ae76-efe001bbf926_2b318804-7ef5-417d-b02f-541fef8aa532" data-form-id="f57de912-d759-4f67-ae76-efe001bbf926" data-portal-id="6333443" target="target_iframe_f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0" _lpchecked="1">
         <fieldset class="form-columns-2" data-reactid=".hbspt-forms-0.1:$0">
            <div class="hs_firstname hs-firstname hs-fieldtype-text field hs-form-field" data-reactid=".hbspt-forms-0.1:$0.1:$firstname">
               <label id="label-firstname-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your First name" for="firstname-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$0.1:$firstname.0"><span data-reactid=".hbspt-forms-0.1:$0.1:$firstname.0.0">First name</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$0.1:$firstname.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$0.1:$firstname.$firstname"><input id="firstname-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="text" name="firstname" value="" placeholder="" autocomplete="given-name" data-reactid=".hbspt-forms-0.1:$0.1:$firstname.$firstname.0" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></div>
            </div>
            <div class="hs_lastname hs-lastname hs-fieldtype-text field hs-form-field" data-reactid=".hbspt-forms-0.1:$0.1:$lastname">
               <label id="label-lastname-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Last name" for="lastname-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$0.1:$lastname.0"><span data-reactid=".hbspt-forms-0.1:$0.1:$lastname.0.0">Last name</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$0.1:$lastname.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$0.1:$lastname.$lastname"><input id="lastname-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="text" name="lastname" value="" placeholder="" autocomplete="family-name" data-reactid=".hbspt-forms-0.1:$0.1:$lastname.$lastname.0"></div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$1">
            <div class="hs_email hs-email hs-fieldtype-text field hs-form-field" data-reactid=".hbspt-forms-0.1:$1.1:$email">
               <label id="label-email-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Email" for="email-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$1.1:$email.0"><span data-reactid=".hbspt-forms-0.1:$1.1:$email.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.1:$1.1:$email.0.1">*</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$1.1:$email.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$1.1:$email.$email"><input id="email-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="email" name="email" required="" placeholder="" value="" autocomplete="email" data-reactid=".hbspt-forms-0.1:$1.1:$email.$email.0"></div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$2">
            <div class="hs_single_line_text_property hs-single_line_text_property hs-fieldtype-text field hs-form-field" data-reactid=".hbspt-forms-0.1:$2.1:$single_line_text_property">
               <label id="label-single_line_text_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Single Line Text Property" for="single_line_text_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$2.1:$single_line_text_property.0"><span data-reactid=".hbspt-forms-0.1:$2.1:$single_line_text_property.0.0">Single Line Text Property</span></label>
               <legend class="hs-field-desc" style="display:block;" data-reactid=".hbspt-forms-0.1:$2.1:$single_line_text_property.1">Help text</legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$2.1:$single_line_text_property.$single_line_text_property"><input id="single_line_text_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="text" name="single_line_text_property" value="" placeholder="Placeholder text" data-reactid=".hbspt-forms-0.1:$2.1:$single_line_text_property.$single_line_text_property.0"></div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$3">
            <div class="hs_multi_line_text_property hs-multi_line_text_property hs-fieldtype-textarea field hs-form-field" data-reactid=".hbspt-forms-0.1:$3.1:$multi_line_text_property">
               <label id="label-multi_line_text_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Multi-line Text Property" for="multi_line_text_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$3.1:$multi_line_text_property.0"><span data-reactid=".hbspt-forms-0.1:$3.1:$multi_line_text_property.0.0">Multi-line Text Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$3.1:$multi_line_text_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$3.1:$multi_line_text_property.$multi_line_text_property"><textarea id="multi_line_text_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" name="multi_line_text_property" placeholder="" data-reactid=".hbspt-forms-0.1:$3.1:$multi_line_text_property.$multi_line_text_property.0">Default value</textarea></div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$4">
            <div class="hs_dropdown_select_property hs-dropdown_select_property hs-fieldtype-select field hs-form-field" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property">
               <label id="label-dropdown_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Dropdown Select Property" for="dropdown_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.0"><span data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.0.0">Dropdown Select Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.$dropdown_select_property">
                  <select id="dropdown_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" name="dropdown_select_property" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0">
                     <option value="" disabled="" selected="" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.0">Please Select</option>
                     <option value="Item 1" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.1:$Item 1">Item 1</option>
                     <option value="Item 2" data-reactid=".hbspt-forms-0.1:$4.1:$dropdown_select_property.$dropdown_select_property.0.1:$Item 2">Item 2</option>
                  </select>
               </div>
            </div>
         </fieldset>
         <fieldset class="form-columns-0" data-reactid=".hbspt-forms-0.1:$5">
            <div class="hs-richtext hs-main-font-element" data-reactid=".hbspt-forms-0.1:$5.0">
               <h1>This is a form Header</h1>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$6">
            <div class="hs_radio_select_property hs-radio_select_property hs-fieldtype-radio field hs-form-field" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property">
               <label id="label-radio_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Radio Select Property" for="radio_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.0"><span data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.0.0">Radio Select Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property">
                  <ul role="checkbox" class="inputs-list multi-container" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0">
                     <li class="hs-form-radio" role="radio" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 1"><label for="radio_select_property0-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-radio-display" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 1.0"><input id="radio_select_property0-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input " type="radio" name="radio_select_property" value="Option 1" aria-labelledby="label-radio_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 1.0.0"><span data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 1.0.1">Option 1</span></label></li>
                     <li class="hs-form-radio" role="radio" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 2"><label for="radio_select_property1-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-radio-display" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 2.0"><input id="radio_select_property1-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input " type="radio" name="radio_select_property" value="Option 2" aria-labelledby="label-radio_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 2.0.0"><span data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 2.0.1">Option 2</span></label></li>
                     <li class="hs-form-radio" role="radio" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 3"><label for="radio_select_property2-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-radio-display" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 3.0"><input id="radio_select_property2-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input " type="radio" name="radio_select_property" value="Option 3" aria-labelledby="label-radio_select_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$6.1:$radio_select_property.$radio_select_property.0.$Option 3.0.0"><span data-reactid=".hbspt-forms-0.1:$6.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=".hbspt-forms-0.1:$7">
            <div class="hs_multiple_checkboxes_property hs-multiple_checkboxes_property hs-fieldtype-checkbox field hs-form-field" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property">
               <label id="label-multiple_checkboxes_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Multiple Checkboxes Property" for="multiple_checkboxes_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.0"><span data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.0.0">Multiple Checkboxes Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property">
                  <ul role="checkbox" class="inputs-list multi-container" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0">
                     <li class="hs-form-checkbox" role="checkbox" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1"><label for="multiple_checkboxes_property0-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-checkbox-display" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1.0"><input id="multiple_checkboxes_property0-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input " type="checkbox" name="multiple_checkboxes_property" value="Option 1" aria-labelledby="label-multiple_checkboxes_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1.0.0"><span data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 1.0.1">Option 1</span></label></li>
                     <li class="hs-form-checkbox" role="checkbox" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2"><label for="multiple_checkboxes_property1-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-checkbox-display" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2.0"><input id="multiple_checkboxes_property1-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input " type="checkbox" name="multiple_checkboxes_property" value="Option 2" aria-labelledby="label-multiple_checkboxes_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2.0.0"><span data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 2.0.1">Option 2</span></label></li>
                     <li class="hs-form-checkbox" role="checkbox" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3"><label for="multiple_checkboxes_property2-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-checkbox-display" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3.0"><input id="multiple_checkboxes_property2-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input " type="checkbox" name="multiple_checkboxes_property" value="Option 3" aria-labelledby="label-multiple_checkboxes_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$7.1:$multiple_checkboxes_property.$multiple_checkboxes_property.0.$Option 3.0.0"><span data-reactid=".hbspt-forms-0.1:$7.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=".hbspt-forms-0.1:$8">
            <div class="hs_single_checkbox_property hs-single_checkbox_property hs-fieldtype-booleancheckbox field hs-form-field" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property">
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property.$single_checkbox_property">
                  <ul class="inputs-list" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property.$single_checkbox_property.0">
                     <li class="hs-form-booleancheckbox" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property.$single_checkbox_property.0.0"><label for="single_checkbox_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-form-booleancheckbox-display" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property.$single_checkbox_property.0.0.0"><input id="single_checkbox_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="checkbox" name="single_checkbox_property" value="true" data-reactid=".hbspt-forms-0.1:$8.1:$single_checkbox_property.$single_checkbox_property.0.0.0.0"><span data-reactid=".hbspt-forms-0.1:$8.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=".hbspt-forms-0.1:$9">
            <div class="hs_number_property hs-number_property hs-fieldtype-number field hs-form-field" data-reactid=".hbspt-forms-0.1:$9.1:$number_property">
               <label id="label-number_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Number Property" for="number_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$9.1:$number_property.0"><span data-reactid=".hbspt-forms-0.1:$9.1:$number_property.0.0">Number Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$9.1:$number_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$9.1:$number_property.$number_property"><input id="number_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="number" name="number_property" value="" placeholder="" step="any" data-reactid=".hbspt-forms-0.1:$9.1:$number_property.$number_property.0"></div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$10">
            <div class="hs_file_upload_property hs-file_upload_property hs-fieldtype-file field hs-form-field" data-reactid=".hbspt-forms-0.1:$10.1:$file_upload_property">
               <label id="label-file_upload_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your File Upload Property" for="file_upload_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$10.1:$file_upload_property.0"><span data-reactid=".hbspt-forms-0.1:$10.1:$file_upload_property.0.0">File Upload Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$10.1:$file_upload_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$10.1:$file_upload_property.$file_upload_property"><input id="file_upload_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="file" name="file_upload_property" size="30" data-reactid=".hbspt-forms-0.1:$10.1:$file_upload_property.$file_upload_property.0"></div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$11">
            <div class="hs_date_picker_property hs-date_picker_property hs-fieldtype-date field hs-form-field" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property">
               <label id="label-date_picker_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Date Picker Property" for="date_picker_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.0"><span data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.0.0">Date Picker Property</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.$date_picker_property">
                  <div class="hs-dateinput" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.$date_picker_property.0">
                     <input id="date_picker_property-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="hs-input" type="text" name="date_picker_property" value="" readonly="" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.$date_picker_property.0.0">
                     <div class="hs-datepicker" style="position:absolute;z-index:10000;" data-reactid=".hbspt-forms-0.1:$11.1:$date_picker_property.$date_picker_property.0.1">
                        <div class="pika-single fn-date-picker is-hidden is-bound" style="position: static; left: auto; top: auto;"></div>
                     </div>
                  </div>
               </div>
            </div>
         </fieldset>
         <fieldset class="form-columns-1" data-reactid=".hbspt-forms-0.1:$12">
            <div class="hs_hidden_field hs-hidden_field hs-fieldtype-text field hs-form-field" style="display:none;" data-reactid=".hbspt-forms-0.1:$12.1:$hidden_field">
               <label id="label-hidden_field-f57de912-d759-4f67-ae76-efe001bbf926_5033" class="" placeholder="Enter your Hidden Field" for="hidden_field-f57de912-d759-4f67-ae76-efe001bbf926_5033" data-reactid=".hbspt-forms-0.1:$12.1:$hidden_field.0"><span data-reactid=".hbspt-forms-0.1:$12.1:$hidden_field.0.0">Hidden Field</span></label>
               <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$12.1:$hidden_field.1"></legend>
               <div class="input" data-reactid=".hbspt-forms-0.1:$12.1:$hidden_field.$hidden_field"><input name="hidden_field" class="hs-input" type="hidden" value="" data-reactid=".hbspt-forms-0.1:$12.1:$hidden_field.$hidden_field.0"></div>
            </div>
         </fieldset>
         <noscript data-reactid=".hbspt-forms-0.2"></noscript>
         <div class="hs_submit hs-submit" data-reactid=".hbspt-forms-0.5">
            <div class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.5.0"></div>
            <div class="actions" data-reactid=".hbspt-forms-0.5.1"><input type="submit" value="Submit" class="hs-button primary large" data-reactid=".hbspt-forms-0.5.1.0"></div>
         </div>
         <div class="hubspot-link__container sproket" data-reactid=".hbspt-forms-0.6"><img src="https://js.hsforms.net/sproket.png" class="hubspot-link__icon" data-reactid=".hbspt-forms-0.6.0"><span data-reactid=".hbspt-forms-0.6.1"><span data-reactid=".hbspt-forms-0.6.1.0">Create your own</span><span data-reactid=".hbspt-forms-0.6.1.1"> </span></span><a href="https://app.hubspot.com/signup/marketing?hubs_medium=virality&amp;hubs_campaign=hubspot-forms-virality&amp;hubs_id=forms-branding-control&amp;hubs_source=preview.hs-sites.com&amp;intent=marketingFreeForms&amp;opt_sidebar=forms" target="_blank" class="hubspot-link" data-reactid=".hbspt-forms-0.6.2"><span class="hubspot-link-text" data-reactid=".hbspt-forms-0.6.2.0">free form with HubSpot</span></a></div>
         <input name="hs_context" type="hidden" value="{&quot;rumScriptExecuteTime&quot;:378.519999969285,&quot;rumServiceResponseTime&quot;:556.6899999976158,&quot;rumFormRenderTime&quot;:2.030000032391399,&quot;rumTotalRenderTime&quot;:560.3000000119209,&quot;rumTotalRequestTime&quot;:176.39999999664724,&quot;lang&quot;:&quot;en&quot;,&quot;pageUrl&quot;:&quot;https://preview.hs-sites.com/_hcms/preview/template/multi?domain=undefined&amp;portalId=6333443&amp;tc_deviceCategory=undefined&amp;template_file_path=Coded%20files/test.html&amp;updated=1569336070447&quot;,&quot;source&quot;:&quot;FormsNext-static-3.375&quot;,&quot;timestamp&quot;:1569336341672,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36&quot;,&quot;referrer&quot;:&quot;https://app.hubspot.com/design-manager/6333443/code/12514064886&quot;,&quot;originalEmbedContext&quot;:{&quot;formsBaseUrl&quot;:&quot;/_hcms/forms/&quot;,&quot;portalId&quot;:&quot;6333443&quot;,&quot;formId&quot;:&quot;f57de912-d759-4f67-ae76-efe001bbf926&quot;,&quot;formInstanceId&quot;:&quot;5033&quot;,&quot;pageId&quot;:&quot;1&quot;,&quot;deactivateSmartForm&quot;:true,&quot;target&quot;:&quot;#hs_form_target_my_form&quot;,&quot;contentType&quot;:&quot;landing-page&quot;,&quot;formData&quot;:{&quot;cssClass&quot;:&quot;hs-form stacked hs-custom-form&quot;},&quot;hutk&quot;:&quot;2700394130afb3130850416114874868&quot;},&quot;pageId&quot;:&quot;1&quot;,&quot;boolCheckBoxFields&quot;:&quot;single_checkbox_property&quot;,&quot;dateFields&quot;:&quot;date_picker_property&quot;,&quot;formInstanceId&quot;:&quot;5033&quot;,&quot;urlParams&quot;:{&quot;domain&quot;:&quot;undefined&quot;,&quot;portalId&quot;:&quot;6333443&quot;,&quot;tc_deviceCategory&quot;:&quot;undefined&quot;,&quot;template_file_path&quot;:&quot;Coded files/test.html&quot;,&quot;updated&quot;:&quot;1569336070447&quot;},&quot;formValidity&quot;:{&quot;multi_line_text_property&quot;:{&quot;valid&quot;:true},&quot;firstname&quot;:{&quot;valid&quot;:true}},&quot;formTarget&quot;:&quot;#hs_form_target_my_form&quot;,&quot;correlationId&quot;:&quot;271fac8d-d068-4df1-822c-35c3d69088fa&quot;,&quot;contentType&quot;:&quot;landing-page&quot;,&quot;hutk&quot;:&quot;2700394130afb3130850416114874868&quot;,&quot;isHostedOnHubspot&quot;:true}" data-reactid=".hbspt-forms-0.7"><iframe name="target_iframe_f57de912-d759-4f67-ae76-efe001bbf926_5033" style="display:none;" data-reactid=".hbspt-forms-0.8"></iframe>
      </form>
   </div>
</span>

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


Styling a form based on it's form id

If you need to style a HubSpot form based on it's form ID we recommend targeting the .hs-form-[id] class or the data-form-id attribute. Example: hs-form-6db82756-8353-4984-be34-6c093194290f. The class name that looks the same but has the underscore then another id - the target id, do not target that class for styling as it may change. It is also advised that you do not target elements based on their data-attributes as those could change. Standard element attributes like type are safe to target.

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

Targeted GDPR Text in Forms

If you want to style text in forms related to GDPR, you can simply use the CSS below as a starting point. Depending on the consent options your team has chosen this may need to be modified.

.legal-consent-container .hs-richtext

Form themes and iframes

The form editor enables basic styling to be done without requiring css skills. This comes in the form of themes and style options in the "Style & Preview" tab of the form editor. If you see a HubSpot form rendered using an iframe, it is likely this feature is in use.


<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script data-hubspot-rendered="true">
  hbspt.forms.create({
	portalId: "123456",
	formId: "fbb27ef9-9999-4c49-8663-bd5c05f684b0"
});
</script><div class="hbspt-form" id="hbspt-form-1567055267882-127981741"><iframe id="hs-form-iframe-0" class="hs-form-iframe" scrolling="no" height="155" width="873" style="position: static; border: none; display: block; overflow: hidden; width: 873px; height: 155px;"></iframe></div>
    

If you wish to control the styling using CSS, go into the form editor (Marketing > Lead Capture > Forms)  find the form you wish to edit, navigate to the "Style & preview" tab, toggle on "Set as raw HTML form". 

This will change the form to render using HTML form input elements within the current page.