CSS classes for Fluent Forms

fluent-forms.css

/* To target individual forms replace .fluentform .frm-fluent-form with form.fluent_form_# */

/* label style */
.fluentform .frm-fluent-form .ff-el-input--label {
  /* styles */
}

/* field style */
.fluentform .frm-fluent-form .ff-el-form-control {
  /* styles */
}

/* focus field style */
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  /* styles */
}

/* space below fields */
.fluentform .frm-fluent-form .ff-el-group {
  /* styles */
}

/* placeholder text style */
.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  /* styles */
}

/* placeholder focus text style */
.fluentform .frm-fluent-form .ff-el-form-control:focus::placeholder {
  /* styles */
}

/* button style */
.fluentform .frm-fluent-form .ff-btn-submit {
  /* styles */
}

/* button hover style */
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  /* styles */
}

/* button focus style */
.fluentform .frm-fluent-form .ff-btn-submit:focus {
  /* styles */
}

/* button active style */
.fluentform .frm-fluent-form .ff-btn-submit:active {
  /* styles */
}

/* button hover, focus and active together */
.fluentform .frm-fluent-form .ff-btn-submit:hover,
.fluentform .frm-fluent-form .ff-btn-submit:focus,
.fluentform .frm-fluent-form .ff-btn-submit:active {
  /* styles */
}

/* mobile full width button */
@media (max-width: 768px) {
  .fluentform .frm-fluent-form .ff-btn-submit {
    width: 100%;
  }
}

/* form error text style */
.fluentform .ff-el-is-error .text-danger {
  /* styles */
}

/* success message style */
.fluentform .ff-message-success {
  /* styles */
}

/* checkbox spacing */
.fluentform .ff-el-form-check-label .ff-el-form-check-input {
  /* styles */
}

/* checkbox labels */
.ff-default .ff-el-form-check label.ff-el-form-check-label {
  /* styles */
}

/* checkbox columns item spacing */
.fluentform .ff-el-group.ff_list_2col .ff-el-form-check {
  /* styles */
}