Last active
August 13, 2022 11:32
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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