Form Blocks
Contact forms, settings panels, and form layouts
Form Blocks
Professional form layouts for various use cases. All forms are accessible and include proper validation.
Contact Form
Simple contact form with name, email, and message fields.
Contact Form
Settings Form
User settings panel with various input types.
Settings Form
Newsletter Signup
Simple newsletter subscription form.
Newsletter Signup
Payment Form
Payment details form with card information.
Payment Form
Usage
Customize form blocks for your application:
Add Validation
{
"type": "input",
"name": "email",
"inputType": "email",
"required": true,
"validation": {
"pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$",
"message": "Please enter a valid email address"
}
}Add Submit Action
{
"type": "button",
"label": "Submit",
"action": {
"type": "submit",
"endpoint": "/api/contact",
"method": "POST"
}
}Customize Layout
{
"type": "div",
"className": "grid grid-cols-1 md:grid-cols-2 gap-6"
}Next Steps
- Browse Marketing Blocks
- Explore E-commerce Blocks
- Learn about Form Validation