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: 15px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* fluent forms field style */
.fluentform .frm-fluent-form .ff-el-form-control {
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 0px;
  font-size: 17px;
  line-height: 1.7em;
  padding: 14px 24px;
}

/* fluent forms focus field style */
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  border: 2px solid #999;
  outline: none;
}

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

/* fluent forms placeholder text style */
.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  color: #999;
  font-size: 17px;
}

/* placeholder focus text style */
.fluentform .frm-fluent-form .ff-el-form-control:focus::placeholder {
  color: #000;
}

/* fluent forms button style */
.fluentform .frm-fluent-form .ff-btn-submit {
  background-color: #000;
  color: #fff;
  opacity: 100%;
  border: 2px solid #000;
  border-radius: 0px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 24px;
  transition: all 0.5s ease 0s;
}

/* fluent forms button hover style */
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  background-color: #fff;
  color: #000;
}

/* 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: 14px !important;
  color: #999;
}

/* success message style */
.fluentform .ff-message-success {
  position: relative;
  border: none;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0px;
  margin-top: 20px;
}