Sky Addons for Elementor

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

Gravity Forms

How to use Gravity Forms Widget of Sky Addons for Elementor

Sky Addons Gravity Forms Widget allows you to integrate and style Gravity Forms directly within Elementor. If you’re looking for essential addons for Elementor to enhance your Elementor website, this widget is a must-have. It’s perfect for creating advanced contact forms, surveys, and more, all while maintaining a consistent design across your site. Whether you’re building a landing page or a complex website, this widget simplifies advanced form integration.

Description

The Sky Addons Gravity Forms widget is designed to seamlessly integrate your Gravity Forms into your Elementor pages. This widget allows you to select any Gravity Form 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, section breaks, and lists, 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 complex forms, surveys, and various other types of data collection.

Key Features

  1. Seamless Integration: Easily embed Gravity Forms into Elementor pages.
  2. Extensive Styling Options: Customize form fields, labels, submit buttons, and more.
  3. AJAX Submission: Enable AJAX submission for a smoother user experience.
  4. Responsive Design: Ensure forms look great on all devices.
  5. User-Friendly Interface: Style forms directly within the Elementor editor.

Inserting Gravity Forms Widget

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

Content Section

  1. Form Selection: Choose the specific Gravity Form you want to display from a dropdown list of your existing forms.
  2. Display Form Title: Show or hide the form title.
  3. Enable AJAX Submission: Enable AJAX for smoother form submission.

Style Customization

The Style tab allows you to control the appearance of your Gravity Forms form. You can style form fields, labels, submit buttons, section breaks, and lists to match your website’s design.

Form Fields Section

  1. Field Width (Large): Adjust the width of large form fields.
  2. Field Spacing: Control the spacing between form fields.
  3. Field Padding: Customize the padding inside the form fields.
  4. Field Border Radius: Set the border radius for form fields.
  5. Field Typography: Customize the font for the field text.
  6. Field Text Color: Choose the color of the text inside the form fields.
  7. Placeholder Text 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 Fields Label Section

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

Submit Button Section

  1. Submit Button Full Width: Make the submit button span the full width of its container.
  2. Submit Button Width: Set a custom width for the submit button.
  3. Submit Button Position: Align the button to the left, center, or right.
  4. Submit Button Margin: Adjust the margin around the submit button.
  5. Submit Button 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.

Break Section

  1. Section Break Title Typography: Customize the font for the section break title.
  2. Section Break 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.
  5. Page Break Progress Bar Background: Customize the background of the progress bar.
  6. Page Break Button Padding: Customize the padding of the page break buttons.
  7. Page Break Button Box Shadow: Customize the box shadow of the page break buttons.
  8. Page Break Button Border: Customize the border of the page break buttons.
  9. Page Break Button Border Radius: Customize the border radius of the page break buttons.
  10. Page Break Button Typography: Customize the typography of the page break buttons.
  11. Normal State:
    • Text Color: Choose the color of the page break button text.
    • Background: Set the background color or gradient for the page break buttons.
  12. Hover State:
    • Text Color: Choose the color of the page break button text on hover.
    • Background: Set the background color or gradient on hover.
    • Border Color: Set the border color on hover.

List Section

  1. List Button Size: Adjust the size of the list buttons.
  2. List Background (Even): Customize the background of even list rows.
  3. List Background (Odd): Customize the background of odd list rows.

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 Gravity Forms 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. Plugin Conflict: Deactivate other plugins to check for conflicts.

Conclusion

The Sky Addons Gravity Forms widget offers a flexible way to integrate and style your Gravity 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 – Gravity Forms

How to use Gravity Forms Widget of Sky Addons for Elementor

Sky Addons Gravity Forms Widget allows you to integrate and style Gravity Forms directly within Elementor. If you’re looking for essential addons for Elementor to enhance your Elementor website, this widget is a must-have. It’s perfect for creating advanced contact forms, surveys, and more, all while maintaining a consistent design across your site. Whether you’re building a landing page or a complex website, this widget simplifies advanced form integration.

Description

The Sky Addons Gravity Forms widget is designed to seamlessly integrate your Gravity Forms into your Elementor pages. This widget allows you to select any Gravity Form 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, section breaks, and lists, 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 complex forms, surveys, and various other types of data collection.

Key Features

  1. Seamless Integration: Easily embed Gravity Forms into Elementor pages.
  2. Extensive Styling Options: Customize form fields, labels, submit buttons, and more.
  3. AJAX Submission: Enable AJAX submission for a smoother user experience.
  4. Responsive Design: Ensure forms look great on all devices.
  5. User-Friendly Interface: Style forms directly within the Elementor editor.

Inserting Gravity Forms Widget

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

Content Section

  1. Form Selection: Choose the specific Gravity Form you want to display from a dropdown list of your existing forms.
  2. Display Form Title: Show or hide the form title.
  3. Enable AJAX Submission: Enable AJAX for smoother form submission.

Style Customization

The Style tab allows you to control the appearance of your Gravity Forms form. You can style form fields, labels, submit buttons, section breaks, and lists to match your website’s design.

Form Fields Section

  1. Field Width (Large): Adjust the width of large form fields.
  2. Field Spacing: Control the spacing between form fields.
  3. Field Padding: Customize the padding inside the form fields.
  4. Field Border Radius: Set the border radius for form fields.
  5. Field Typography: Customize the font for the field text.
  6. Field Text Color: Choose the color of the text inside the form fields.
  7. Placeholder Text 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 Fields Label Section

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

Submit Button Section

  1. Submit Button Full Width: Make the submit button span the full width of its container.
  2. Submit Button Width: Set a custom width for the submit button.
  3. Submit Button Position: Align the button to the left, center, or right.
  4. Submit Button Margin: Adjust the margin around the submit button.
  5. Submit Button 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.

Break Section

  1. Section Break Title Typography: Customize the font for the section break title.
  2. Section Break 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.
  5. Page Break Progress Bar Background: Customize the background of the progress bar.
  6. Page Break Button Padding: Customize the padding of the page break buttons.
  7. Page Break Button Box Shadow: Customize the box shadow of the page break buttons.
  8. Page Break Button Border: Customize the border of the page break buttons.
  9. Page Break Button Border Radius: Customize the border radius of the page break buttons.
  10. Page Break Button Typography: Customize the typography of the page break buttons.
  11. Normal State:
    • Text Color: Choose the color of the page break button text.
    • Background: Set the background color or gradient for the page break buttons.
  12. Hover State:
    • Text Color: Choose the color of the page break button text on hover.
    • Background: Set the background color or gradient on hover.
    • Border Color: Set the border color on hover.

List Section

  1. List Button Size: Adjust the size of the list buttons.
  2. List Background (Even): Customize the background of even list rows.
  3. List Background (Odd): Customize the background of odd list rows.

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 Gravity Forms 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. Plugin Conflict: Deactivate other plugins to check for conflicts.

Conclusion

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