Once installed and activated, the Add-ons tab will become active. To get to the Add-ons tab, click on a form to edit from the All Forms list. The Add-ons tab is listed after the Rules tab.



Enable Form Design

Before you begin to set your custom design, you must enable the add-on for a form. To enable the add-on, check the “Enable custom design for this form” box. This will reveal several settings for you to configure.


Form Settings

The Form Designer add-on allows you to customize many aspects of the design by using color pickers, dropdowns, and inputs. These settings are in multiple sections, starting with Font Options.


Font Options

Font Family. Choose from a large selection of web safe fonts. Selecting a font family will attempt to display the main font, with several "fallback" options. If the user's system does not support the first font, it will try the next in the list. You only need to select the first font; VFB Pro takes care of the rest. The default is "Helvetica".


Font Size. This settings controls the size of the text on your form. The default is 14px.


Label Styles

Label Style. Labels are the field names displayed above a form input. By default they are Bold, but you can change the weight to Normal which reduces the thickness of the font.


Label Spacing. This setting controls the amount of space in between the label and the input below it. The larger the number, the more space you will have in between label and input. The default is 5px.


Label Color. This setting controls the color of the field name.


Input Styles

Input Text Color. Inputs are the form inputs where users enter their data. This setting controls the text color when a user types a value.


Input Background Color. This setting controls the text input background color.


Placeholder Text Color. This setting controls the placeholder text color. Placeholder text is generally lighter in color to represent a hint of what to type.


Border Width. This settings controls the input border thickness. The larger the number, the thicker the border. The default is 1px.


Border Style. This setting controls the input border style. By default they are solid, but you can change the change it to dashed, dotted, or none at all.


Border Color. This setting controls the color of the input borders.


Border Radius. This setting controls the border radius of all four corners of the input boxes. The larger the number, the more rounded the corners will become.


Focus Border Color. This setting controls the color of the input border when the input "has focus." What this means is when the user tabs into or places their mouse cursor inside the input, the input "has focus."


Focus Box Shadow. Uncheck this box to remove the box shadow, the faded gray appearance, when the input "has focus."


Descriptions

Vertical Margin. Descriptions are usually placed immediately after the field name or the field input box. Increase or decrease this number to change the amount of space that is between the top and bottom of the description. The default is 5px.


Horizontal Margin. This setting controls the amount of space on the left and right sides of the description. The default is 0.


Vertical Padding. This setting controls the amount of space inside the description on the top and bottom, after the margin has been applied. The default is 0.

 

Horizontal Padding. This setting controls the amount of space inside the description on the left and right, after the margin has been applied. The default is 0.


Validation Styles

Invalid Text Color. Validation is what happens when a user either passes or fails the enter a value according to certain validation rules. This setting controls the color of the input when validation fails.


Invalid Border Color. This setting controls the border color of the input when validation fails. Generally, you want this to match the Invalid Text Color.


Valid Text Color. This setting controls the color of the input when validation passes.

 

Valid Border Color. This setting controls the border color of the input when validation passes. Generally, you want this to match the Valid Text Color.


Buttons

Text Color. Buttons refer to the Submit buttons or those buttons on the File Upload field. This setting controls the text color of the Submit button.


Background Color. This setting controls the button background color.


Font Size. This setting controls the size of text in the button. The default is 14px.


Font Weight. This setting controls the weight of the text in the button. The larger this number, the heavier the font weight and thicker it will appear. The default is 8.

 

Border Width. This settings controls the button border thickness. The larger the number, the thicker the border. The default is 1px.

 

Border Style. This setting controls the button border style. By default they are solid, but you can change the change it to dashed, dotted, or none at all.


Border Color. This setting controls the color of the button borders.

 

Border Radius. This setting controls the border radius of all four corners of the buttons. The larger the number, the more rounded the corners will become.


Hover Text Color. This setting controls the color of the text when the mouse is hovered over the button.


Hover Background Color. This setting controls the color of the background when the mouse is hovered over the button.

 

Hover Border ColorThis setting controls the color of the border when the mouse is hovered over the button.


Custom CSS

If you are a web designer familiar with CSS (Cascading Style Sheets), the Form Designer includes a code editor section for you to include your own rules.


The rules you save in the Custom CSS box will be applied last, after VFB Pro's core CSS and the above Form Designer changes.


Copy Settings

The Form Designer add-on allows you to copy your settings from one form to another easily.

Before you begin, make sure you save your Form Design settings first.
  1. Click the Copy Setting button to bring up a Copy Settings pop-up box.
  2. Check the boxes by the forms you want to copy settings to
  3. Click the Copy button
  4. The pop-up box will automatically close