Newsletter Block Elements
COMPONENT SELECTOR GUIDE
Newsletter Block Elements
Newsletter block elements
Post-submit message
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) |
|---|---|---|
| Newsletter Header Elements | ||
| .sqs-block-newsletter | The newsletter block element. |
|
| .newsletter-form | The form HTML element that contains all of the form elements. |
|
| .newsletter-form-header | The header element that contains the form title and description. |
|
| .newsletter-form-header-title | The newsletter title text. |
|
| .newsletter-form-header-description p | The newsletter description text. |
|
| Newsletter Form Elements | ||
| .newsletter-form-body | The container for the form body elements, including the form field elements and the submit button |
|
| .newsletter-form-fields-wrapper | The wrapper for the newsletter fields, including first and last name, and email input field elements. |
|
| .newsletter-form-field-wrapper | The wrapper for the individual input elements, including the input field and the input field label. |
|
| .newsletter-form-field-label | The input field labels. These are hidden by default. |
|
| .newsletter-form-field-element | The input fields. |
|
| .newsletter-form-name-fieldset | The fieldset elements, which are HTML elements that contain multiple input fields. In the context of the newsletter blocks, the only fieldset is the one for first and last name. |
|
| .newsletter-form-field-wrapper.first-name | The first name input field wrapper. |
|
| .newsletter-form-field-wrapper.first-name .newsletter-form-field-element | The first name input field. |
|
| .newsletter-form-field-wrapper.first-name .newsletter-form-field-label | The first name input field label. This element is hidden by default. |
|
| .newsletter-form-field-wrapper.last-name | The last name input field wrapper. |
|
| .newsletter-form-field-wrapper.last-name .newsletter-form-field-element | The last name input field. |
|
| .newsletter-form-field-wrapper.last-name .newsletter-form-field-label | The first name input field label. This element is hidden by default. |
|
| .newsletter-form-field-wrapper.email | The email input field wrapper. |
|
| .newsletter-form-field-wrapper.email .newsletter-form-field-element | The email input field. |
|
| .newsletter-form-field-wrapper.email .newsletter-form-field-label | The email input field label. This element is hidden by default. |
|
| .newsletter-form-button-wrapper | The arrow icon parent container. |
|
| .newsletter-form-button | The wrapper for the submit button element. |
|
| Newsletter Footer Elements | ||
| .newsletter-form-footnote p | The footnote text. |
|
| Newsletter Post-Submit Elements | ||
| .form-submission-text | The post-submit message text. |
|
| .form-submission-html | The post-submit HTML container. |
|
HTML Structure Explanation
The HTML structure of the newsletter block elements.
The HTML structure of the newsletter block elements.
Unique Newsletter 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_1690691237911_5006 | 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 Accordion 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 Accordion block element with a class name of “sqs-block” and an id attribute.