ObjectUIObjectUI

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

Contact UsFill out the form below and we'll get back to you as soon as possible.

Settings Form

User settings panel with various input types.

Settings Form

SettingsManage your account settings and preferences.
ProfileUpdate your personal information
PreferencesCustomize your experience
Email NotificationsReceive email updates about your activity
Marketing EmailsReceive updates about new features and products

Newsletter Signup

Simple newsletter subscription form.

Newsletter Signup

Subscribe to our NewsletterGet the latest updates and exclusive content delivered to your inbox.
We respect your privacy. Unsubscribe at any time.

Payment Form

Payment details form with card information.

Payment Form

Payment DetailsEnter your payment information below
Billing Address

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

On this page