---
title: Custom Submit Button in Fluent Forms
description: "Want to use a special **Submit** button on your Fluent Form? It's simple! This field allows you to replace the **Default Submit Button** with a **Custom Submit Button** for better control over **positioning, styling,**and**conditional logic**. This guide will walk you…"
url: "https://fluentforms.com/docs/custom-submit-button-in-fluent-forms/"
updated: "2025-06-03"
category: Field Types / Advance Fields
---

# Custom Submit Button in Fluent Forms

Want to use a special **Submit** button on your Fluent Form? It's simple! This field allows you to replace the **Default Submit Button** with a **Custom Submit Button** for better control over **positioning, styling,**and**conditional logic**.

This guide will walk you through adding and customizing the **Custom Submit Field** in Fluent Forms for your WordPress site.

[How to Customize Submit Button in WordPress | WP Fluent Forms](https://www.youtube.com/embed/nDE_XdSvG0A?feature=oembed)

## Adding Custom Submit Button Field

To learn how to add the **Custom Submit Button**field to Fluent Forms, follow the steps below:

First, look for the **Forms** section in the Fluent Forms menu. Then, choose the form you want to work on and click the **Edit Icon** to get to the page where you can change it.

> If you do not have any existing forms, read [Create a Form from Scratch](https://fluentforms.com/docs/how-to-create-a-form-with-fluent-forms/) or [Create a Form using Templates](https://fluentforms.com/docs/using-and-customizing-pre-built-quick-forms-in-fluent-forms/) documentation to create a new one.

![form editor 01 2 scaled 49755](https://fluentforms.com/wp-content/uploads/2025/02/form-editor-01-2-scaled.webp)

Once on the **Editor** page, click the **Plus** **Icon** in your form editor and open the **Advanced Fields** module. The **Advanced Fields**option is also in the right sidebar under the **Input** **Fields** tab. 

Now, select the desired **Custom Submit Button Input**fieldby **clicking** or **dragging**it and**dropping** it into your editor.

![adding custom submit button 02 scaled 49755](https://fluentforms.com/wp-content/uploads/2025/02/adding-custom-submit-button-02-scaled.webp)

## Customizing the Custom Submit Button Field

Once you add the Custom Submit Button field, you can customize it by hovering over it and clicking the **Pencil Icon**. It will take you to the **Input Customization** tab on the right, which offers the following customization options.

- Custom Submit Button Options
- Advanced Options

![Input customization 03 24 scaled 49755](https://fluentforms.com/wp-content/uploads/2025/02/Input-customization-03-24-scaled.webp)

### Custom Submit Button Options

Under the Input Customization tab, you will find various settings options for customizing the field. These options allow you to configure essential aspects of the **Custom Submit Button**field.

All the settings under the **Custom Submit Button**Field mentioned above are briefly explained below-

**A. Submit Button**: Choose between **Default** or **Image** for the button. These two options are available in the Submit Button option. Users can keep this Button as a **Default** button or select the **Image** option with the **URL**.

**B. Button Style**: Customize the button’s color scheme, position, and action to match your form’s design.

**C. Background Color**: Select a color that fits your website’s theme.

**D. Text Color**: Adjust the button text color to ensure readability and design consistency.

**E. Border Color & Radius**: If necessary, define a border color and set the border radius to achieve a rounded button style.

**F. Min-Width**: Set a minimum width for the button in **pixels** or **percentage**.

**G. Button Size**: Choose from **Small, Medium,**or**Large** button sizes that suit your website content.

**H. Content Alignment**: Align the button's content according to your design preferences.

**Hover State Styling:**You can apply the same styling options for the button’s hover state by clicking the **Hover State** tab and adjusting the styles accordingly.

![Custom Submit button 04 scaled 49755](https://fluentforms.com/wp-content/uploads/2025/02/Custom-Submit-button-04-scaled.webp)

#### Advanced Options

Advanced settings allow further customization to meet specific use cases. 

**A. Container Class:** Use this option to add your custom CSS classes to the field’s wrapper.

**B. Element Class:**Add custom CSS classes to the input field.

**C. Conditional Logic:** This option allows you to create specific rules to dynamically hide/show the input field to function conditionally based on your submission values according to your set of conditional logics. To learn more, read this [Documentation](https://fluentforms.com/docs/set-up-forms-with-conditional-logic-in-fluent-forms/). 

![Advanced Options 05 19 scaled 49755](https://fluentforms.com/wp-content/uploads/2025/02/Advanced-Options-05-19-scaled.webp)

## Embed the Form into the Front

Once you complete the customization, click the **Save Form** button to save all your changes. Click the **Preview & Design** button in the middle to see the form preview.

To integrate and display the form on a specific **Page** or **Post**, copy the **Shortcode** from the top right side and paste it into your desired **Page** or **Post**.

![Save Form 06 25 scaled 49755](https://fluentforms.com/wp-content/uploads/2025/02/Save-Form-06-25-scaled.webp)

## Preview of Added Custom Submit Button

Here is a preview of the form with the **Custom Submit Button input** field.

![Preview 07 15 49755](https://fluentforms.com/wp-content/uploads/2025/02/Preview-07-15.webp)

**Congratulations!** You have successfully added a **Custom Submit Button**field to your **Fluent** **Forms** form.

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!