Form Builder: Layout and Property Settings

You will notice that the top of your Form Builder, you have four tabs. Your default tab is the Fields add link tab, which can be further built upon by the Rules add link tab.  The first two tabs, Properties and Layout, can apply formatting and messaging to your form as a whole.

In this article

Properties

To the left of the Fields tab, there are options to change the Properties of the form. 

There are subtabs within Properties, which are outlined here.

Heading

If you want to break up your form into sections, there is a field type called " Heading" that you can use that does this well.  The Heading tab in Properties lets you set the font, size of font, color, background color, and properties (bold, italic, underline) for the headings.  

The benefit of using headings is that if you want to change the color, size, etc. of one heading, all defined Headings change collectively when you make an update to the heading styles. It is also possible to format text using an HTML box on the form to style a heading; but in that case, each text box will stand on its own and will not change in bulk if you change another.

Font

This lets you set the font for all the fields and labels on the form. The font that you define here will affect the font of all fields on the form. You can pick the font, size, color and properties for fields. The exception to this is that you can use a HTML box to create text fields that have different fonts. When you modify Fonts you will not impact the styling you set in HTML boxes.

Error

Sometimes error messages need to be presented on the input screen; for instance, when someone is unable to save their entry. You can style the error messages using the Error tab, if appropriate.

Success

Similarly, you can style success messages; such as when a form has been saved.

Other

Form Width lets you define how much of the open browser window to use. This is normally left at 100% but you can reduce it. The most common time to use this feature is if you are seeing horizontal scroll bars when viewing the form you have created. In addition, Label Column Width lets you define how wide the field label column is on the form. For instance, if you have a number of long labels, you can make that column wider so that the text does not wrap into as many lines. Typically this option is set from 200px to 300px, but no wider. Finally, Row Vertical Spacing lets you change the spacing above and below each field. 5px is the standard but setting it to 7px or 8px can make the form appear more expansive.

Layout

The Layout tab of your Form Builder Settings allows you to add text to the Header and Footer of the form.

To access a form's layout settings, click the Layout tab, the second parent tab of the form builder.

The Header and Footer sections allows you to add a custom header or footer to the form.  Each form can have a customized header and footer that appear on the form. HTML text boxes are regularly used in the form layout to represent header information but the option to put a Header and Footer in to the form using the Layout function.  If you want to use this option, click on the “Layout” box on the top of the form.  You can then put data into the Header and Footer fields.  You may use HTML code.  For most new forms, you will simply put an HTML field at the top or bottom of the form instead of using areas / in the header or footer.

The Header tab is helpful for inserting CSS into a form. Make sure to use <style> tags.

Still need help? Contact Us Contact Us