Wappler documentation

Forms and validation

Build forms, validate inputs, submit data and handle success or errors.

Choose a Forms guide to start. These guides now lean on real Demo Projects HQ pages such as `task_add.ejs`, `task_edit.ejs`, `login.ejs`, and `files.ejs` so the patterns stay tied to concrete fields, buttons, and feedback states instead of floating as generic advice.

Start here

Quick OverviewGet a quick overview of Forms: what it is, where to find it, and how it fits in your workflow.View guide ValidationValidate forms with good UX: required fields, feedback states, and clear error messages for users.View guide Creating Multi Steps FormsGot a long form on your website? Break it up into smaller logical sections and convert it into a multi-step form easily. In this tutorial we will show you a very basic form, but you can extend it as pView guide Building Multi-Column FormsYou can easily build multi-column form layout with Wappler, using the built-in Bootstrap 4 form tools. First, let’s insert the form. We add the form inside a Bootstrap 4 column. Click the Add Inside bView guide

Field patterns

Text, email, and contact fieldsUse the Demo Projects HQ client form to choose plain text-style fields that match names, email addresses, phone numbers, and short supporting details.View guide Select fields and relationshipsUse the Demo Projects HQ task form to separate simple status choices from relationship fields that point at live project and contact records.View guide Numbers, dates, and richer inputsUse the Demo Projects HQ task form to see where number fields, scheduling inputs, and richer widgets each belong in a practical form.View guide

Submission flow

Form to Server Action handoffUse the Demo Projects HQ task form to connect page fields, the Server Connect form action, and the success/error states that come back after submit.View guide Login redirects and error statesUse the Demo Projects HQ login form to see how one submit flow can redirect on success, stay put on failure, and still keep the user oriented.View guide Disable a submit button and show a spinnerA complete pending-state pattern using the form’s executing state.View guide Confirm a form submission with a Page FlowA confirmation dialog that submits only from its confirm branch and cancels without sending a request.View guide Delete with ConfirmationDesign destructive actions so users understand the consequence, confirm deliberately, and still get clear feedback after the delete runs.View guide Check if a Database Record Already Exists Before Inserting a New EntryCheck the data in your Database before inserting possible duplicate data Using server-side data validation from server connect you can check if a record already exists in the database. This is useful View guide Using Google reCAPTCHA to Protect FormsIntro Google reCAPTCHA helps you protect your forms from spam and automated submissions. In Wappler, it works with two parts: Client-side – adds the reCAPTCHA element to your form. Server-side – checkView guide