With Fluent Form, you can create a registration or subscription forms for your visitors. It’s a very useful block for collecting data.
1. How to add Fluent Form Block? #
To add the Fluent Form Block in your Gutenberg editor first click on (+) icon then in the search box type “Fluent Form” and you will see the “Fluent Form” block.
After inserting the “Fluent Form” block you will get the default look like below. Now you need to change the settings.
2. General Settings #
From the General Settings Tab, You can select a form, display label on/ off, display placeholder on/ off, and display error message options. The General settings panel properties are as follows.
3. Style Settings #
From the Styles Settings Tab, You can set all possible styles typography, color, padding, background, and other style settings.
- Form Box : From the form box panel, you can set form max width, form box alignment left, right and center for styling the form box.
- Label: From the label panel, you can set typography, color and label to field space for styling the input label.
- Input/ Textarea /Select: From the input/textarea/select panel, you can set typography, color, background, width, height, field space, padding and border for styling the input/textarea/select field.
- Checkbox & Radio: From the checkbox & radio panel, you can set size, space, label color, background color, checked color, border width, checkbox rounded corner for styling the checkbox & radio.
- Placeholder: From the placeholder panel, you can set color for styling the input placeholder.
- Section Break: From the section break panel, you can set the background color, padding, and margin for styling section wrapper also this section include heading and description typography and color change options
- Custom HTML: From the custom HTML panel, you can set typography and color for styling the custom html.
- Submit Button: From the submit button panel, you can set typography, color, width, height, padding, margin, border and box shadow for styling the submit button.
- Success Message: From the success message panel, you can set typography, color, border color for styling the form submit success massage.
- Error Message: From the error message panel, you can set typography, color, border color for styling form submit error message.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
