By default, any form that has been created using the Customer Fields app should inherit the form styling that's being used by the store's theme. If a theme's styles are not being applied to a form when viewing it on the storefront, or if you'd simply like to add your own custom styling to a form, you have the option to do so! 😎

Customizable CSS classes for fields

Technically, there are several ways to add custom styling to the app's forms. If you want to make a styling change to a specific field (or a set of fields) on a form, we recommend using the app's form builder to define custom classes for the fields you want to style.

Custom field classes give you more control over each field, this way you can target fields easily without needing to use overly complex selectors.

Steps to add classes to fields:

In the app admin, go to the Forms page
Find the form you want to edit and click the 'Edit' button to launch the form builder
In the form builder, click on one of the fields you wish to style
When viewing a field's details, click on the 'Advanced' tab to find the CSS settings for the field
Type in your desired CSS class for the field and click 'Done'
Repeat steps 3-5 for any other fields you wish to style. After you have added the necessary classes to your field(s), make sure to click the 'Save' button in the form builder before proceeding

Create CSS rulesets

Once you have defined classes for the field(s) you want to style, you can then use these classes as selectors when writing CSS rulesets. You are welcome to add your CSS rulesets directly to the store's theme code, or you can use the CSS editor that we've built into the app's form builder.

We strongly encourage you to use the app's CSS editor so you aren't cluttering up the theme with extra app-specific code. This also makes it easier for our team to help along the way 🤗

Access the app's built-in CSS editor for a form:

When editing a form in the app's form builder, click on the 'Settings' tab (found in the top bar)
Scroll down on the settings page until you see an 'Advanced' section
The advanced section contains the Custom CSS editor. Add in your desired rulesets and make sure to click the 'Save' button

Reference guide

As explained above, the app's form builder allows you to add a custom class to each field on a form. If you're trying to style an element on a form that is not part of a field, then you'll most likely need to use your browser's dev tools to inspect the element and find the proper selectors. Once you've determined the selectors, you can add your rulesets into the app's built-in CSS editor.

To help out, we've provided a list of suggested CSS selectors and rulesets for the most commonly requested styling changes:

Form container

Sometimes a store's theme does not have the proper markup to apply a desirable width or margin to the app's forms, which can cause a form to fill the full width of the screen or float partially off the page. You can use the following selector to target the form container:

.cf-form-inner

Here's an example of a ruleset that will center the form on a page and set the form to a max-width of 750px:

.cf-form-inner {
  max-width: 750px;
  margin: auto;
}

Field elements

For granular control of field styling, it's always best to set a custom class on a field using the steps outlined above (see here). That being said, the following selectors should work for global changes to certain field elements:

Field labels

Selector:

.cf-field label

Example ruleset:

.cf-field label {
  text-decoration: underline;
}

Field placeholders

Selector:

.cf-field::placeholder

Example ruleset:

.cf-field input::placeholder {
  font-style: italic;
}

Field descriptions

Selector:

.cf-field-description

Example ruleset:

.cf-field-description {
  font-weight: bold;
}

Form buttons

The buttons within the app's forms ('cancel', 'submit', 'back', 'next', etc) are designed to inherit your theme's native button styling, but in the odd event that an undesirable color or other styles are being applied to the form's buttons, then you can use the following selector:

.cf-form-actions button

Example rulesets:

Change the background color of the form's buttons to red:
```
.cf-form-actions button {
  background-color: red;
}
```

Add an underline to the buttons' text upon mouse hover:

.cf-form-actions button:hover {
  text-decoration: underline;
}

Make 'next' and 'submit' buttons display on the left side of a form

In some cases, you may want a form's 'next' and 'submit' buttons to show on the left side of the form instead of the right side. You can use the following ruleset to change this:

.cf-next-step, .cf-submit-form {
  float: left;
}

Disable auto-scroll between steps

When you go back and forth between steps on the form, the form automatically scrolls the page slightly so the customer does not have to scroll up in order to see the fields on the top of the form. If this auto-scroll causes an undesirable effect on your store, then you can use something like the following to disable it:

#cf-step-anchor {
  display: none;
}

Hide field-level errors from the bottom of a form

Any frontend field-level errors are designed to show in two places; directly underneath the field(s) with the validation issue, and at the bottom of the form. This duplication of field-level errors may seem redundant, but from our experience we've found that it's best to show these errors in both places to make sure the user understands exactly what the problem is and where to fix it.

That being said, if you do want to prevent the field-level errors from showing up at the bottom of the form, then you should be able to use something like the following:

.cf-field-error-list {
  display: none;
}

❗ Important note: DO NOT attempt to hide the form elements that contain the entire form error object, as this will result in a poor user experience for your customers. This includes the div elements that use classes for cf-step-invalid and cf-error-message.

Why not? There are important server-level errors for things like "email taken" and "phone taken" which are separate from the field-level errors, and if you hide the elements for cf-step-invalid or cf-error-message your customers will never see these important errors, nor will they understand why they cannot submit the form.

Change background color for field-level errors

Some themes may have a specific background or font colors that clashes with the app's default error message styling, in which case you can change the colors for the form's field-level error messages. The following sample will simply hide the background color, which might be ideal for themes with white text.

.cf-field[data-cf-invalid="true"] {
background-color: transparent !important;
}