WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Form

Widgets & Prefabs Library

  • Widgets Library
  • Widgets Composition

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Styles
  • Configuration
  • Field Configuration
  • Summary Row
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Forms Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Field Validations
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Grid Layout
  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Label
  • Anchor
  • Icon
  • Picture
  • Tree
  • Video
  • Audio
  • HTML
  • Iframe
  • Message
  • Spinner
  • Search
  • Search - Basic Usage
  • Richtext Editor
  • Progress Bar
  • Progress Circle

Charts

  • Chart Widgets
  • Callback Event

Navigation

    Nav

    • Nav Overview
    • Creating navigation

    Nav Bar

    • Nav Bar Overview

    Breadcrumb

    • Breadcrumb Overview
    • Creating a Breadcrumb

    Dropdown Menu

    • Dropdown Menu
    • Creating a Dropdown Menu

    Popover

    • Popover Overview
    • Creating a Popover

Advanced Widgets

  • Login
  • Marquee
  • Carousel

Dialog Widgets

  • Modal Windows/ Dialogs
  • Design Dialog
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Prefabs Overview
  • Create Prefab
  • Prefab with Partials
  • Use Cases - Prefabs
  • Prefabs Directory

    • Youtube
    • Googlemaps
    • QRCode
    • Barcode Scanner Prefab
    • Box Viewer Prefab
    • Entity Extraction Prefab
    • Docusign Prefab

    OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn
Edit

Forms Overview


A form consists of a group of input fields that connects to a datasource such as a table or a query. Using the Form widget, you can enter, edit, or display data from the data source. For example, a simple contact form, registration form, login form, and more.

Based on your datasource, you can create forms to contain text fields, email, date, dropdown, checkboxes, and more. Plus, you can add validations to the form fields to capture quality and accurate information from the users.

Additionally, build complex forms that contain multiple data widgets inside a single form, and form inside another form called repeated sections.

form

Forms Types

Use an appropriate type of form to work with different types of datasets. There are two types of forms in WaveMaker; they are Form and Live Form.

Form

Use Form widget to work with a service or procedure based flow. For this, you can use a service variable or CRUD variable through API calls like, REST API, SOAP, and more. You can configure fields to use an appropriate Form Widget. For example, text, number, dropdown, and more.

Live Form

Live Form works similar to a Form. However, Live Form is specific to database CRUD operations when you import a database from an external resource.

note

Form and Live Form are two different widgets that work similarly. Live Form is used for DB Services with CRUD operations only. For more information, see Live Forms.

How do Forms work

A form contains a group of input fields. Each field binds to the variable metadata that you can configure to the form-field settings. You can design the form to perform business operations and save it to the server.

Handling Form Submission Data

Firstly, to build a form, you should have a dataset. You can use APIs for REST services, java service, and database service. There are multiple ways to build and manage a datasource in WaveMaker.

You can instantly create a form without even having a dataset ready using a model variable. This helps you to plan and design your form structure. For more information, see Build a Form.

Layout and styling options

form layout selection

Dialog

You can display form as a dialog. This means the form displays a pop-up when an action occurs.

Inline

To display form inline with a page. This is the default option.

Align

Set the alignment of the form. You can choose from the left, center, right, and floating alignments.

Position

Set the position of the input field and label placement as shown in the image above: {label: field}, {field: label}, {label: field below}.

Layout Style

Select form layout styles. For example, display form fields in a single column, two columns, or three columns.

Configure Form Fields

Form field

  • By default, an appropriate Form Widget is assigned to each field. However, you can select a suitable Form Widget for a field.
  • Field input validation. For example, should the field be a required field, or should it contain a regex expression, or more custom field validations.

Form Actions

A typical form contains the following Form actions.

  • Reset form field data. For example, to clear entered data, or to start over.
  • Allow performing actions. For example, edit, save or submit data, and add a new record.
  • Cancel action for Live Form to clear entered-data.
Last updated on 1/5/2021 by Swetha Kundaram
← Use CasesCreating a Form →
  • Forms Types
    • Form
    • Live Form
  • How do Forms work
    • Handling Form Submission Data
    • Layout and styling options
    • Configure Form Fields
    • Form Actions
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.