Form Builder Widget
Last updated
Last updated
© Astroid Framework 2023.
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 consists of 4 main settings tabs:
General Settings
Design Settings
Responsive Settings
Menu Assignment
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.
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.
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.
Outline style: Enable this option if you want to outline the button.
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.
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.
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.
Add margin and padding values over the row to improve its appearance on different devices.
Here in the design settings, you can also add custom CSS to customize the design of the element.
Device Visibility: Choose your preference for hiding or showing the section on different screens like:
Hide on Extra Small Devices: Enable to hide the widget on mobile phones.
Hide on Small Devices: Enable to hide the widget on tablets.
Hide on Medium Devices: Enable to hide the widget on laptops.
Hide on Large Devices: Enable to hide the widget on desktops.
Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.
Menu Assignment is created to assign the widget to pages on your website. 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.
