Official Form Styler – WP Fluent Forms

WP Fluent Forms is designed to look great and fit with almost any WordPress theme. Yet you may need to do additional styling to the form so that it matches your site style.

Introducing Official Form Styler for WP Fluent Forms.

The Form Styler allows you to easily create custom design for the form without having any coding knowledge. In this article, we will show you how to easily Fluent Forms elements & layouts with Form Styler with just a few clicks.

After creating the form, click on preview & design at the top right corner of the editor and the preview window will open where you can start styling the form.

The design part consists of two tabs. The General Tab for styling each individual element of the form and the Misc Tab to style the Form elements of the form including the Form Container background, padding, and margin. The Asterisk Styles, Inline Error Message Styles, After Submit Success Message Styles, and After Submit Error Message Styles.

Choose Predefined Styles:

As you can in the above screenshot you can choose some pre-defined styles “Form Style Templates“. There are five predefined style set available. The Default Style which is inherited from the theme, Modern Bold, Modern Light, Classic, and Bootstrap Style.

When using the predefined style set you still can customize some form styles for the form. for example the container style & its background etc. To customize these form styles go to Misc Tab locating right after the General Tab.

The Form Container Style:

As shown in the below screenshot you can define the background color of the form the padding and margins of the form container.

Form Border Settings: Enable form border setting and choose the border type, define the border color, border width and radius.

Asterisk Styles:

Choose the color of the asterisk styles of your form.

Inline Error Message Styles:

Choose the color of the Inline Error Message. Define the typography including the Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing, etc as shown in the below screenshot.

After Submit Success Message Styles:

You can also style the after submit success message with ease. For testing purposes, you can fill out your form and submit it for a visual view while styling after submit success message.

Customize the color of the background and font. Customize the typography including the Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing, etc. Below the typography settings, you can define the box shadow of the success message box.

After Submit Error Message Styles:

You can also style the After Submit Error Message. This styling options are identical to the After Submit Success Message Styles. Define the background color and font color. Set the typography including the Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing, etc. And below the typography settings, you can define the box shadow of the success message box.

Custom (Advanced Customization):

With Custom Advanced Customization located with the dropdown under General Tab, you can style the input fields according to your choice & needs.

Label Styles:

Set the color of the field labels. Also define the typography including the Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing, etc as shown in the below screenshot.

Input & Textarea Styles:

Set the background color and text color of the input fields and textarea. Customize the typography including the Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing, etc. Below the typography settings, you can define the box shadow of the input & textarea box.

You can also style the input fields & text areas when focused. It’s identical to the normal styling options.

Placeholder Styles:

Choose the color of the placeholder of the input fields. Set the typography including the Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing, etc as shown in the below screenshot.

Grid Table Style:

The grid table has two tabs, Table Head and Table Body. Define table head background & text color. Move to the next tab and define the table body text color and background color.

grid-table

Radio & Checkbox Style:

Click to enable smart UI and you will find two options to style the radio and checkbox filed. Define the border color and background color when the radio or checkbox is checked.

.

Submit Button Style:

By default WP Fluent Forms styles the submit button color with a dodger blue. But you are not limited with it, customize the submit button styles with your own preference.

The submit button styling is identical to the next & previous button styling of multi-page. Choose the button background color, text color, typography border options, and box shadows for both normal & hover state.

Was this article helpful to you?

8 13

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket