Astroid Framework
HomeDownloadReport an IssueVideo Tutorials
German
German
  • Was ist Astroid
  • Get Started
    • Introduction
    • Technical Requirements
    • Installation
    • Layout Manager for Dummies
    • Creating a basic Astroid Template
  • Basic Settings
    • Preloader
    • Favicon
    • Back to Top
    • Wide Vs Box Layout
    • Smooth Scroll
    • Color Mode
    • Container Background Mode
    • Bootstrap Settings
  • Header
    • Header
      • Transparent Header
      • Site Menu Method
    • Logo Options
    • Sticky Header
    • Off-Canvas menu
      • Customize the Offcanvas icons
    • Animation
  • Color
    • Body Color
    • Header Color
    • Sticky Header Color
    • Main Menu Color
    • Dropdown Menu Color
    • Off-Canvas Colors
  • Layout Settings
    • Section Settings
    • Row Settings
    • Element Settings
    • Column Settings
    • Layout Configuration on devices
    • Sub Layouts
  • Astroid Widgets
    • Divider Widget
    • Navigation Widget
    • Icons Widget
    • Button Widget
    • Heading Widget
    • Text Widget
    • Image Widget
    • Slideshow Widget
    • Image Group Widget
    • Testimonials Widget
    • Articles Widget
    • Accordion Widget
    • Grid Widget
    • Form Builder Widget
    • Map Widget
    • List Widget
    • Video Widget
    • Video Button Widget
    • Image Carousel
    • Countdown
    • Raw HTML Widget
    • Module Position
  • Astroid Widgets Pro
    • CodePen Widget
    • Hover Motion Gallery
    • Article Listing
    • Listing Pro
  • Typography
    • Custom Typography
    • Body Typography
    • Menu Typography
    • H1-H6 Typography
    • Drop Down Menu Typography
    • How to use local font
  • Article Blog
    • Article Layout Builder
    • Article Listing Options
    • Single Article Options
    • Blog Options for Single Article view
    • Blog Options for Articles List View
    • Open Graph
    • Custom type comment for Blogs/Articles
  • Social Profile
    • Social Profile
  • Custom Code
    • Tracking Code
    • Before </head>
    • Before </body>
    • Custom Css
    • Custom JS
  • Miscellaneous
    • Lazy Load Images
    • Coming Soon
    • Error Page
    • Copyright
    • Contact Information
    • Minify JS/CSS/HTML
  • Theming
    • Theming
  • Menu Item Settings
    • Blog Options
    • Banner Options
    • Open Graph Options
    • How to manage the Blog Options for Articles List View
  • Mega Menu
    • Mega Menu
  • MORE
    • Preset Profiles
    • Astroid Layout Module
    • Astroid Captcha
  • Developers
    • Get Started
    • Build or Override a Widget
Powered by GitBook

© Astroid Framework 2025.

On this page
  • How to add a Form Builder widget
  • I. Form Builder - General Settings
  • II. Form Builder - Design Settings
  • III. Form Builder - Responsive Settings
  • IV. Widget's Menu Assignment

Was this helpful?

Export as PDF
  1. Astroid Widgets

Form Builder Widget

PreviousGrid WidgetNextMap Widget

Was this helpful?

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.

How to add a Form Builder widget

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

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.

  • 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.

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.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

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: 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.

IV. Widget's Menu Assignment

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.

Form Builder
Select the wiget from the panel.
General settings.
Success and error messages options
Redirect, Security & policy options
Button options
Form options
Design setting
Spacing options
Element's custom css.
Configure responsive settings
Menu assignment
Assign the widget to specific pages