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! 😎
Add CSS classes to fields
There are technically several ways to add custom styling to the app's forms. We recommend using the form builder in the app admin to define classes for the fields you want to style, since this gives you full control over each field.
To do this, please follow the steps below:
- In the app admin, go to the Forms page
- Find the form you want to edit and click the "Edit" button (or create a new form using the "Add form" button). This will launch the app's form builder
- In the form builder, click on one of the fields you want to edit
- When viewing the field details, click on the "Advanced" tab
- 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 before proceeding
Create CSS rulesets
Once you have defined classes for the field(s) you want to style, you can then use these classes when creating CSS rulesets. You are welcome to add your CSS rulesets directly to the theme code, or you can use the CSS editor that we've built into the app's form builder. We encourage you to use the app's CSS editor so you aren't cluttering up the theme with extra app-specific code.
Here's how to access the CSS editor via the app admin:
- In the form builder, click on the "Settings" tab
- Scroll down on this 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