Form Builder

How to use Form Builder Widget of Sky Addons for Elementor

Sky Addons Form Builder Widget is a powerful tool that allows you to create custom forms directly within the Elementor page builder. Forget about complex form plugins – this widget puts you in control of every aspect of your forms, from field types and validation to styling and submission. Perfect for contact forms, surveys, feedback collection, and more, the Form Builder widget seamlessly integrates with your Elementor website, providing a user-friendly and visually appealing way to gather information from your visitors. It’s an essential addon for anyone serious about building a professional and effective Elementor website.

Description:

The Sky Addons Form Builder widget is your all-in-one solution for creating stunning and functional forms within Elementor. What sets this widget apart is its ability to create any form layout you can imagine. Whether you’re building a simple contact form or a complex multi-field survey, this widget provides the flexibility and control you need. Design custom forms with a variety of field types, including text, email, number, textarea, select, radio buttons, and checkboxes. Take advantage of advanced options like required fields, placeholders, and custom validation to ensure data accuracy. Style every element of your form to match your brand, from labels and fields to submit buttons and success messages. The column width control allows you to create multi-column layouts, placing fields side-by-side for a more compact and user-friendly design. With its intuitive drag-and-drop interface and extensive customization options, the Form Builder widget empowers you to create engaging and effective forms that enhance user experience and drive conversions on your Elementor website. It’s a must-have element pack for any Elementor pro looking to elevate their website.

Key Features List:

1. Drag-and-Drop Interface: Easily add, arrange, and customize form fields with an intuitive drag-and-drop interface.
2. Variety of Field Types: Choose from a wide range of field types, including text, email, number, textarea, select, radio, checkbox, hidden, and disabled.
3. Customizable Field Options: Set labels, placeholders, default values, and required status for each field.
4. Column Width Control: Adjust the width of individual fields to create visually appealing and responsive layouts. Build complex layouts with fields side-by-side.
5. Advanced Validation: Ensure data accuracy with built-in validation for email, number, and required fields.
6. Extensive Styling Options: Customize the appearance of labels, fields, buttons, and messages to match your brand.
7. reCAPTCHA Integration: Protect your forms from spam with built-in reCAPTCHA support.
8. Email Submission: Configure email settings to receive form submissions directly in your inbox.
9. Success Message: Display a custom success message to users after they submit the form.
10. Reset After Submit: Clear all fields value after successful submission.

Insert Form Builder Widget

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

Form Fields Section

This section allows you to define the fields that will appear in your form.

• Field Type: Select the type of field you want to add (text, email, number, textarea, select, radio, checkbox, hidden, disabled).
• Label: Enter the label for the field. This is the text that will appear above the field.
• Field Name: Enter a unique name for the field. This name will be used to identify the field in the form submission data.
• Placeholder: Enter placeholder text that will appear inside the field.
• Options: For select, radio, and checkbox fields, enter the options for the field, each on a new line. Separate the label and value with a pipe character (“|”).
• Column Width: Set the width of the field as a percentage of the form width. This is key to building custom layouts.
• Rows: For textarea fields, set the number of rows for the field.
• Default Value: Set a default value for the field.
• Required: Mark the field as required.

Form Layout Section

This section controls the overall layout and settings of the form.

• Show Labels: Show or hide the labels for the form fields.
• Input Size: Set the size of the input fields (default, small, large).
• Alignment: Set the alignment of the form (left, center, right).
• Text Align: Set the text alignment of the form (left, center, right).
• Success Message: Enter the message that will be displayed after the form is successfully submitted.
• Email Subject: Enter the subject of the email that will be sent when the form is submitted.
• Reset After Submit?: Clear all fields value after successful submission.
• reCAPTCHA Enable: Enable or disable reCAPTCHA protection for the form.
• Hide reCAPTCHA Bagde: Hide or show reCAPTCHA badge.
• Email Receiver: Enter the email address where you want to receive form submissions.

Submit Button Section

This section customizes the appearance and behavior of the submit button.

• Column Width: Set the width of the submit button as a percentage of the form width.
• Text: Enter the text for the submit button.
• Full Width: Make the submit button full width.
• Alignment: Set the alignment of the submit button (left, center, right).
• Icon: Choose an icon to display on the submit button.
• Icon Position: Set the position of the icon (before or after the text).
• Icon Spacing: Set the spacing between the icon and the text.

Style Customization

The Form Style, Labels Style, Fields Style, Submit Button Style and Result Style sections allow you to customize the appearance of the form to match your website’s design.

Form Style Section

• Field Space: Set the spacing between the form fields.
• Column Space: Set the spacing between the form columns.

Labels Style Section

• Spacing: Set the spacing between the labels and the form fields.
• Text Color: Set the color of the labels.
• Required Color: Set the color of the required text.
• Typography: Set the typography of the labels.

Fields Style Section

• Text Color: Set the color of the text in the form fields.
• Placeholder Text Color: Set the color of the placeholder text in the form fields.
• Padding: Set the padding of the form fields.
• Typography: Set the typography of the form fields.
• Normal: Customize the normal state of the form fields.
  • Border: Set the border of the form fields.
  • Border Radius: Set the border radius of the form fields.
  • Box Shadow: Set the box shadow of the form fields.
  • Background Color: Set the background color of the form fields.
• Focus: Customize the focus state of the form fields.
  • Text Color: Set the color of the text in the form fields when focused.
  • Border: Set the border of the form fields when focused.
  • Border Radius: Set the border radius of the form fields when focused.
  • Background: Set the background color of the form fields when focused.

Submit Button Style Section

• Normal: Customize the normal state of the submit button.
  • Text Color: Set the color of the text in the submit button.
  • Background Color: Set the background color of the submit button.
  • Border: Set the border of the submit button.
  • Border Radius: Set the border radius of the submit button.
  • Padding: Set the padding of the submit button.
  • Typography: Set the typography of the submit button.
• Hover: Customize the hover state of the submit button.
  • Text Color: Set the color of the text in the submit button when hovered.
  • Background Color: Set the background color of the submit button when hovered.
  • Border Color: Set the border color of the submit button when hovered.
  • Animation: Choose a hover animation for the submit button.

Result Style Section

• Color: Set the color of the result message.
• Background Color: Set the background color of the result message.
• Border: Set the border of the result message.
• Border Radius: Set the border radius of the result message.
• Box Shadow: Set the box shadow of the result message.
• Typography: Set the typography of the result message.
• Padding: Set the padding of the result 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 Submitting: Check your email settings and make sure the email receiver address is correct. Also, ensure that reCAPTCHA is properly configured if enabled.
2. Styling Issues: Clear your browser cache and Elementor’s CSS cache to ensure the latest styles are being applied.

Conclusion

The Sky Addons Form Builder widget offers a flexible and intuitive way to create custom forms within Elementor. With its extensive features and styling options, you can easily build forms that match your brand and meet your specific needs. Whether you’re creating a simple contact form or a complex survey, this widget empowers you to gather valuable information from your website visitors.

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.