Official Global 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 Global Styler for WP Fluent Forms.

The Global 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 Global 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 Global 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 global styles for the form. for example the container style & its background etc. To customize these global 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.

Styling global elements of WP Fluent Forms

Asterisk Styles:

Choose the color of the asterisk styles of your form.

asterisk style WordPress WP Fluent forms

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.

form error messages style WordPress

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 Success Message Styles

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.

After Submit Error Message Styles WordPress

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.

Change font color of one label on the form WordPress Fluent Forms

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.

Input and Textarea style WordPress WP Fluent Forms

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

Input and Textarea focused style WordPress WP Fluent Forms

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.

Placeholder style WordPress WP Fluent Forms

Section Break Style:

Section break style has two tab Label Styling & Description Styling. Choose the color & typography for both label & description.

Section Break style WordPress WP Fluent Forms

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.

Checkable Grid style WordPress WP Fluent Forms

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.

Radio and Checkbox style WordPress WP Fluent Forms
.

Range Slider Style:

The range slider has three styling options. The active color (which is red in the below screenshot), the in-active color, and the text color. Set the colors which suit your styling.

Range slyder style WordPress WP Fluent Forms

Net Promoter Score Style:

The net promoter score has only one styling option. The active background color. Set the color which suits your theme & page styles.

Net promoter score style WordPress WP Fluent Forms

Multi-Page Style (Form Steps):

Design your multi-page form with ease. There are three styling section of multi-page style.

Multi-Page – Header Colors: Choose the active color, inactive color and the text color of the header of the multi-page option.

Multi Page - Header Colors WP Fluent Forms

Multi-Page Next Button Style: Choose the background color, text color, padding, margin, and border of the next button both for the normal & hover state.

Multi Page - next button style WP Fluent Forms.png

Multi-Page Previous Button Style: Same as the next button. Define the background color, text color, padding, margin, and border of the next button both for the normal & hover state.

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.

Submit button style WP Fluent Forms

Was this article helpful to you?

2 1

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