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 {
  font-size: 1rem;
  color: var(--contrast);
  font-weight: 700;
}

/* field style */
.fluentform .frm-fluent-form .ff-el-form-control {
  background-color: var(--base-3);
  color: var(--contrast-3);
  border: 2px solid var(--base);
  border-radius: 0px;
  font-size: 1rem;
  line-height: 1.6em;
  padding: 10px 24px;
}

/* focus field style */
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  border: 2px solid var(--accent);
  outline: none;
}

/* space below fields */
.fluentform .frm-fluent-form .ff-el-group {
  margin-bottom: 1rem;
}

/* placeholder text style */
.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--contrast-3);
  font-size: 1rem;

/* placeholder focus text style */
.fluentform .frm-fluent-form .ff-el-form-control:focus::placeholder {
  color: color: var(--contrast);
}

/* button style */
.fluentform .frm-fluent-form .ff-btn-submit {
  background-color: var(--accent);
  color: var(--base-3);
  opacity: 100%;
  border: 2px solid var(--accent);
  border-radius: 0px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6em;
  padding: 10px 24px;
  transition: all 0.5s ease 0s;
}

/* button hover style */
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  background-color: var(--base-3);
  border: 2px solid var(--accent);
  color: var(--accent);
}
  
/* button focus style */
.fluentform .frm-fluent-form .ff-btn-submit:focus {
  background-color: var(--base-3);
  border: 2px solid var(--accent);
  color: var(--accent);
}
  
/* button active style */
.fluentform .frm-fluent-form .ff-btn-submit:active {
  background-color: var(--base-3);
  border: 2px solid var(--accent);
  color: var(--accent);
}

/* 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 {
  font-size: .75rem !important;
  color: var(--contrast-2);
}

/* success message style */
.fluentform .ff-message-success {
  position: relative;
  border: none;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--contrast);
  padding: 0px;
  margin-top: 20px;
}