Form Builder

Forms allow website owners to collect information from visitors. Visitors enter this information into the form and submit it to the website owner. These submissions can either be sent to the website database or as an email.

There are many different styles of forms from simple ones embedded in a page to multi-step forms that change according to the information submitted by the user. You can even create animated forms to draw visitors' attention.

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Form Builder from the Widget panel, and then it'll be added to the layout section where you want to add the widget.

The Form Builder widget settings come with 4 different settings tabs:

General Settings
Design Settings
Responsive Settings
Menu Assignment

I. Form Builder - General Settings

1. General Options

2. Success & Error Message Options

In this section, you have full control over the success and error messages, allowing you to customize them as needed.

Form Submit Success Message: Craft your personalized success message for when a form is submitted successfully. This message will be showcased to users upon successful submission.
Form Submit Failed Message: Tailor the text for situations when a form submission fails. This customized message will only be visible when a form fails to submit correctly.

3. Redirect, Security & Policy Options

Enable Redirect: After a successful form submission, you can redirect users to a specific link by enabling this option.
Redirect URL: Enter the desired redirect link here.
Enable Captcha: Enhance security by enabling Captcha. Users must solve a Captcha puzzle before submitting the form. For Google reCAPTCHA, ensure the plugin is enabled in your backend and that site keys are correctly configured.
Captcha Type: Select the Captcha type that best suits your needs.

4. Button Options

The Button Settings comes with all the options necessary to create a fully customized button.

Styles: You can choose a desired button style from the given list.
Border radius: Choose your button shape from the list using this option.
Button Size: There are numerous options you can choose from to define your button size.
Button margin-top: Set an optimum distance above the button.

5. Form Options

In this part, Click the “+ Add” button to instantly add new form elements.

Choose Field Type: Select the desired field type for your form item.
Field Label: Enter the label for your form field.
Field Name: Assign a unique name to the field for data reference.
Field Placeholder: Provide optional placeholder text for the field.
Is Required Field: Indicate whether this field is mandatory for form submission.
Column large screen: Set the number of columns that the form displays on large devices.
Column medium screen: Set the number of columns that the form displays on medium devices.
Column small screen: Set the number of columns that the form displays on small devices (tablets).
Column x-small screen: Set the number of columns that the form displays on mobile phones.

II. Form Builder - Design Settings

Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".
Animation: Choose an animation for the widget.
Max Width: Set the Max Width for the widget.
Text Alignment: Set the alignment of the text of the widget.
Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.
Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

III. Form Builder - Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

Hide on Extra Small Devices
Hide on Small Devices
Hide on Medium Devices
Hide on Large Devices
Hide on Extra Large Devices

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

On all pages: the widget will be visible on all pages of your website
No pages: the widget will be invisible on all pages
Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.