Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Forms
  8. 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.

Form Container Section

Style the wrapper around the entire form to make it stand out from the rest of your page.

  1. Padding: Control the inner spacing of the form container.
  2. Margin: Adjust the outer spacing around the form container.
  3. Background: Set a background color or gradient for the container.
  4. Border: Customize the border style, width, and color of the container.
  5. Border Radius: Round the corners of the form container.
  6. Box Shadow: Add a shadow effect around the container.

Validation Error Section

Customize how invalid fields and their error messages appear when a visitor submits incomplete or incorrect data.

  1. Border: Customize the border of input fields that fail validation.
  2. Error Text Color: Set the text color inside fields in the error state.
  3. Background: Set the background color or gradient of fields in the error state.
  4. Error Message Typography: Customize the font of the validation error message.
  5. Error Message Color: Choose the color of the validation error message text.
  6. Error Message Padding: Control the spacing around the error message.

Success Message Section

Style the confirmation message that appears after a form is submitted successfully.

  1. Padding: Control the inner spacing of the success message.
  2. Margin: Adjust the outer spacing around the success message.
  3. Typography: Customize the font of the success message.
  4. Text Color: Choose the color of the success message text.
  5. Background: Set a background color or gradient for the success message.
  6. Border: Customize the border style, width, and color of the success message.
  7. Border Radius: Round the corners of the success message.

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.

Form Container Section

Style the wrapper around the entire form to make it stand out from the rest of your page.

  1. Padding: Control the inner spacing of the form container.
  2. Margin: Adjust the outer spacing around the form container.
  3. Background: Set a background color or gradient for the container.
  4. Border: Customize the border style, width, and color of the container.
  5. Border Radius: Round the corners of the form container.
  6. Box Shadow: Add a shadow effect around the container.

Validation Error Section

Customize how invalid fields and their error messages appear when a visitor submits incomplete or incorrect data.

  1. Border: Customize the border of input fields that fail validation.
  2. Error Text Color: Set the text color inside fields in the error state.
  3. Background: Set the background color or gradient of fields in the error state.
  4. Error Message Typography: Customize the font of the validation error message.
  5. Error Message Color: Choose the color of the validation error message text.
  6. Error Message Padding: Control the spacing around the error message.

Success Message Section

Style the confirmation message that appears after a form is submitted successfully.

  1. Padding: Control the inner spacing of the success message.
  2. Margin: Adjust the outer spacing around the success message.
  3. Typography: Customize the font of the success message.
  4. Text Color: Choose the color of the success message text.
  5. Background: Set a background color or gradient for the success message.
  6. Border: Customize the border style, width, and color of the success message.
  7. Border Radius: Round the corners of the success message.

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?