The Fluent Form Styler element allows you to take full creative control over Fluent Forms. No more restrictions on typography, sizing, padding, colors, and button placement.
Requirements
In order to use the Fluent Form Styler element, you should have the Fluent Forms plugin installed already. You should also create the forms you wish to style before loading them onto your page with the Fluent Form Styler.
Activate the element
This element is active by default. If it does not show in the elements list of Bricks Builder you can turn in on from the WordPress admin menu. Go to the Dashboard -> Screenflicker -> Elements -> General Elements page. You should be able to see a list of all of the general elements included with Screenflicker Bricks and their current status (enabled or disabled).
Find “Fluent Form Styler” and make sure the toggle button is enabled.
Then click “Save Settings”.
With the element enabled, load your template, page, or post in Bricks Builder.
How to use Fluent Form Styler
In Bricks Builder, drag the Fluent Form Styler element from the elements panel onto your page. Choose which form you’d like to display and update the controls to customize the form to your liking.
Controls
Form Container
Margin/Padding – Sets the padding and margin for all sides of the form.
Width – Sets the width of the form. Using pixel (px), em, and rem units have the best results for this option. Percentage based widths don’t work well here.
Background – Sets the background color or image for the form. Dynamic data can be used here.
Border – Sets the border around the entire form. You can also modify the border color, type, and radius.
Labels
Margin/Padding – Sets the padding and margin for all sides of every label in the form.
Width – Sets the width of all labels. Default is “auto”.
Typography – Sets all the font properties for all labels in the form.
Background – Sets the background color or image. Dynamic data can be used here.
Border – Sets the border around labels.
Input Fields
Placeholder typography – Adjusts the typography for placeholder text in form elements only. This is the text which shows before a value has been entered into the input.
The input fields section is broken into Text Inputs and Textareas. All of the following controls are available in both sections and only affect their respective form elements.
Margin/Padding – Sets the padding and margin for all sides of inputs.
Width – Sets the width of all inputs.
Height – Sets the height of all inputs. Default is “auto”.
Typography – Sets the font properties for entered values on all inputs.
Background – Sets the background color or image. Dynamic data can be used here.
Border – Sets the border around the element. You can also modify the border color, type, and radius.
Box shadow – Sets the box shadow on all inputs.
Dropdown, Multiple Choice
Margin/Padding – Sets the padding and margin for all sides of the element.
Width – Sets the width of the element.
Height – Sets the height of all dropdown menus. Default is “auto”.
Typography – Sets all the font properties on all dropdown and multiple select dropdown menus.
Border – Sets the border around the element. You can also modify the border color, type, and radius.
Dropdown Menu
The following options apply to the open options list of dropdown menus.
Typography – Sets the font properties on the listed .
Background – Sets the background color or image behind each option in the list.
Select Option
These options only apply to multiple choice inputs. The settings below will only effect the selected options or pills.
Margin/Padding – Sets the padding and margin for all sides of the selected options.
Typography – Sets the typography for the selected options.
Background – Sets the background color or image.
Border – Sets the border around the selected options. You can also modify the border color, type, and radius. Default for selected options is heavily rounded corners.
Radio & Checkbox
Margin/Padding – Sets the padding and margin for all sides of the container holding all options for the grouped radio buttons or checkboxes.
Width – Sets the width of the container holding all radio buttons or checkboxes in the group.
Typography – Sets the font properties for all titles and labels in the radio button and checkbox groups.
Inputs
Margin – Allows you to set the margin for the radio button and checkbox inputs only. This does not effect anything else in the form.
GDPR, Terms & Conditions
Fluent Forms has special elements to ask for GDPR compliance and accepting terms and conditions. The following options are for those elements.
Margin/Padding – Sets the padding and margin for all sides of the container holding the checkbox and content.
Typography – Sets all font properties for text showing around GDPR compliance checkboxes as well as terms and conditions checkboxes.
Background – Sets the background color or image.
Border – Sets the border around the container for the element.
Links
Typography – Sets the font properties of any links in the label text for GDPR and terms & conditions checkboxes. It is suggested to make this setting match your global link styles.
Submit Button
Margin/Padding – Sets the padding and margin for all sides of the submit button.
Width – Sets the width of the submit button.
Position button – Sets the position of the submit button. Options are: left, center, and right. If the submit button width is set to 100%, this setting will have no effect on the button.
Typography – Sets the font properties of the submit button.
Background – Sets the background color or image.
Border – Sets the border around the submit button.
Box shadow – Sets the box shadow on the submit button.
Error Messages
Error messages are shown when a required input has no value or when the given value is not entered correctly (such as an invalid email format in the email field). By default, Fluent Forms displays the error text below the form input and adds a red border to the input.
Error Message
Margin/Padding – Sets the padding and margin for all sides of the message text.
Width – Sets the width of the message text.
Typography – Sets the font properties of the error message text. Default from Fluent Forms is red.
Error Inputs
Border – Sets the border around inputs in an error state. Fluent Forms default is a 1px red border.
Success Message
When a Fluent Form is successfully submitted, a message can be displayed. These options are for that message.
Margin/Padding – Sets the padding and margin for all sides of the success message container.
Width – Sets the width of the container element.
Typography – Sets the font properties of the success message text.
Background – Sets the background color or image.
Border – Sets the border of the success message container.
Box shadow – Sets the box shadow on the success message container.
Help Messages
By default, help messages in Fluent Forms are shown as little “i” icons next to the form input label. The actual help text is show as a tool tip when the mouse hovers over the icon.
Icon color – Sets the color of the “i” icon next to form input labels with help messages.
Asterisk
Required fields in Fluent Forms display a small asterisk next to the input field label. These settings affect that asterisk. Setting which side of the label the asterisk appears on is done in the Fluent Form, not here.
Color – Sets the color of the asterisk.
Left spacing – Sets how much space is to the left of the asterisk. Useful when the asterisk is after the label (to the right of it). Default unit is px.
Right spacing – Sets how much space is to the right of the asterisk. Useful when the asterisk is before the label (to the left of it). Default unit is px.
Section Breaks
Breaks in Fluent Forms include titles, a divider, and can include description text. These settings effect those elements.
Margin/Padding – Sets the padding and margin for all sides of the break element.
Title typography – Sets the font properties on the title only.
Description typography – Sets the font properties on the description only.
Divider color – Sets the color of the divider.
Background – Sets the background color or image. Dynamic data can be used here.