The Form widget is a user interface element for input fields, checkboxes, radio buttons, drop-down menus, and others. It allows website owners to gather and process user data, including contact details, comments, surveys, and registration forms. Lead generation forms, login forms, subscription forms, feedback forms, and order forms are a few examples of Fields that can be customized and used for different purposes.
Adding a Form Widget
To add the Form widget:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open the Widgets list on the left panel.
- Type the widget name in the search bar or find it in the Essentials grouping.
Drag and drop the Form widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Form Widget
Once you have added the Form widget, you can edit several properties according to your needs. The Property Panel includes Styles, Content, and Settings.
To configure the Form widget:
- Go to Styles to modify the widget styling features:
- Select one of the following states: Normal or Hover.
- Select one of the following modes: Normal or Error.
- Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
2. Go to Content and make the necessary configuration of widget content::
- Add and customize Fields of input and selection types.
- Inputs: Allow you to input and modify values directly and is used for providing text-based inputs, such as entering a numerical value, a text string, or configuring settings through input fields.
- Selections: Provide a set of predefined options from which you can choose and allows you to select one or more options from a list or drop-down menu.
Each Field comes from the design preset, where you can customize them, and each has its state. In case of having several presets, the added Field will inherit the default preset settings.
Besides having its specific settings and properties, every Field has a tooltip and can be set as required for the Form.
In the case of the File form, you can set the types of files (doc, image, audio, video) and set the maximum file size limit.
Note: The File form supports the following file types: DOC, DOCX, PDF, TXT, JPEG, PNG, TIF, WEBP, GIF, JPG, MP4, WEBM, OGG, MKV, MP3, and WAV.
3. Go to Settings to modify the settings of the widget:
- Form Name is a required component. You can create multiple forms in the project, so naming them makes it easier to filter the submitted data. This data is afterward displayed on the Dashboard and sent through email notifications.
- Email Notification allows you to determine whether notifications will be sent to project owners for form submission, and enables you to specify an email address where you want to receive notifications when someone submits the form.
- Message After Submission allows you to customize the settings of the confirmation message once the customer successfully submits the form (hide or reset the form). It also includes redirection to another page (Contact Us, Homepage, etc.).
- Limit Submissions allows you to set the maximum number of submissions that the form will accept from the same IP Address, limit the number of Submissions, and set Submission deadlines. When the limit is reached, the form will no longer accept new submissions.
- Visibility allows you to modify the visibility setting of the widget on your website. You can specifically select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).
Note: Once you create a Form, it becomes visible in the public mode, and when the customer submits it, you receive the customer data in the Dashboard > CRM > Form Submissions.
Once you are done with the Styles, Content, and Settings, you can create the UI Elements of the widget or choose from the existing options in the upper-right corner of the Property Panel.
💡 If you have questions or concerns, contact us directly via the Live Chat box, in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.