Sky Addons for Elementor

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

Ninja Forms

How to use Ninja Forms Widget of Sky Addons for Elementor

Sky Addons Ninja Forms Widget allows you to integrate and style Ninja Forms directly within Elementor. If you’re looking for essential addons for Elementor to enhance your Elementor website, this widget is a great choice. It’s perfect for creating contact forms, feedback forms, 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 form integration.

Description

The Sky Addons Ninja Forms widget is designed to seamlessly integrate your Ninja Forms into your Elementor pages. This widget allows you to select any Ninja 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 input fields, labels, and submit buttons, 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, surveys, and various other types of forms.

Key Features

  1. Seamless Integration: Easily embed Ninja Forms into Elementor pages.
  2. Extensive Styling Options: Customize input 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. Description Text Styling: Customize the appearance of description text within your forms.

Inserting Ninja Forms Widget

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

Content Section

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

Input Fields Section

  1. Field Spacing: Control the spacing between form fields.
  2. Padding: Customize the padding inside the input fields.
  3. Field Height: Set a specific height for the input fields.
  4. Border Radius: Set the border radius for input fields.
  5. Typography: Customize the font for the field text.
  6. Text Color: Choose the color of the text inside the input fields.
  7. 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 input fields.
    • Background: Set the background color or gradient for the input 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.

Field Labels Section

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

Submit Button Section

  1. Button Position: Align the button to the left, center, or right.
  2. Margin: Adjust the margin around the submit button.
  3. Padding: Control the padding inside the submit button.
  4. Typography: Customize the font for the button text.
  5. Border: Customize the border style, width, and color.
  6. Border Radius: Customize the rounded corners of the button.
  7. Box Shadow: Add a shadow effect to the button.
  8. Normal State:
    • Text Color: Choose the color of the button text.
    • Background: Set the background color or gradient for the button.
  9. 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 Ninja 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 Ninja Forms widget offers a flexible way to integrate and style your Ninja 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 – Ninja Forms

How to use Ninja Forms Widget of Sky Addons for Elementor

Sky Addons Ninja Forms Widget allows you to integrate and style Ninja Forms directly within Elementor. If you’re looking for essential addons for Elementor to enhance your Elementor website, this widget is a great choice. It’s perfect for creating contact forms, feedback forms, 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 form integration.

Description

The Sky Addons Ninja Forms widget is designed to seamlessly integrate your Ninja Forms into your Elementor pages. This widget allows you to select any Ninja 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 input fields, labels, and submit buttons, 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, surveys, and various other types of forms.

Key Features

  1. Seamless Integration: Easily embed Ninja Forms into Elementor pages.
  2. Extensive Styling Options: Customize input 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. Description Text Styling: Customize the appearance of description text within your forms.

Inserting Ninja Forms Widget

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

Content Section

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

Input Fields Section

  1. Field Spacing: Control the spacing between form fields.
  2. Padding: Customize the padding inside the input fields.
  3. Field Height: Set a specific height for the input fields.
  4. Border Radius: Set the border radius for input fields.
  5. Typography: Customize the font for the field text.
  6. Text Color: Choose the color of the text inside the input fields.
  7. 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 input fields.
    • Background: Set the background color or gradient for the input 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.

Field Labels Section

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

Submit Button Section

  1. Button Position: Align the button to the left, center, or right.
  2. Margin: Adjust the margin around the submit button.
  3. Padding: Control the padding inside the submit button.
  4. Typography: Customize the font for the button text.
  5. Border: Customize the border style, width, and color.
  6. Border Radius: Customize the rounded corners of the button.
  7. Box Shadow: Add a shadow effect to the button.
  8. Normal State:
    • Text Color: Choose the color of the button text.
    • Background: Set the background color or gradient for the button.
  9. 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 Ninja 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 Ninja Forms widget offers a flexible way to integrate and style your Ninja 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