Save Progress Button in Fluent Forms

Save Progress button can store form progress in the database without the users having to be logged in. This button is available in the form attached with a link so that later users can fill the form from any device anywhere.

Let’s go into the further process to understand how we can add and utilize the Save Progress Button in Fluent Forms.

• To add this field to your form, drag and drop the field from the available Advanced input fields.

• To enable customization, click on the edit icon (pencil icon) you get when hovering over the field. Or click on the Input Customization tab in the right sidebar when selecting the field.

In the Input Customization section, you can customize the Save Progress Button field in the following ways. In this section, you will find 2 portions:

1. Basic Options  
2. Advanced Options

Basic Options

On the right side of the tab, there are some important Basic options which are given below:

• Submit Button: Default or Image; these two options are available in Submit Progress Button. Users can keep this Button as a Default button or choose the Image option with the Image URL.

• Submit Button Text: The button text can be customized by users using this field. Whichever text is used for this field will be shown as the button text.

• Button Style: As described earlier, the basic design and other functionalities of the save progress button are the same as the default one. However, you can select the custom option and adjust the button’s predefined color scheme, position, or function.

• 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 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.

• Button Size: This option defines the size of the button. Small, Medium & Large these three options are available with the Button size.

• Content Alignment: This option defines how the content will be aligned.

Also, you can use exact 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.

Advanced Options

The Advanced options available for the Save Progress Button input field are as follows:

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

• Element Class: Similarly, you can add custom CSS classes to the input field itself.

• Conditional Logic: You can create certain rules to dynamically hide/show the input field based on the values from some other fields. To get a better understanding of Conditional Logic, read this.

• Save the form when the customization is done.

The Save Progress Button is equally applicable for Step Form.

• Admin may now add this Form’s shortcode to any page. Users can see the form, and after hitting the Save Progress Button, a link will be generated so that they can use this link to view the form from any browser at any time.