Form Block Elements
COMPONENT SELECTOR GUIDE
Form Block Elements
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Container | ||
| .sqs-block-form | The form block container. |
|
| General Form Selectors | ||
| .sqs-block-form .form-item | All of the form field items. |
|
| .sqs-block-form .form-item.required | All of the required form field items. |
|
| .sqs-block-form legend | All fieldsets (a set of form controls grouped under one common name) in a form will have a "legend" element, which contains the fieldset title and description. |
|
| .sqs-block-form .title | The form item title. |
|
| .sqs-block-form .description | The form item description |
|
| .sqs-block-form .title .description.required | The form item description element that is the "Required" field indicator. |
|
| .sqs-block-form label.caption | The input field caption container that is present in certain form fields, including the "Name" field. |
|
| .sqs-block-form .caption-text | The input field caption text that is present in certain form fields, including the "Name" field. |
|
| .sqs-block-form input[type="text"] | All input fields of type text. |
|
| .sqs-block-form .form-input-prefix | The prefix text that is present in certains input fields, like the "Website" field. |
|
| .sqs-block-form input[type="email"] | All input fields of type email. |
|
| .sqs-block-form input[type="checkbox"] | All input fields of type checkbox. |
|
| .sqs-block-form input[type="radio"] | All input fields of type radio. |
|
| .sqs-block-form input[type="date"] | All input fields of type date. |
|
| .sqs-block-form input[type="time"] | All input fields of type time. |
|
| .sqs-block-form input::placeholder | The placeholder text of input fields. |
|
| .sqs-block-form select | All select (dropdown) fields. |
|
| .sqs-block-form textarea | All textarea fields. |
|
| .sqs-block-form .form-button-wrapper | The form submit button wrapper. |
|
| .sqs-block-form button[type="submit"] | The form submit button element. |
|
| Name Field | ||
| .sqs-block-form .form-item.name | The form item for all "Name" fields. |
|
| .sqs-block-form #name-yui_3_17_2_1_1697943304799_6316 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.name" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.name legend | The legend element inside of the "Name" fieldset form item. The legend contains the fieldset title and description. |
|
| .sqs-block-form .form-item.name .title | The form item title. |
|
| .sqs-block-form .form-item.name .description | The form item description. |
|
| .sqs-block-form .form-item.name .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.name .field | The form item fields in all "Name" fields, including the first and last name fields. |
|
| .sqs-block-form .form-item.name .field label | The field label element that contains the caption text. |
|
| .sqs-block-form .form-item.name .field .caption-text | The field label text that acts as a caption for the input field. |
|
| .sqs-block-form .form-item.name .field input[type="text"] | The field input elements of type text. |
|
| Email Field | ||
| .sqs-block-form .form-item.email | The form item for all "Email" fields. |
|
| .sqs-block-form #email-yui_3_17_2_1_1697943304799_6317 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.email" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.email .title | The form item title. |
|
| .sqs-block-form .form-item.email .description | The form item description. |
|
| .sqs-block-form .form-item.email .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.email input[type="text"] | The field input elements of type text. |
|
| .sqs-block-form .form-item.email .option | The container for the newsletter opt-in checkbox field. |
|
| .sqs-block-form .form-item.email .option label | The newsletter opt-in checkbox field label. |
|
| .sqs-block-form .form-item.email .option label span | The newsletter opt-in checkbox field label text. |
|
| .sqs-block-form .form-item.email .option input[type="checkbox"] | The field input elements of type checkbox. |
|
| .sqs-block-form .form-item.email .option input[type="checkbox"]:checked::before | The checkmark icon in the field input element of type checkbox. |
|
| Text Field | ||
| .sqs-block-form .form-item.text | The form item for all "Text" fields. |
|
| .sqs-block-form #text-yui_3_17_2_1_1697943304799_6318 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.text" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.text .title | The form item title. |
|
| .sqs-block-form .form-item.text .description | The form item description. |
|
| .sqs-block-form .form-item.text .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.text input[type="text"] | The field input elements of type text. |
|
| Textarea Field | ||
| .sqs-block-form .form-item.textarea | The form item for all "Textarea" fields. |
|
| .sqs-block-form #textarea-yui_3_17_2_1_1697943304799_6319 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.textarea" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.textarea .title | The form item title. |
|
| .sqs-block-form .form-item.textarea .description | The form item description. |
|
| .sqs-block-form .form-item.textarea .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.textarea textarea | The field textarea element. |
|
| Checkbox Field | ||
| .sqs-block-form .form-item.checkbox | The form item for all "Checkbox" fields. |
|
| .sqs-block-form #checkbox-0b37d868-ecdf-4668-8ccf-7150d92d6713 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.checkbox" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.checkbox legend | The legend element inside of the fieldset form item. The legend contains the fieldset title and description. |
|
| .sqs-block-form .form-item.checkbox .title | The form item title. |
|
| .sqs-block-form .form-item.checkbox .description | The form item description. |
|
| .sqs-block-form .form-item.checkbox .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.checkbox .option | The container for the newsletter opt-in checkbox field. |
|
| .sqs-block-form .form-item.checkbox .option label | The checkbox field label element. |
|
| .sqs-block-form .form-item.checkbox .option label span | The checkbox field label text. |
|
| .sqs-block-form .form-item.checkbox .option input[type="checkbox"] | The field input elements of type checkbox. |
|
| .sqs-block-form .form-item.checkbox .option input[type="checkbox"]:checked::before | The checkmark icon in the field input element of type checkbox. |
|
| Survey Field | ||
| .sqs-block-form .form-item.likert | The form item for all "Likert" fields. |
|
| .sqs-block-form #likert-ade31c89-747d-4e77-8d26-47e2954229cf | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.likert" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.likert .title | The form item title. |
|
| .sqs-block-form .form-item.likert .description | The form item description. |
|
| .sqs-block-form .form-item.likert .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.likert fieldset.item | The survey question/statement items. |
|
| .sqs-block-form .form-item.likert fieldset.item .title | The survey question/statement item title. |
|
| .sqs-block-form .form-item.likert fieldset.item .option | The survey question/statement item radio button container. |
|
| .sqs-block-form .form-item.likert fieldset.item .option label | The survey question/statement item radio button label. |
|
| .sqs-block-form .form-item.likert fieldset.item .option input[type="radio"] | The field input element of type radio. |
|
| .sqs-block-form .form-item.likert fieldset.item .option .radio-mark | The radio marker container. |
|
| .sqs-block-form .form-item.likert fieldset.item .option input[type="radio"]:checked~.radio-mark::after | The radio marker imagery. |
|
| Line Field | ||
| .sqs-block-form .form-item.line-field | The form item for all "Line" section dividers. |
|
| .sqs-block-form #section-ece8da7c-0a4a-4555-9f5f-6a88dd18624b | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.line-field" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.line-field .title | The form item title. |
|
| .sqs-block-form .form-item.line-field .description | The form item description. |
|
| Date Field | ||
| .sqs-block-form .form-item.date | The form item for all "Date" fields. |
|
| .sqs-block-form #date-7790ca9b-b862-4477-b1ee-833a6e8c57a4 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.dat" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.date .title | The form item title. |
|
| .sqs-block-form .form-item.date .description | The form item description. |
|
| .sqs-block-form .form-item.date .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.date input[type="date"] | The field input elements of type date |
|
| Time Field | ||
| .sqs-block-form .form-item.time | The form item for all "Time" fields. |
|
| .sqs-block-form #time-7f09d18d-4325-47a3-b206-c7b865dac31c | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.time" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.time .title | The form item title. |
|
| .sqs-block-form .form-item.time .description | The form item description. |
|
| .sqs-block-form .form-item.time .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.time .caption-text | The caption text below the input field. |
|
| .sqs-block-form .form-item.time input[type="time"] | The field input elements of type time. |
|
| Phone Field | ||
| .sqs-block-form .form-item.phone | The form item for all "Phone" fields. |
|
| .sqs-block-form #phone-14d0fa60-a327-4ce6-8794-620ae036e7ee | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.phone" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.phone legend | The legend element inside of the fieldset form item. The legend contains the fieldset title and description. |
|
| .sqs-block-form .form-item.phone .title | The form item title. |
|
| .sqs-block-form .form-item.phone .description | The form item description. |
|
| .sqs-block-form .form-item.phone .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.phone .field | The field items within the "Phone" field. |
|
| .sqs-block-form .form-item.phone .field label | The labbel container for the "Phone" field. |
|
| .sqs-block-form .form-item.phone .field .caption-text | The label text for the "Phone" field. |
|
| .sqs-block-form .form-item.phone .field select | The field select element the has the country options. |
|
| .sqs-block-form .form-item.phone .field input[type="text"] | The field input elements of type text for the phone number. |
|
| .sqs-block-form .form-item.phone .field .form-input-prefix | The prefix text that precedes the text in the phone input field |
|
| Dropdown Field | ||
| .sqs-block-form .form-item.select | The form item for all "Dropdown" fields. |
|
| .sqs-block-form #select-a98ba6d6-df87-49af-818e-c4286359cca8 | A form item with the specified ID attribute (this is just the general form, but you'll need to replace the ID with your specific ID). You can use this selector instead of the selector ".sqs-block-form .form-item.select" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.select legend | The legend element that is present in fieldsets. |
|
| .sqs-block-form .form-item.select .title | The form item title. |
|
| .sqs-block-form .form-item.select .description | The form item description. |
|
| .sqs-block-form .form-item.select .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.select select | The field select element. |
|
| Radio Field | ||
| .sqs-block-form .form-item.radio | The form item for all "Radio" fields. |
|
| .sqs-block-form #text-yui_3_17_2_1_1697943304799_6318 | A form item with the specified ID attribute. You can use this selector instead of the selector ".sqs-block-form .form-item.radio" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.radio legend | The legend element inside of the fieldset form item. The legend contains the fieldset title and description. |
|
| .sqs-block-form .form-item.radio .title | The form item title. |
|
| .sqs-block-form .form-item.radio .description | The form item description. |
|
| .sqs-block-form .form-item.radio .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.radio .option | The container for the radio field. |
|
| .sqs-block-form .form-item.radio .option label | The radio field label element. |
|
| .sqs-block-form .form-item.radio .option .radio-label | The radio field label text. |
|
| .sqs-block-form .form-item.radio .option input[type="radio"] | The field input elements of type radio. |
|
| .sqs-block-form .form-item.radio .option .radio-mark | The radio marker container. |
|
| .sqs-block-form .form-item.radio .option input[type="radio"]:checked~.radio-mark::after | The radio marker imagery. |
|
| Address Field | ||
| .sqs-block-form .form-item.address | The form item for all "Address" fields. |
|
| .sqs-block-form #address-cacd202e-86d2-4dfd-a436-4d2c644eced9 | A form item with the specified ID attribute. You can use this selector instead of the selector ".sqs-block-form .form-item.address" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.address legend | The legend element inside of the fieldset form item. The legend contains the fieldset title and description. |
|
| .sqs-block-form .form-item.address .title | The form item title. |
|
| .sqs-block-form .form-item.address .description | The form item description. |
|
| .sqs-block-form .form-item.address .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.address .field | The field items within the address form field. |
|
| .sqs-block-form .form-item.address .field label | The field label containers. |
|
| .sqs-block-form .form-item.address .caption-text | The field caption text inside the label element. |
|
| .sqs-block-form .form-item.address .country-select select | The "Country" dropdown field. |
|
| .sqs-block-form .form-item.address input[type="text"] | The field input elements of type text. |
|
| Website Field | ||
| .sqs-block-form .form-item.website | The form item for all "Website" fields. |
|
| .sqs-block-form #website-53d06d2b-9981-4657-b15a-c3ffa28c7b1b | A form item with the specified ID attribute. You can use this selector instead of the selector ".sqs-block-form .form-item.website" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.website .title | The form item title. |
|
| .sqs-block-form .form-item.website .description | The form item description. |
|
| .sqs-block-form .form-item.website .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.website input[type="text"] | The field input element of type text. |
|
| .sqs-block-form .form-item.website .form-input-prefix | The "https://" prefix text that precedes the input field text. |
|
| Number Field | ||
| .sqs-block-form .form-item.number | The form item for all "Number" fields. |
|
| .sqs-block-form #number-284ed14b-a79a-40d8-8090-cea201ad9057 | A form item with the specified ID attribute. You can use this selector instead of the selector ".sqs-block-form .form-item.number" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.number .title | The form item title. |
|
| .sqs-block-form .form-item.number .description | The form item description. |
|
| .sqs-block-form .form-item.number .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.number input[type="text"] | The field input elements of type text, which in this case only takes numeric values. |
|
| Currency Field | ||
| .sqs-block-form .form-item.currency | The form item for all "Currency" fields. |
|
| .sqs-block-form #currency-b49ce303-8931-4c34-a2ba-ce21c4936d8d | A form item with the specified ID attribute. You can use this selector instead of the selector ".sqs-block-form .form-item.currency" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.currency .title | The form item title. |
|
| .sqs-block-form .form-item.currency .description | The form item description. |
|
| .sqs-block-form .form-item.currency .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.currency input[type="text"] | The field input elements of type text. |
|
| .sqs-block-form .form-item.currency .form-input-prefix | The prefix currency symbol that precedes the input field text. |
|
| Twitter Field | ||
| .sqs-block-form .form-item.twitter | The form item for all "Twitter" fields. |
|
| .sqs-block-form #twitter-f433bffa-ab58-41a7-853c-d391d2074b6a | A form item with the specified ID attribute. You can use this selector instead of the selector ".sqs-block-form .form-item.twitter" to select elements only in the specified form item. |
|
| .sqs-block-form .form-item.twitter .title | The form item title. |
|
| .sqs-block-form .form-item.twitter .description | The form item description. |
|
| .sqs-block-form .form-item.twitter .description.required | The form item "Required" description. |
|
| .sqs-block-form .form-item.twitter input[type="text"] | The field input elements of type text. |
|
| .sqs-block-form .form-item.twitter .form-input-prefix | The prefix twitter symbol that precedes the input field text. |
|
HTML Structure Explanation
The HTML structure of the form block elements.
Unique Form Blocks Using the Block ID
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #block-yui_3_17_2_1_1697943304799_6311 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Form Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
An Form block element with a class name of “sqs-block” and an id attribute.