Formatic Documentation
Learn how to build, customize, and deploy forms with Formatic. This guide covers everything from your first form to advanced conditional logic and code export.
Sign Up & Access Your Dashboard
Create your Formatic account at formatic.dev. After signing up, you'll land on your dashboard where you can manage all your projects and forms. New users start with a 7-day Pro trial that automatically converts to the Free plan.
- Sign up with email or Google authentication
- Verify your email to activate your account
- Access the dashboard to see your projects at a glance
Create Your First Project
Projects help you organize related forms. From the dashboard, click 'Create Project' and give it a meaningful name like 'Marketing Forms' or 'Customer Support'. Each project can contain multiple forms.
- Click the 'Create Project' button on your dashboard
- Enter a project name and optional description
- Your project appears as a card—click it to open
Create Your First Form
Inside your project, click 'Create Form' to open the form builder. You can rename your form at any time by clicking the title at the top of the builder. Each form has its own settings, fields, and submission endpoint.
- Click 'Create Form' inside any project
- The form builder opens with a blank canvas
- Rename your form by clicking the pencil icon next to the title
Understanding the Builder Layout
The form builder has three main areas: the Field Library on the left (all available field types), the Form Canvas in the center (where you build your form), and the Properties Panel on the right (for configuring selected fields).
- Field Library: Contains all draggable field types
- Form Canvas: Your visual workspace for building
- Properties Panel: Shows settings for the selected field
Adding Fields to Your Form
Drag fields from the Field Library onto your Form Canvas. Available field types include text inputs, email, password, number, dropdown, radio buttons, checkboxes, date pickers, text areas, and buttons. You can also add layout components like two-column and three-column grids.
- Drag any field type from the left sidebar
- Drop it onto the canvas where you want it
- Reorder fields by dragging them to new positions
- Use layout components to create multi-column forms
Configuring Field Properties
Click any field on the canvas to reveal its properties. The Properties Panel lets you customize the label, placeholder text, helper text, default values, and appearance settings. You can also mark fields as required, hidden, disabled, or read-only.
- General: Label, placeholder, helper text, default value
- Appearance: Field size, full width toggle
- Behavior: Hidden, disabled, read-only states
- Validation: Required, min/max length, patterns, custom messages
Conditional Logic (WHEN/THEN Rules)
Access the Advanced Logic Manager from the top toolbar to create WHEN/THEN rules. These rules let you show, hide, enable, disable, or make fields read-only based on other field values. For example, show a 'Discount Code' field only when 'Attendee Type' equals 'Student'.
- Open Advanced Logic Manager from the toolbar
- Create rules with conditions (WHEN) and actions (THEN)
- Conditions: equals, not equals, contains, is empty, etc.
- Actions: show, hide, enable, disable, set read-only
- Combine conditions with AND/OR logic (Pro tier)
Conditional Validation
Apply validation rules only when certain conditions are met. For example, make a discount code field required only when the attendee type is 'Student', or enforce a minimum value only when a checkbox is selected. This is a Pro tier feature.
- Set up validation rules that activate conditionally
- Use the same condition builder as behavioral logic
- Combine with regular validation for complex scenarios
- Natural-language rule previews help you understand the logic
Choose Export Options
Click the 'Export' button in the form builder toolbar. You'll see options for framework (React, Next.js, or Vanilla JS/HTML), TypeScript support, validation library (Yup, Zod, or none), API client (Axios, Fetch, or none), and styling (Tailwind or Bootstrap).
- Framework: React, Next.js, or plain HTML/CSS/JS
- TypeScript: Generate typed components and schemas
- Validation: Include Yup or Zod schema generation
- API Client: Axios or Fetch for form submission
- Styling: Tailwind CSS or Bootstrap classes
Preview and Download
After selecting your options, Formatic generates a preview showing the project structure and README instructions. Review the file tree to see what you'll receive, then click 'Download Project' to get a ZIP file with your complete, runnable form project.
- Preview shows file structure before download
- README includes setup and run instructions
- Validation schemas are auto-generated from your rules
- The exported code is clean and ready to commit
Viewing Submissions
Each form has a 'Submissions' tab where you can view all collected data in a table format. Submissions are timestamped and paginated for easy navigation. You can search, filter, and export submission data as CSV or JSON.
- Access submissions from the form's detail page
- Data is displayed in rows with field columns
- Each entry shows submission timestamp
- Export to CSV or JSON for external processing
Hosted Forms
Formatic can host your forms with a single click. When you publish a form, you get a unique URL and a secure submission endpoint. Users can fill out the form directly on Formatic, and submissions are stored automatically—no backend setup required.
- Click 'Publish' to host your form on Formatic
- Get a shareable link for your hosted form
- Submissions are stored securely in your account
- Embed the form in your site with the provided snippet
Submission Tokens
Each form has a unique submission token for API authentication. When submitting forms programmatically or from exported code, include this token in the request header. This ensures only authorized sources can submit data to your form.
- Find your token in Form Settings > Submission
- Include token as 'X-Form-Token' header in requests
- Regenerate tokens if compromised
- Tokens are required for all API submissions
Origin Validation
Protect your forms from unauthorized submissions by restricting which domains can submit. Add allowed origins in your form settings—Formatic will reject submissions from domains not on the list. You can use wildcards for subdomains.
- Whitelist specific domains (e.g., yoursite.com)
- Use wildcards for subdomains (*.yoursite.com)
- Submissions from unlisted origins are rejected
- Combine with honeypot detection for spam protection
Anti-Spam Protection
Formatic includes built-in honeypot fields that are invisible to real users but trigger spam bots. This provides protection against automated form submissions without requiring users to solve CAPTCHAs.
- Honeypot fields are automatically included
- Invisible to human users, visible to bots
- Submissions with honeypot data are flagged/rejected
- No user friction—no CAPTCHAs required
Need More Help?
Can't find what you're looking for? Our support team is here to help you succeed with Formatic.