Forms
Bind form inputs, configure validation, and build repeatable sections using concrete Demo Projects HQ pages where possible.
Choose a Forms tour to start. The strongest examples here now use real Demo Projects HQ pages, especially the task add/edit forms, so you can see bindings and validation where an actual project already depends on them.
Start with the Projects HQ-backed tours, then branch into the more isolated component patterns.
Projects HQ-backed form flows
Form data sources on the task form
Use the Demo Projects HQ task form to see how App Connect and Server Connect data sources feed projects, contacts, and tag choices into real form controls.
Edit form state restoration
Use the Demo Projects HQ task edit form to see how existing record data restores text, select, date, and tag fields before the user starts editing.
Contact create and success handoff
Use the real contact add page to see how App Connect combines lookup data, submission state, and the success handoff into the new contact detail page.
Checkbox, autocomplete, and tags on edit forms
Use the Demo Projects HQ contact edit page to see how App Connect restores boolean, autocomplete, and tag-style controls before editing starts.
Contact delete confirmation and return handoff
Use the real contact edit page to see how App Connect keeps the destructive delete flow explicit with confirmation, request state, and a return-to-contacts handoff.
Files upload state and refresh
Use the Demo Projects HQ files page to see how App Connect form state, live data reloads, and repeated file listings stay in sync during uploads.
Tours
Form inputs & bindings
Use common form controls as live App Connect data sources in Wappler, and learn how bindings, events, and type conversion interact while users type, select, and toggle values.
Dynamic Select Menu
Build data-driven select menus that load the right options, keep selected values predictable, and stay readable as form complexity grows.
Form validation (Validator)
Client-side form validation: configure App Connect Validator and integrate with Bootstrap validation feedback and classes.
Form Repeat
Learn how Form Repeat structures nested form rows in Wappler so users can add, remove, reorder, and submit repeated data as one coherent request.
Check Multiple Checkboxes Dynamically
Keep checkbox groups in sync with data or page state without turning multi-select behavior into brittle manual wiring.
Related interaction patterns
Show or Hide Elements
Use conditional display in App Connect deliberately so the UI reacts to state without turning visibility logic into a maintenance problem.
Dynamic Attributes
Dynamic Attributes overview: use Properties ( + ) to add attributes, then inspect and bind values with picker icons and valid expressions.