Did you know you can use "Display elements" 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 elements you can find in the form builder, along with an example of what each element looks like by default:

This article provides a detailed overview of the display elements 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.

This element is designed to be a header and has several different options for styling. You can adjust the width of the heading, change the text 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 element.

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 element 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 element 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 element. 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 element 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.

The container element is a super handy tool to group together fields on your form. This feature is particularly useful if you have several fields that you want to keep together, which makes the fields within a container easier to target when using custom CSS or a form rule.

Example: Let's say we've already collected standard info about our customer's dog (e.g. name, birthday, size, etc.), and now we want to collect information about the customer's other pets. In this example, we've added a container element to our form and we changed the container label to "Other Pets Container". Within the container, we added a few fields to collect data about the customer's other pets and you can see several fields that we've already gone over in this article.
​

This element comes in handy if you're code-savvy and you wish to add custom HTML elements to a form. This element accesses normal HTML, and just like other elements, 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 element looks like in the app's preview tab with the custom CSS applied:

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 elements. Every single display element 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:

Feel free to reach out to our support team via email or chat and we'll be happy to assist!