Custom Submit Button Field in WP Fluent Forms

In WP Fluent Forms, the ‘Custom Submit Button’ field is used to replace the default submit button of the form. The default submit button is generated automatically when you create a form and placed below all of the form fields. But you might want to have your own custom position and styling for the button instead of the default one. In this situation, the “Custom Submit Button” field will do the job.

Note: The only differences between the default submit button and the custom submit button is the position changing feature, custom styling options, and conditional logic. The default submit button position is fixed below the form and doesn’t have conditional logic but the custom submit button can be used as inline with other form fields inside a container and have conditional logic feature. Learn how to create an inline subscriber form with WP Fluent Forms.

Custom Submit Button Field in WP Fluent Forms

As described earlier, The basic design and other functionalities of the custom submit button are the same as the default one. But you can get under the hood and change its pre-defined color scheme, positioning, or action for the button.

Background color: Give a suitable background color to the button according to your website color scheme. In my case, the background color is the default blue.

Text color: Based on the background-color you can give a smooth color to the button text. In my case, the button text is white(#ffffff) which perfectly suits the blue background.

Border color & radius: The button by default has a one-pixel border. You can also define a color for the border. In my case, I gave a slightly darker color than the background color which is standard. Also, you can give a radius for the button based on what suits on the form.

Min width: You can give a minimum width to the button both in pixels and percentage, whichever suits your form. A 100% min-width will be a full-width button.

Also, you can use exect same style features for the hover states of the button. Click on the hover state and apply the same kinds of styling features which suits the active state styles.

From the Advanced Options, you can assign any class to the button element and/or the container for the button to do custom CSS style.

Add custom CSS to WordPress Fluent Forms

Also, you can use conditional logic for the submit button as shown in the screenshot above. In this example, I gave a condition that the submit button will only show up only if the terms & conditions is checked or it will be hidden.

This is how you can use WP Fluent Forms “Custom Submit Button” field to make advanced WordPress forms.

Was this article helpful to you?

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