Fluent Form

How to use Fluent Form Widget of Sky Addons for Elementor

Sky Addons Fluent Form Widget is a widget that allows users to seamlessly integrate and style Fluent Forms into their Elementor pages using drag and drop. It has plenty of customization options and an easy to use interface.

Description

The Fluent Form widget for Sky Addons is a powerful Elementor integration that enables website creators to implement beautiful, fully customizable contact forms on their websites with ease. Perfect for landing pages, contact sections, feedback surveys, and lead generation forms, this widget eliminates the need for complex coding. It provides complete styling control over every aspect of your forms – from field appearance to submit buttons – ensuring your forms match your website’s design perfectly. As part of the essential Elementor toolkit, the Fluent Form widget bridges the gap between functionality and aesthetics, helping you build professional-looking forms that convert visitors into leads. Whether you’re creating simple contact forms or complex multi-step forms, this widget streamlines the process within your Elementor page builder workflow.

Key Features List

1. Seamless integration with the popular Fluent Form plugin
2. Complete styling control over form fields, labels, and buttons
3. Customizable input field styling with hover and focus states
4. Help text and tooltip customization options
5. Responsive design controls for all form elements
6. Section break styling capabilities for multi-section forms
7. Submit button complete customization with normal and hover states

Insert Fluent Form Widget

1. Open Elementor Editor. In the Elementor panel, search for “Fluent Form”
2. Drag and Drop the Widget to the desired location on your page / editor.

Fluent Form Section

• Select Fluent Form – Choose from your existing Fluent Forms to display in this widget.
• Create New Form Link – Easily access the Fluent Forms dashboard to create new forms or edit existing ones.

Style Customization

The Fluent Form widget offers extensive styling options allowing you to completely customize how your forms look and feel. You can style every element from input fields to labels, submit buttons to section breaks. The widget provides granular control over typography, colors, spacing, borders, and backgrounds for each form element. This ensures your forms perfectly match your website’s design language and create a seamless user experience for your visitors, improving engagement and conversion rates.

Form Input Fields Section

• Spacing Bottom – Controls the vertical spacing between form fields.
• Padding – Adjusts the internal spacing within form fields.
• Border Radius – Rounds the corners of your form fields.
• Typography – Customize the text style, size, and weight for form inputs.
• Text Color – Changes the color of text entered in the form fields.
• Placeholder Text Color – Customize the color of placeholder text in empty fields.
• Normal/Focus States – Separate styling controls for default and focused field states.
• Border Controls – Customize border width, style, and color.
• Box Shadow – Add drop shadows to your form fields.
• Background – Change the background color or gradient of your form fields.

Field Labels & Help Text Section

• Spacing Bottom – Controls spacing between labels and their form fields.
• Typography – Customize the font appearance of your field labels.
• Text Color – Change the color of your field labels.
• Check Box Label Color – Specifically style checkbox label text.
• Required Label Color – Customize the asterisk or required indicators.
• Help Text Styling – Comprehensive controls for tooltip appearance including padding, borders, colors, and typography.
• Icon Color – Change the help icon color.
• Arrow Color – Style the tooltip arrow.
• Background – Customize the tooltip background.

Submit Button Section

• Margin & Padding – Control spacing around and within the submit button.
• Typography – Style the submit button text.
• Border – Customize the button border appearance.
• Border Radius – Round the corners of your submit button.
• Box Shadow – Add depth with customizable shadows.
• Normal/Hover States – Different styling for default and hover states.
• Text Color – Change button text color for both states.
• Background – Customize button background with color or gradient.
• Hover Border Color – Change border color on hover.

Section Breaks Section

• Title Typography – Style the section break titles.
• Description Typography – Customize the appearance of section descriptions.
• Title Color – Change the color of section break titles.
• Description Color – Style the color of section break descriptions.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Plugin Missing Error – If you see a “Fluent Form Missing” notice, make sure to install and activate the Fluent Form plugin through the provided link.
2. Form Not Displaying – Ensure you’ve selected a form from the dropdown. If no forms appear, create one first in the Fluent Forms dashboard.
3. Styling Not Applied – Some styling may not appear in the editor preview. Always check the live preview to see accurate styling.
4. Responsive Issues – Use Elementor’s responsive mode to check and adjust form appearance on different device sizes.

Conclusion

The Sky Addons Fluent Form widget transforms how you implement and style contact forms in Elementor. With its extensive customization options, you can create forms that not only collect information efficiently but also enhance your website’s design. This essential addition to your Elementor toolkit eliminates the need for custom CSS while providing professional-looking forms that match your brand identity perfectly. Whether you’re building landing pages, contact pages, or lead generation forms, this widget makes the process intuitive and result-oriented.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.