WP Forms

How to use WP Forms Widget of Sky Addons for Elementor

Sky Addons WP Forms Widget lets you seamlessly integrate WPForms into your Elementor website. Style your forms directly within the Elementor editor, creating a cohesive look and feel for your site. If you are looking for essential addons for elementor or an elements pack to enhance your elementor page builder, this widget is a great addition. Whether you’re building a landing page or a full-fledged elementor website, the WP Forms widget simplifies contact form integration.

Description

The Sky Addons WP Forms widget is a powerful tool designed to bridge the gap between the popular WPForms plugin and the Elementor page builder. This widget allows you to embed any WPForm you’ve created directly into your Elementor pages with ease. But it doesn’t stop there! The real magic lies in the extensive styling options. You can customize every aspect of your form, from the field styles and label typography to the submit button’s appearance, all within the familiar Elementor interface. This ensures that your forms perfectly match your website’s design, providing a consistent and professional user experience. If you’re using Elementor or Elementor Pro, this widget enhances your design capabilities. It’s ideal for creating contact forms, newsletters, and subscription forms.

Key Features

1. Easy Integration: Quickly embed any WPForm into your Elementor page.
2. Comprehensive Styling: Customize form fields, labels, and submit button.
3. Responsive Design: Ensure your forms look great on all devices.
4. User-Friendly Interface: Style your forms directly within the Elementor editor.
5. Conditional Logic Support: Works seamlessly with WPForms conditional logic.

Inserting WP Forms Widget

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

Content Section

1. Select Form: Choose the specific WPForm you want to display from a dropdown list of your existing forms.

Style Customization

The Style tab allows you to control the appearance of your WPForm. You can style form fields, labels, and the submit button to match your website’s design.

Form Fields Section

1. Field Spacing: Adjust the spacing around the form fields.
2. Padding: Control the padding inside the form fields.
3. Border Radius: Customize the rounded corners of the form fields.
4. Typography: Set the font family, size, weight, and other typography options for the field text.
5. Field Text Color: Choose the color of the text inside the form fields.
6. Field Placeholder Color: Set the color of the placeholder text.
7. Normal State:
   • Border: Customize the border style, width, and color.
   • Box Shadow: Add a shadow effect to the form fields.
   • Background: Set the background color or gradient for the form fields.
8. Focus State:
   • Border: Customize the border style, width, and color when the field is focused.
   • Box Shadow: Add a shadow effect when the field is focused.
   • Background: Set the background color or gradient when the field is focused.

Form Labels Section

1. Margin: Adjust the margin around the labels.
2. Padding: Control the padding inside the labels.
3. Label Typography: Customize the font for the main labels.
4. Sub Label Typography: Customize the font for the sub labels.
5. Description Typography: Customize the font for the description text.
6. Colors:
   • Label Text Color: Choose the color of the main label text.
   • Required Label Color: Set the color of the required field indicator.
   • Sub Label Text Color: Choose the color of the sub label text.
   • Description Text Color: Choose the color of the description text.

Submit Button Section

1. Full Width Button: Make the submit button span the full width of its container.
2. Button Width: Set a custom width for the submit button.
3. Button Position: Align the button to the left, center, or right.
4. Margin: Adjust the margin around the submit button.
5. Padding: Control the padding inside the submit button.
6. Typography: Customize the font for the button text.
7. Border: Customize the border style, width, and color.
8. Border Radius: Customize the rounded corners of the button.
9. Box Shadow: Add a shadow effect to the button.
10. Normal State:
    • Text Color: Choose the color of the button text.
    • Background: Set the background color or gradient for the button.
11. Hover State:
    • Text Color: Choose the color of the button text on hover.
    • Background: Set the background color or gradient on hover.
    • Border Color: Set the border color on hover.

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. Form Not Displaying: Ensure that WPForms is installed and activated. Also, double-check that you have selected a form in the widget settings.
2. Styling Issues: Clear your browser cache and Elementor’s CSS cache to ensure the latest styles are applied.

Conclusion

The Sky Addons WP Forms widget offers a simple yet powerful way to integrate and style your WPForms within Elementor. With its extensive customization options, you can create forms that seamlessly blend with your website’s design.

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.