Skip to content

Instantly share code, notes, and snippets.

@manfromanotherland
Last active August 13, 2022 11:32
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save manfromanotherland/ab061a5a07e8dda570f9b38021ff8041 to your computer and use it in GitHub Desktop.
Save manfromanotherland/ab061a5a07e8dda570f9b38021ff8041 to your computer and use it in GitHub Desktop.
Hubspot: Forms CSS selectors and sample HTML markup http://designers.hubspot.com/docs/cos/hubspot-form-markup
/* 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 {}
<!-- HubSpot sample form without custom HS data- -->
<div id="hs_form_target_widget_3540739632">
<form accept-charset="UTF-8" action="" class="hs-form stacked hs-custom-form" novalidate="">
<fieldset class="form-columns-2">
<div class="hs_firstname field hs-form-field">
<label for="firstname-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>First Name</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<input class="hs-input">
</div>
</div>
<div class="hs_lastname field hs-form-field">
<label for="lastname-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Last Name</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<input class="hs-input">
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_email field hs-form-field">
<label for="email-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Email</span><span class="hs-form-required">*</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<input class="hs-input">
</div>
</div>
<ul class="hs-error-msgs inputs-list" style="display: block;">
<li>
<label>Please complete this mandatory field.</label>
</li>
</ul>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_single_line_text_property field hs-form-field">
<label>
<span>Single Line Text property</span>
</label>
<div class="hs-field-desc">This is help text.</div>
<div class="input">
<input class="hs-input">
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_multi_line_text_property field hs-form-field">
<label for="multi_line_text_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Multi-line text property</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<textarea class="hs-input"></textarea>
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_dropdown_select_property field hs-form-field">
<label for="dropdown_select_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Dropdown select property</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<select class="hs-input">
<option>- Please Select -</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_radio_select_property field hs-form-field">
<label for="radio_select_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Radio select property</span>
</label>
<div class="hs-field-desc">
</div>
<div class="input">
<ul class="inputs-list multi-container">
<li class="hs-form-radio">
<label class="hs-form-radio-display">
<input class="hs-input">Option 1</span>
</label>
</li>
<li class="hs-form-radio">
<label class="hs-form-radio-display">
<input class="hs-input">Option 2</span>
</label>
</li>
<li class="hs-form-radio">
<label class="hs-form-radio-display">
<input class="hs-input">Option 3</span>
</label>
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_multiple_checkboxes_property field hs-form-field">
<label>
<span>Multiple checkboxes property</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<ul class="inputs-list multi-container">
<li class="hs-form-checkbox">
<label class="hs-form-checkbox-display">
<input class="hs-input">Option 1</span>
</label>
</li>
<li class="hs-form-checkbox">
<label class="hs-form-checkbox-display">
<input class="hs-input">Option 2</span>
</label>
</li>
<li class="hs-form-checkbox">
<label class="hs-form-checkbox-display">
<input class="hs-input">Option 3</span>
</label>
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_single_checkbox_property field hs-form-field">
<label for="single_checkbox_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span></span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<ul class="inputs-list">
<li class="hs-form-booleancheckbox">
<label class="hs-form-booleancheckbox-display">
<input class="hs-input">Single checkbox property</span>
</label>
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_number_property field hs-form-field">
<label for="number_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Number property</span>
</label>
<div class="hs-field-desc"></div>
<div class="input">
<input class="hs-input">
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_file_upload_property field hs-form-field">
<label for="file_upload_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>File upload property</span>
</label>
<div class="hs-field-desc">
</div>
<div class="input">
<input class="hs-input">
</div>
</div>
</fieldset>
<fieldset class="form-columns-1">
<div class="hs_date_picker_property field hs-form-field">
<label for="date_picker_property-d9629729-b734-4866-a8e7-531b479446b0_4033">
<span>Date picker property</span>
</label>
<div class="hs-field-desc">
</div>
<div class="input">
<div class="hs-dateinput">
<input class="hs-input">
<div class="hs-datepicker">
<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">
<div class="hs-field-desc" style="display:none;"></div>
<div class="actions">
<input class="hs-button primary large">
</div>
</div>
</form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment