Did you know you can use "Display fields" in the form builder to help organize and design your form? There are a handful of small (but mighty) tools at your disposal -- no matter which plan in the app you're using! 💪
See the screenshot below for a quick glance of the different Display fields you can find in the form builder, along with an example of what each field looks like by default:
This article provides a detailed overview of the display fields available in Customer Fields, as well as a few examples of how to use them. For this article, we will be using the example of a form that's been installed on a shop's "Edit account" page.
Read more below to find detailed descriptions for each display field 🤗
This field is designed to be a header and has several different options for styling. You can adjust the width of the field, change the header size (Heading 1-6), change the alignment of the text (left, center, or right) and adjust the font weight (light, normal, or bold).
Additionally, if you go to the Advanced tab within "Edit heading field", you will be able to add a custom CSS class to further customize your Display field.
Then, go to the Settings tab and scroll down to the CSS editor. Here you can add custom CSS to style your display field.
This field is perfect for providing instructions to your customers for filling out the form or for inserting any other block of text that you might consider useful within the form. In our example below we've just typed a small welcome message that invites the customer to share more information about themselves for their account. You can see on the left side that there are tools to adjust the column width and font size.
This field does just what it says it does; it provides a way for you to just add a link by itself to the form. There are a few different things you will want to adjust when adding a Link field. First of course, it is important to add a URL in the "Link url" field, then you will want to check or uncheck the "Open in new tab" box based on whether you want the link to open in the current window or not. You can also adjust the column width, the text alignment (left, center, or right) and the font weight (light, normal, or bold).
This field is perfect for adding a static image to your form. You can simply add a photo for design purposes, or you can add a link to the image as well. A good way to use this would be to upload a logo and link to the corresponding site or service. In our example below we have photos of some flowers. You can see below that you have the option of adding a link URL, adjusting the column width (image width), or changing the image alignment (left, center, or right).
This is a simple divider that is perfect for breaking up your form as needed to help keep things neat and tidy. You can adjust the width of the divider as well as the spacing around it.
This field comes in handy if you're code-savvy and you wish to add custom HTML elements to a form. This field type access normal HTML, and just like other fields you can use the Advanced tab to add a CSS class to the field and then go to the CSS editor in the Settings tab to style as you like.
Here's a screenshot that shows an example of an HTML block:
In the Advanced tab, we've added a custom class for
code. This screenshot shows a CSS ruleset that uses this custom class to target the HTML block:
This is what the HTML field looks like in the app's preview tab with the custom CSS applied:
The final product
With everything put together, you can create a really nice-looking form! Below is an example of just one way to design your form using custom display fields. Every single display field available in the form editor has been used on this particular form, as well as a couple of custom input fields. See the screenshot below:
Questions, comments, or concerns?
Feel free to reach out to our support team via email or chat and we'll be happy to assist!