kitconcept / volto-form-builder

An interactive form builder for Volto, that allows editors to assemble forms via drag and drop.

4 stars 5 forks source link

readme

volto-form-builder

kitconcept GmbH

Volto Form Builder

An interactive form builder for Volto, that allows editors to assemble forms via drag and drop.

Roadmap

MVP

[x] As editor, I can add a form
[x] As editor, I can add a single-line text field to a form
[x] As editor, I can add a multi-line text field to a form
[x] As editor, I can add an email field to a form
[x] As editor, I can add a send-email action to a form
[x] As anonymous user, I can see and submit a form

Additional Fields

[ ] As editor, I can add a hidden text field to a form
[ ] As editor, I can add a boolean field to a form
[ ] As editor, I can add a checkbox field to a form
[ ] As editor, I can add a select field to a form
[ ] As editor, I can add an integer field to a form
[ ] As editor, I can add an file field to a form
[ ] As editor, I can add an image field to a form
[ ] As editor, I can add a RichText field to a form

Misc

[ ] As editor, I can mark a form field as required
[ ] As editor, I can add plain text to a form
[ ] As editor, I can edit the text and links of the submit/cancel buttons of a form
[ ] As editor, I can add a regexp validation to a form field Form Actions

CSV Data

[ ] As editor, I can store submitted form data as CSV

UX/UI Guidelines

Features

1. Input block

Input block

2. Textarea block

Textarea block

3. Select block

Select block

4. Email block

Email block

5. Checkbox block

Checkbox block

6. Adding Error Message

Adding Error Message

7. Adding Placeholder

UX Principles

Use vertical form layout (add reference here...)

Books

Web Form Design: Filling in the Blanks (https://www.lukew.com/resources/web_form_design.asp)
Form Design Patterns (https://www.smashingmagazine.com/printed-books/form-design-patterns/)

Accessibility