The Fluent Form block in Frontis lets you easily add a form from the Fluent Forms plugin to any page or post. Just select the block, choose a form, and it will appear instantly—no coding required. It’s the fastest way to add contact forms, surveys, or any custom forms to your page.

Install Fluent Forms Plugin (if not already installed):

• Go to your WordPress Dashboard.
• Navigate to Plugins > Add New.
• Search for Fluent Forms.
• Click Install and then Activate.

Create a Form:

• Go to Fluent Forms > All Forms.
• Click Add New Form.
• Choose a template or start from scratch.
• Customize your form and save it.

Adding Frontis Fluent From Block 

To insert the  Fluent Form block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear. Search for the Fluent Form block in the search box or select it from the menu bar.

After inserting the Fluent Form  blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to view the block list on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, Extra).

Basic Section

Basic > Fluent From

• Select From: The “Select Form” feature in the General section of the Frontis Fluent Form block lets you choose which Fluent Form to display on your page.
• Show labels: The Show Labels switcher in Fluent Forms lets you show or hide field names (like Name or Email) above the input boxes. Enable the switch to show the feature on your page.
• Show Placeholder: The Placeholder Switcher in Fluent Forms lets you move the field label inside the input box as placeholder text. This makes the form look simpler and saves space. Enable the switch to show the feature on your page.
• Show Error Message: The Show Error Message switcher lets you show or hide messages when someone fills out a field incorrectly. Enable the switch to show the feature on your page.

Style Section

Style > Label Section

• Color: Here, you can change the label text color.
• Typography: The typography section lets you change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Style > Input & Textarea Section

• Background Color: Here, you can change the background color of the heading.
• Text Color: The text color feature lets you change the color of your text. 

• Typography: The typography section lets you change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Text Indent: The Text Indent feature adds a small space before the text inside a box, so the text doesn’t touch the edge. It helps the form look clean and easy to read. Here you can add a value as you need.
• Input Width: The Input Width option allows you to adjust the width of the input box. You can customize the box to full width, half width, or any specific size that suits your form layout.
•  Input Height: The Input Height feature lets you change the size of the input box to make it taller or shorter based on your design
• Textarea Width: The textarea width feature controls how wide the text box looks on the screen. You can set it to full, half, or custom width. This helps fit the form layout better.
• Textarea Height: The textarea height refers to the vertical size of the text box. You can adjust the height of the textarea according to your requirements. 
• Spacing: Spacing adds space around form fields. It allows you to add space in your text field as you need.
• Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.
• Border and Border radius: Here, you can place a border around the entire area and adjust the border color and border radius.
• Focus border: The focus border changes the border style or color when a user clicks on a field. It helps show which field is active.
• Focus Border Radius: The focus border radius controls how rounded the corners of a field appear when it’s clicked. It helps style the form to look smooth or sharp.

Style > Placeholder Section

Placeholder: The placeholder refers to sample text shown within a form field. It helps users understand what kind of information to enter, like “Enter your name” or “Type your message here.” It disappears when the user starts typing. This feature also lets you change the placeholder color.

Style > Radio & Checkbox

• Radio Box Size: The size setting for radio and checkbox controls how large they look.
• Normal Color: The Normal Color feature sets the color of the radio button or checkbox before it’s selected.
• Checked Color: The Checked Color feature lets you choose the color that shows when a radio button or checkbox is selected.
• Border Width:  The Border Width changes the size of the outline around the radio or checkbox.
• Border color: The Border Color feature lets you pick a color for the outline around the radio button or checkbox.
• Border Radius and Checkbox Radius: The Border Radius controls how rounded the corners of a field appear.
• Item Spacing: The Item Spacing feature controls the space between each radio button or checkbox. It helps make the form look clean and easy to read.

Style > Section Break

• Alignment: Alignment lets you choose where the section title or line appears, left, right, or center.
• Title color: The Title Color feature lets you change the title color.
• Typography:  You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
• Padding: Padding adds space inside the element, around the content. You can also adjust padding individually on each side. Click on the Link icon and add or reduce the padding on any side you want.
• Margin: Margin controls the space outside the element, helping to adjust its position on the canvas. You can add a margin to all sides or just one. Use the Link icon to manage each side separately.
• Description color: The Description color feature lets you change the description color.
• Typography:  You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
• Padding: Padding adds space inside the element, around the content. You can also adjust padding individually on each side. Click on the Link icon and add or reduce the padding on any side you want.
• Margin: Margin controls the space outside the element, helping to adjust its position on the canvas. You can add a margin to all sides or just one. Use the Link icon to manage each side separately.

Style > Custom HTML

Custom HTML lets you add your own code to include things like text, images, or buttons in your form or page. You can also change the alignment, set colors, adjust typography, and add padding or margin as needed.

Style > Submit Button

The Submit section allows you to change the design of the submit button. You can customize its alignment (left, right, or center), adjust height and width, adjust typography, set typography and background color, and add padding or margin. 

Style > Success Message

The Success Message feature lets you change how the message looks after someone submits the form. It also allows adjusting the text style, background color, border, and border radius.

Style > Error Message

The Error Message feature lets you change how the message looks when there’s a problem with the form. It also allows adjusting the text style, background color, border, and border radius.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible:- The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border radius. This option allows you to apply a box shadow to the Fluent Form block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches let you show or hide the section on different devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.