- Edit an existing form or create a new form.
- Click on the "More Styling Options" button (last button on the width bar)
- Overall styling options and settings will slide in from the right hand side of the builder.
- Click on the "FORM WRAPPER" tab in the Overall Styling Panel.
NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
Form Wrapper Styling
This article will guide you on using the overall styling options to style the form wrapper. The form wrapper is the container that groups all form fields and elements.
In this Article
Where to find the form wrapper styling options
Wrapper Styling Options
This section provides a comprehensive guide to understanding and effectively utilizing all the overall styling settings that can be applied to the form wrapper.
| Wrapper Styling Setting Definitions | |
| Setting | Definition |
| Overall Font | Includes a selection of over 1500 google and regular fonts and sets the font family for all elements inside a form - from field labels, to input text, to html elements, to field validation error messages. Use this setting to instantly change the overall font of your entire form. |
| Form Background | Sets the background color of the form. |
| Border Color | Sets the border color of the form. |
| Border Width | Sets the width (thickness) of the form border. |
| Border Radius | Sets the border radius (roundedness) of the form border. |
Form Wrapper Margins & Padding
Form margins control the space around the Form wrapper, affecting its positioning relative to other page elements, while padding controls the space within the form wrapper, affecting the spacing between the form elements and the border of the form wrapper itself.
Form Margins
Margins are the space outside of the border of an element. They control the amount of space between the element and its neighboring elements. Margins contribute to the layout of the page by creating space between elements. You can set margins for each side of form independently (top, right, bottom, left)
| Form Margin settings list: | |
|
|
| Setting | Function |
| Margin Top | Sets the total space above the form wrapper, measured in pixels. |
| Margin Right | Sets the total space to the right of the form wrapper, measured in pixels. |
| Margin Bottom | Sets the total space below the form wrapper, measured in pixels. |
| Margin Left | Sets the total space to the left of the form wrapper, measured in pixels. |
Form Padding
Form padding is the space between the content of an element and its border. Padding is used to create space inside the element, effectively increasing the distance between the content and the border. Padding does not affect the layout of neighboring elements; it only affects the internal spacing of the form itself. Like margins, padding can be set for each side of an element individually
| Form Padding settings list: | |
|
|
|
| Setting | Function |
| Padding Top | Sets the amount of space between the top of the form's inner elements and the top border of its wrapper, measured in pixels. |
| Padding Right | Sets the amount of space between the right side of the form's inner elements and the right hand border of its wrapper, measured in pixels. |
| Padding Bottom | Sets the amount of space between the bottom of the form's inner elements and the bottom border of its wrapper, measured in pixels. |
| Padding Left | Sets the amount of space between the left side of the form's inner elements and the left hand border of its wrapper, measured in pixels. |
Form Wrapper Background Image Settings
Learn how to add a background image to your form.
| Form Background Image Setting Definitions | |
| Setting | Definition |
| Image | Opens your file browser from where you can browse to the image you need to use for your form background. Open the image to add it to your form background. Click on the X to remove the background image. |
| Size | |
| Auto | Renders the background image in its original size inside the form wrapper. |
| Contain | Resizes the background image to make sure the image is fully visible within the form wrapper. |
| Cover | Resizes the background image to cover the entire form wrapper, even if it has to stretch the image or cut a little bit off one of the edges. |
| Repeat | |
| Repeat X & Y | The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is the default. |
| Repeat Y | The background image is repeated only vertically |
| Repeat X | The background image is repeated only horizontally |
| No repeat | The background-image is not repeated in the form wrapper and the image will only be shown once in its given position. |
| Position | |
| Align Left | Aligns the background image to the left of the form wrapper. |
| Align Center | Aligns the background image to the center of the form wrapper. |
| Align Right | Aligns the background image to the right of the form wrapper. |
Example of a form with a background image
Below is an actual form example with a background image sized to be auto, with no-repeating and positioned to be aligned to the left of the from wrapper.
Form Wrapper Drop Shadow
Learn how to add a light or dark drop shadow to a form and how to completely remove a drop shadow from a form.
Drop a light form wrapper shadow
- Edit an existing form or create a new form.
- Click on the "Drop Light Shadow" button under the background settings in the width bar.
Drop a dark form wrapper shadow
- Edit an existing form or create a new form.
- Click on the "Drop Dark Shadow" button under the background settings in the width bar.
Removing a drop shadow from a form
- Edit an existing form or create a new form.
- Click on any active shadow by turning it off.
Removing the Form Wrapper
Learn how to create an open plan form by removing the wrapper background.
- Edit an existing form or create a new form.
- Remove the form drop shadow by clicking on any active drop shadow.
- Open the form Background color setting.
- Click on the "Clear Color Selection" button.
- Set the overall form padding to 0 (zero).
Example of an Open Plan Form
Below is an actual form example with no background, no drop shadow and no form border.
Was this article helpful?
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Popular Articles
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article