Custom Submit Button

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.

Adding Custom Submit Button Field

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.

NOTE

If you do not have any existing forms, read Create a Form from Scratch or Create a Form using Templates to create a new one.

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 field by clicking or dragging it and dropping it into your editor.

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

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.

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.

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, see the Conditional Logic documentation linked above.

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.

Preview of Added Custom Submit Button

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

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