Sky Addons for Elementor

⌘K
  2. Home
  4. Docs
  6. Sky Addons for Elementor
  8. Forms
  10. weForms

weForms

How to use weForms Widget of Sky Addons for Elementor

Sky Addons weForms Widget lets you embed and style your weForms directly within Elementor. If you’re looking for essential addons for Elementor to build an impressive Elementor website, this widget is a must-have. It’s perfect for creating contact forms, subscription forms, and more, all while maintaining a consistent design across your site. Whether you’re designing a landing page or a complex website, this widget simplifies form integration.

Description

The Sky Addons weForms widget is designed to seamlessly integrate your weForms forms into your Elementor pages. This widget allows you to select any weForm you’ve created and embed it directly into your Elementor layout. The real power comes from the styling options, allowing you to customize the appearance of your forms to match your website’s design perfectly. You can control the styles of form fields, labels, submit buttons, and even section breaks, all within the Elementor editor. This ensures a consistent and professional look for your website. If you’re using Elementor or Elementor Pro, this widget enhances your design capabilities. It’s ideal for creating contact forms, newsletters, and various other types of forms.

Key Features

  1. Seamless Integration: Easily embed weForms forms into Elementor pages.
  2. Extensive Styling Options: Customize form fields, labels, and submit buttons.
  3. Responsive Design: Ensure forms look great on all devices.
  4. User-Friendly Interface: Style forms directly within the Elementor editor.
  5. Section Break Styling: Customize the appearance of section breaks within your forms.

Inserting weForms Widget

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

Content Section

  1. Select Form: Choose the specific weForms form 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 weForms form. You can style form fields, labels, submit buttons, and section breaks to match your website’s design.

Form Fields Section

  1. Large Field Width: Adjust the width of large form fields.
  2. Field Spacing: Control the spacing between form fields.
  3. Padding: Customize the padding inside the form fields.
  4. Border Radius: Set the border radius for form fields.
  5. Typography: Customize the font for the field text.
  6. Field Text Color: Choose the color of the text inside the form fields.
  7. Field Placeholder Color: Set the color of the placeholder text.
  8. 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.
  9. 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 Field 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 labels.
  4. Help Text Typography: Customize the font for the help text.
  5. Label Text Color: Choose the color of the label text.
  6. Required Label Color: Set the color of the required field indicator.
  7. Help Text Color: Choose the color of the help 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. Text Shadow: Add a shadow effect to the button text.
  11. Normal State:
    • Text Color: Choose the color of the button text.
    • Background: Set the background color or gradient for the button.
  12. 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.

Section Break Section

  1. Title Typography: Customize the font for the section break title.
  2. Description Typography: Customize the font for the section break description.
  3. Title:
    • Color: Choose the color of the section break title.
  4. Description:
    • Color: Choose the color of the section break description.

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 weForms 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.
  3. Form Configuration: Make sure to configure your form settings in weForms before displaying it.

Conclusion

The Sky Addons weForms widget offers a flexible way to integrate and style your weForms forms 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.
“`Widget Name – weForms

How to use weForms Widget of Sky Addons for Elementor

Sky Addons weForms Widget lets you embed and style your weForms directly within Elementor. If you’re looking for essential addons for Elementor to build an impressive Elementor website, this widget is a must-have. It’s perfect for creating contact forms, subscription forms, and more, all while maintaining a consistent design across your site. Whether you’re designing a landing page or a complex website, this widget simplifies form integration.

Description

The Sky Addons weForms widget is designed to seamlessly integrate your weForms forms into your Elementor pages. This widget allows you to select any weForm you’ve created and embed it directly into your Elementor layout. The real power comes from the styling options, allowing you to customize the appearance of your forms to match your website’s design perfectly. You can control the styles of form fields, labels, submit buttons, and even section breaks, all within the Elementor editor. This ensures a consistent and professional look for your website. If you’re using Elementor or Elementor Pro, this widget enhances your design capabilities. It’s ideal for creating contact forms, newsletters, and various other types of forms.

Key Features

  1. Seamless Integration: Easily embed weForms forms into Elementor pages.
  2. Extensive Styling Options: Customize form fields, labels, and submit buttons.
  3. Responsive Design: Ensure forms look great on all devices.
  4. User-Friendly Interface: Style forms directly within the Elementor editor.
  5. Section Break Styling: Customize the appearance of section breaks within your forms.

Inserting weForms Widget

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

Content Section

  1. Select Form: Choose the specific weForms form 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 weForms form. You can style form fields, labels, submit buttons, and section breaks to match your website’s design.

Form Fields Section

  1. Large Field Width: Adjust the width of large form fields.
  2. Field Spacing: Control the spacing between form fields.
  3. Padding: Customize the padding inside the form fields.
  4. Border Radius: Set the border radius for form fields.
  5. Typography: Customize the font for the field text.
  6. Field Text Color: Choose the color of the text inside the form fields.
  7. Field Placeholder Color: Set the color of the placeholder text.
  8. 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.
  9. 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 Field 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 labels.
  4. Help Text Typography: Customize the font for the help text.
  5. Label Text Color: Choose the color of the label text.
  6. Required Label Color: Set the color of the required field indicator.
  7. Help Text Color: Choose the color of the help 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. Text Shadow: Add a shadow effect to the button text.
  11. Normal State:
    • Text Color: Choose the color of the button text.
    • Background: Set the background color or gradient for the button.
  12. 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.

Section Break Section

  1. Title Typography: Customize the font for the section break title.
  2. Description Typography: Customize the font for the section break description.
  3. Title:
    • Color: Choose the color of the section break title.
  4. Description:
    • Color: Choose the color of the section break description.

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 weForms 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.
  3. Form Configuration: Make sure to configure your form settings in weForms before displaying it.

Conclusion

The Sky Addons weForms widget offers a flexible way to integrate and style your weForms forms 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.

How can we help?

Leave a Reply