css Hubspot：表单CSS选择器和示例HTML标记http://designers.hubspot.com/docs/cos/hubspot-form-markup

Posted 2021-05-13

<!-- 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>

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