---
title: Official Form Styler of Fluent Forms
description: "Fluent Forms** **is designed to look great & fit with any WordPress theme. With the built-in **Form Styler**, you can easily create a custom design that perfectly matches your site's branding without coding knowledge. > Form Styler is a Pro feature. To…"
url: "https://fluentforms.com/docs/official-form-styler-of-fluent-forms/"
updated: "2025-06-03"
category: Form Building / Form Style/Template
---

# Official Form Styler of Fluent Forms

Fluent Forms** **is designed to look great & fit with any WordPress theme. With the built-in **Form Styler**, you can easily create a custom design that perfectly matches your site's branding without coding knowledge.

> Form Styler is a Pro feature. To use it, make sure you have Fluent Forms Pro.

This guide walks you through how to **design, style,**and**customize** your forms visually in Fluent Forms.

## Getting Started with Form Styler

First, open or create a form in Fluent Forms. **Save the form**, then click **Preview & Design** in the top-right corner to open the styling panel.

![official form style 01 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/official-form-style-01-scaled.webp)

## Styling Options

There are three tabs for the design part of the Fluent form.

### General Tab

The General Tab is used to style each element of the form. Here you can choose some pre-defined styles from **Form Style Templates**. 

There are different style sets to choose from. **Default**, **Modern Bold**, **Modern Light**, **Classic**, **Bootstrap Style,**and**Inherit Theme Style** are all **Form Style Template**.

![02 6 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/02-6-scaled.webp)

You can also **Customize** the preset by choosing the **Custom (Advanced Customization)** option. From this option, you can change the**Label Styles**, **Input and textarea styles, Placeholder styles, Radio and checkbox Styles,** and **Submit Button styles**.

**Label Style:**You can change the color of the field labels. As shown in the screenshot below, you may also define typography, such as font size, font weights, text decoration, line height, and letter spacing.

![general label 01 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/general-label-01-scaled.webp)

**Input & Textarea Styles:** Set the input fields and text areas with background and text colors. Change the font size, weight, text decoration, line height, letter spacing, etc. The box shadow of the input and text-area boxes can be defined below the **Typography** settings.

![Text area 1 scaled 46036](https://fluentforms.com/wp-content/uploads/2025/04/Text-area-1-scaled.webp)

When clicking on **Focus**, you can add style to the input fields and text regions. This is the same as the standard styling options.

![Input Textarea scaled 46036](https://fluentforms.com/wp-content/uploads/2025/04/Input-Textarea--scaled.webp)

**Placeholder Styling:** Choose the color of the input field placeholders. Set the typography as indicated in the screenshot, which includes **Font Size, Font Weights, Text Decoration, Line Height, and Letter Spacing**, among other things.

![Placeholder 46036](https://fluentforms.com/wp-content/uploads/2025/04/Placeholder.webp)

**Radio & Checkbox Style:**When you enable **Smart UI**, you’ll see three styling options for the radio and checkbox fields. When the radio or checkbox is checked, define the border, item, and background colours.

You can also style your form with **Custom Border** by checking the **Use Custom Border Style**.

![Genral tab customize style 1 scaled 46036](https://fluentforms.com/wp-content/uploads/2025/04/Genral-tab-customize-style-1-scaled.webp)

**Image or File Button Style:**Fluent Forms offers the Image or File button Style options. You can customize the button to match your website’s design.

You can personalize the button’s background color, text color, typography, border options, and even add box shadows. 

These customizations can be applied to both the **Normal** state and the **Hover** state.

![image or file button style 06 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/image-or-file-button-style-06-scaled.webp)

**Submit Button Style:**Fluent Forms sets the default Submit button color to a vibrant dodger blue. However, you’re not restricted to this; you can easily customize the Submit button to suit your preferences and match your website's design.

The styling options for the**Submit button**are the same as those for the **Next** and **Previous** buttons in multi-page forms. 

You can personalize the button’s background color, text color, typography, border options, and even add box shadows. 

These customizations can be applied to both the **Normal** state and the **Hover** state.

![Button Style 46036](https://fluentforms.com/wp-content/uploads/2025/04/Button-Style.webp)

## Misc Tab

The Misc Tab styles the Form Container background, padding, and margin. 

**Container Style:**In the container style options, you can choose various design options, including background, borders, padding, margin, box shadow, etc.

**Form Border Settings:**Enable form border settings and specify the border type, color, width, and radius of the border.

![04 5 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/04-5-scaled.webp)

**Asterisk Styles:**You can choose the color of the asterisk styles of your form here.

![05 1 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/05-1-scaled.webp)

**Inline Error Message Styles:**The color of the Inline Error Message is customizable. As shown in the screenshot below, define the typography, including font size, font weights, text decoration, line height, and letter spacing, among other things.

![06 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/06-scaled.webp)

**After Submit Success Message Styles:**You can also easily customize the After Submit Success Message. Fill out your form and submit it for visual viewing while designing the submit success message for testing purposes.

You can customize the **background and fonts**. You can change the **Font Size** and weight, **Text Decoration**, **Line Height**, and**Letter Spacin**g, among other things. 

The box shadow of the success message box can be defined under the typography settings.

![07 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/07-scaled.webp)

**After Submit Error Message Styles:**The Error Message can also be customized after submission. Its styles are the same as the After Submit Success Message Styles.

You can set the background and font colours, as well as the font size, weight, text decoration, line height, and letter spacing.

You may also configure the box shadow of the success message box and also add a **Custom Border** in your form.

![08 scaled 46036](https://fluentforms.com/wp-content/uploads/2024/12/08-scaled.webp)

## Import

The **Import** tab selects a Fluent Form existing style add and can also import your style.

You can import your style from another **Existing Form** or **Upload** your Fluent form style.

![09 46036](https://fluentforms.com/wp-content/uploads/2024/12/09.webp)

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.