Quick Overview

Introduction

Forms are where user input, validation, and submission logic meet, so it helps to start with a clear map. This quick overview points out the main building blocks in Wappler, shows how the pieces connect, and prepares you for the focused tours on layout, validation, and repeatable sections.

Forms are built from components (Form, inputs, buttons, validators).

You can validate input in the browser and on the server.

Server Actions process submissions securely (DB, email, files).

Creating a Form

Add a form to your page from the Components picker. You can use predefined form templates or build your own from scratch.

Insert a Form component on the page.

Add input fields and a submit button.

Bind values and add validation rules.

Form Elements

Add form elements like text inputs, textareas, selects, checkboxes, radio buttons, and file uploads. All styled with Bootstrap.

Use labels/placeholders for clarity.

Group fields with layout components (rows/columns).

Use input types that match your data (email, number, date).

Form Validation

Add the Form Validator component to validate user input both client-side and server-side. Set rules for required fields, email formats, and more.

Client-side validation improves UX with instant feedback.

Server-side validation protects your backend.

Show clear messages so users can fix issues quickly.

Next steps

Connect your form to a Server Action to process the data.

Use Server Actions to handle submissions securely.

Store data in a database or send emails.

Revisit the Forms hub for focused how-tos.