If you need to create a hidden field for whatever reason, look no further! This article will outline the best practices for creating a field that is not visible to customers on the storefront.
Internal or "Admin only" fields
Create a data column outside of the form builder
To create a field that will never be shown to customers on a form and is only editable in the app admin, you should create a data column outside of the form builder. The app's form builder will automatically create a new data column when you add a custom field, but for true "admin only" fields, it's best to go straight to the Data columns page in the app.
On the data columns page, click the button for 'Add data column'.
Type in a human-friendly label, define a data column key, and select the data type (i.e.
text,integer, etc.).You may also want to favorite this data column so that it's immediately visible on the Overview card when you're viewing customers' details in the app admin.
See the screenshot below for an example:
Once this has been done, you'll be able to edit the data column value for each customer record in the app admin, and the customer will never see this data on the storefront or on their account details (unless you decide to display this data in Liquid using metafields).
You can click the 'Edit' button on the Overview card on the customer detail page to add/edit the data column value. See the screenshot below for an example:
Hidden fields on a form
Use form rules to hide a field
If you'd rather have the data column on the form itself, then you can assign it to a field and a form rule to hide the field under the conditions that you define.
For example, let's say the "Private note" field should only be shown if the customer selects "Wholesale" from a radio field on the form. See the screenshot below for an example of how this would be configured:
Notice that the rule says if the conditions are not met, this field will be automatically hidden. This means that the field will only be displayed on the form if the customer selects Wholesale for the "Account type" field. The "Private note" field will otherwise be hidden at all times until the defined condition has been met.
❗ Important: Please note that if a field is hidden or disabled by a form rule, then the data for the hidden field will not be included in the form payload. If you need to ensure that the value for a hidden field is included when the form is submitted, then you will need to use CSS instead.
Use CSS to hide a field
Using a CSS ruleset to prevent a field from displaying to customers on the storefront is the best approach for cases where you want to include some extra data as part of the form submission, but you don't want the field data to be shown to the customer.
To start, we suggest adding a custom class to the desired field using the Advanced tab in the field editor:
You can then use the app's built-in CSS editor to add a ruleset with your custom class as the selector, like so:
Questions, comments, or concerns?
Feel free to contact our support team via email or chat, and we'll be happy to assist!