Fluent Forms integrates with elementor, allowing you to add and design forms on your WordPress pages without any code. You can easily adjust colors, shapes, sizes, backgrounds, margins, padding, and more, making form creation easy and visually appealing.
This guide explains creating dynamic and visually appealing forms using the Fluent Forms widget in Elementor.
Create a Form in Elementor #
First, open the Elementor editor for the page where you want to add your form. Go to the Search Bar and type Fluent Forms. Then, select the Fluent Forms widget, which will create a block for your form.
Now, choose the form you want to add to the page from the drop-down menu in the widget. If you have pre-built forms, you’ll see them in the dropdown menu, and you can Select a Fluent Forms here. If not, you can create a new form using Fluent Forms.
If you do not have any existing forms, read Create a Form from Scratch or Create a Form using Templates documentation to create a new one.
Customizing Form Style #
The Fluent Forms widget lets you style your form to fit your site’s look and feel. In the Style tab, you’ll find these settings:
Form Container: Change the background, set the form’s width, and adjust its margin and alignment.
- Background Type: Choose a solid color or upload an image for the form’s background.
- Color: Pick a global color or use the color picker for form elements.
- Image: Upload or select a background image.
- Link Color: Set the color for any links in your form.
- Max Width: Control the form’s maximum width.
- Alignment: Align the form left, center, or right.
- Margins: Add space outside the form (top, right, bottom, left).
- Padding: Add space inside the form borders.
- Border Type: Choose a border style (solid, double, dashed, dotted, groove, etc.).
- Border Radius: Round the form’s corners.
- Box Shadow: Add a shadow around the form and adjust its horizontal/vertical offset, blur, and spread.
Input & Textarea: Input & Textarea you can customize as needed.
- Background Color: Change the field background.
- Text Color: Pick the text color from the color picker.
- Border Type: Choose a border style (solid, dashed, dotted, or none).
- Border Radius: Round the corners to your liking.
You can also adjust text indent, field width/height, textarea width/height, padding, spacing, and more.
Submit Button: You can easily customize the submit button using these options:
- Color and Typography: Change the button’s text and background colors to fit your design.
- Padding: Adjust the spacing inside the button for better visual appeal.
- Typography: Customize the font style to match your brand’s look.
Also, you can customize the color of your form’s link and image background.
Link Color: Choose a custom color for any links within the form.
Image Background: Add an image as the form’s background for more design options.
Using the Fluent Forms widget in Elementor makes adding and styling forms on your WordPress site simple.
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our support team. Thank you.
