NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Docs » Form Fields & Elements » Field Wrapper Styling & Settings

Field Wrapper Styling & Settings

The field wrapper reffers to the outer container holding the field. This article will walk you through styling a field's outer wrapper and setting up a field to be visible only on specific devices.

In this Article

Where to find a field's wrapper styling settings
Field wrapper background & border styling
Field wrapper margins & padding
- Field margins explained
- Field padding explained
Setting up a field for specific devices

Where to find a field's wrapper styling settings

Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
Click on the "FIELD WRAPPER" tab from the settings panel.

Field wrapper background & border styling

Below is a field example as presented in a form on the front-end (in your WordPress page or post) with a light blue background, 1px blue border and border radiuses of 10px. The colored container containing the field below is reffered to as the field wrapper.

*NamePlease enter your name

Background & border settings list:

Setting	Function	Default
Background Color	Like in the above screenshot - Provides a color picker tool that allows you to select a background color for the field wrapper.	Transparent
Border Color	Provides a color picker tool that allows you to select a border color for the field wrapper.	Transparent
Border Width	Sets the width (thickness) of the border line around the wrapper	0
Border Radius	Rounds the corners of an wrappers outer border edge	0

Field wrapper margins & padding

Field margins control the space around the field wrapper, affecting its positioning relative to other form elements, while padding controls the space within the field wrapper, affecting the spacing between the field and the border of the field wrapper itself.

NEX-Forms - Field Wrapper Styling - Figure 3

Field 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 an element independently (top, right, bottom, left)

*EmailWhat is your Email Address

Field Margin settings list:

Setting	Function
Margin Top	Sets the total space above the field wrapper, measured in pixels.
Margin Right	Sets the total space to the right of the field wrapper, measured in pixels.
Margin Bottom	Sets the total space below the field wrapper, measured in pixels.
Margin Left	Sets the total space to the left of the field wrapper, measured in pixels.

Field Padding

Field 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 element itself. Like margins, padding can be set for each side of an element individually

*EmailWhat is your Email Address

Field Padding settings list:

Setting	Function
Padding Top	Sets the amount of space between the top of the field and the top border of its wrapper, measured in pixels.
Padding Right	Sets the amount of space between the right side of the field and the right hand border of its wrapper, measured in pixels.
Padding Bottom	Sets the amount of space between the bottom of the field and the bottom border of its wrapper, measured in pixels.
Padding Left	Sets the amount of space between the left side of the field and the left hand border of its wrapper, measured in pixels.

Setting up a field for specific devices

Need to have certain field on specific devices and not on others, like for example, having a field not visible when using a mobile? This section will guide you to set a field to show only on specified devices. This means that you can have 1 form displayed differently on different devices.

Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
Click on the "FIELD WRAPPER" tab from the settings panel.

See "DEVICE VISIBILITY" setup. By default all devices are active for a field meanig the field will show in the form on all devices.

NEX-Forms - Field Wrapper Styling - Figure 1

Device Visibility settings list:
Setting	Function
Mobiles	When Active: The field will be visible on mobile devices. When Inactive: The field will be NOT be visible on mobile devices.
Tablets	When Active: The field will be visible on tablets. When Inactive: The field will be NOT be visible on tablets.
Laptops	When Active: The field will be visible on laptops. When Inactive: The field will be NOT be visible on laptops.
Destops and larger screens	When Active: The field will be visible on desktop and larger screens. When Inactive: The field will be NOT be visible on desktop and larger screens.
Setting Example	Result
	Field will only be shown on mobile devices and will be hidden on other devices.
	Field will only be shown on desktops and larger screens and will be hidden on other devices.
	Field will be shown on all devices except desktops and larger screens devices.
	Field will only be shown on mobiles and laptops and will be hidden on other devices.
	Field will be shown on all devices except mobile devices.
	Field will be shown on all devices.