Form Block

Description

The form block is used to collect information from your visitors. You can get real crafty with the form block but it is most frequently used for contact forms, surveys, and poll applications.

Forms can be added directly to the page or as a button that opens into a lightbox.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.field-list .title {
}

</style>

Custom CSS

Input Fields

To target the titles

/* form field title */
.field-list .title {
}

To target the input boxes

/* form field input box */
.sqs-block-form .field-list .field .field-element {
}

To target the caption text — first and last name

/* caption text - first and last name */
.sqs-block-form .form-wrapper .field-list .field .caption {
}

To target the required asterisk

/* required asterisk */
.sqs-block-form span.required {
}

To target the radio option text

/* radio option text */
.field.radio .option {
}

To target the checkbox option text

/* checkbox option text */
.field.checkbox .option {
}

To target the survey line

/* survey line */
.sqs-block-form .field-list .field.likert .option {
}

To target the dropdown options

/* dropdown options */
.sqs-block-form .field-list .field select {
}

To target the date

/* date – month */
.sqs-block-form .field-list .field.month input {
}

/* date – day */
.sqs-block-form .field-list .field.day input {
}

/* date – year */
.sqs-block-form .field-list .field.year input {
}

To target the time

/* time – hours */
.sqs-block-form .field-list .field.hour input {
}

/* time – minute */
.sqs-block-form .field-list .field.minute input {
}

/* time – second */
.sqs-block-form .field-list .field.second input {
}

/* AM/PM dropdown */
.sqs-block-form .field-list .field.ampm select {
}

To target the phone number

/* phone number */
.sqs-block-form .field-list .fields .field.three-digits input, .form-wrapper .field-list .fields .field.four-digits:not(.sqs-block-form .field-list .field.year) input {
}

To target the curency

/* currency field */
.field-list .field.currency.hassymbol input {
}

/* currency symbol */
.field-list .field.currency.hassymbol .prefix {
}

To target the twitter field

/* twitter field */
.field-list .field.twitter .field-element {
}

To target the text field

/* text */
.sqs-block-form .form-wrapper .field-list .section * {
}

To target the line

/* line */
.sqs-block-form .form-wrapper .field-list .section.underline {
}

To target the submit button

/* submit button */
.form-wrapper input[type=submit] {
}

To target the post submit text

/* post submit text */
.form-wrapper .form-submission-text {
}

Lightbox

To target the lightbox trigger button (on page)

/* lightbox trigger button */
.form-block .lightbox-handle-wrapper button {
}

To target the background of the lightbox form

/* lightbox form background */
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
}

To target the lightbox form site overlay

HOT TIP: The opacity for the site overlay is set to .4 which represents 40%

/* lightbox form – site overlay */
.sqs-modal-lightbox-content .lightbox-background {
}

To target the close form icon

/* lightbox form close icon */
.lightbox-close {
}

To target the submit button

/* submit button */
.lightbox-content .form-wrapper input[type=submit] {
}

To target the post submit text

/* post submit text */
.lightbox-content .form-wrapper .form-submission-text {
}