Guide to Using Custom CSS

Custom CSS allows you to alter almost every visual aspect of the form. To apply Custom CSS, we first need to know the CSS selector of the element we wish to alter.

  1. Form Selector

    Select All Forms

    Use the following CSS selector to select every FormCraft form:

    .fc-form

    Select Popup Forms

    Use the following CSS selector to select every FormCraft form inside a popup:

    .fc-form-modal .fc-form

    Select Sticky Forms

    Sticky forms are basically popup forms which are triggered with a button in the bottom-right corner of the page.
    Use the following CSS selector to select every sticky FormCraft form:

    .fc-sticky .fc-form

    Select Form By ID

    Every form has the class fc-form-32 (where 32 is the form ID). Example:

    The CSS class selector of our label is main-label. The following CSS would apply the color red to all labels, of all forms on the page:

    .main-label {
color: red;
}

    However, if we only want to apply this CSS to a particular form, we would use the form selector as well:

    .fc-form-32 .main-label {
color: red;
}

  2. Label Selectors

    Main Label

    Use the CSS selector:

    .main-label

    Example, to make the color of main labels red, you would use the CSS:

    .main-label {
color: red;
}

    Sub Label

    Use the CSS selector:

    .sub-label

  3. Field Selectors

    Heading Field

    To customize the text of the heading field, use the CSS selector:

    .form-element-html .heading-cover

    Custom Text Field

    To customize the text of the heading field, use the CSS selector:

    .form-element-html .customText-cover

    Input Fields

    To customize one-line text field, textarea field, datepicker, email, dropdown and password field, use the CSS selector:

    .form-element-html input[type='text'],
.form-element-html input[type='email'],
.form-element-html input[type='password'],
.form-element-html select,
.form-element-html textarea

    Checkbox Field

    To customize the checkbox field, use the CSS selector:

    .form-element-html input[type='radio'],
.form-element-html input[type='checkbox']

    Submit Button

    To customize the submit button, use the CSS selector:

    .form-element-html .submit-button

    Fileupload Button

    To customize the fileupload button, use the CSS selector:

    .form-element-html .fileupload-button

  4. Other Selectors

    Field Block

    To customize the field block, use the CSS selector:

    .form-element

    You can also select specific fields by their position. To select the first, and second fields from top, use

    .form-element-0,
.form-element-1

    To select a field with the id field23, use:

    .form-element-field23

    Example, to increase vertical spacing between fields, use this CSS:

    .form-element {
margin-top: 1.5em;
margin-bottom: 1.5em;
}

    Success Message

    Use this selector:

    html .formcraft-css .fc-form .final-success

    Example, to change the color of the success message to red, use this Custom CSS:

    html .formcraft-css .fc-form .final-success
{
color: red;
}