Total: $0
" - } - ] - } - ] -} -``` - ---- - -## π― Best Practices Demonstrated - -### β Form Design -- Keep forms under 10 fields when possible -- Use wizards for forms >6 fields -- Group related fields in panels -- Use clear, actionable button text -- Provide helpful placeholder text - -### β Validation -- Mark required fields clearly -- Provide instant feedback on errors -- Use appropriate input types (email, tel, number) -- Add custom validation messages -- Validate before allowing progression - -### β User Experience -- Show progress in wizards -- Allow users to go back and edit -- Persist data between pages -- Show clear success messages -- Handle errors gracefully - -### β Performance -- Lazy load forms with scripts -- Use CDN for Form.io library -- Minimize custom CSS -- Cache form schemas -- Optimize file upload sizes - ---- - -## π Related Documentation - -- **[Quick Reference](./FORMS_QUICK_REFERENCE.md)** - One-page cheat sheet -- **[Embedding Guide](./FORMS_EMBEDDING_GUIDE.md)** - How to embed forms with custom styling -- **[Headless Frontend](./FORMS_HEADLESS_FRONTEND.md)** - React, Astro, Angular, Vue examples -- **[API Reference](./FORMS_API.md)** - Programmatic form creation -- **[Wizard Forms](./FORMIO_WIZARD_FORMS.md)** - Multi-page forms guide -- **[Testing Guide](./FORMS_TESTING_SUITE.md)** - E2E, unit, and manual tests - ---- - -## π Need More Examples? - -**Can't find what you're looking for?** - -- π Check [Form.io Examples](https://formio.github.io/formio.js/app/examples/) for more Form.io features -- π¬ Join our Discord for help -- π Open a GitHub issue for documentation requests -- π§ Contact support@sonicjs.com - ---- - -**Last Updated:** January 2026 -**Version:** 1.0.0 diff --git a/docs/FORMS_HEADLESS_FRONTEND.md b/docs/FORMS_HEADLESS_FRONTEND.md deleted file mode 100644 index 8e5214427..000000000 --- a/docs/FORMS_HEADLESS_FRONTEND.md +++ /dev/null @@ -1,1018 +0,0 @@ -# Using SonicJS Forms in Headless Frontends - -**Complete guide for integrating SonicJS forms into any modern frontend framework: React, Astro, Angular, Vue, Svelte, Next.js, and more.** - ---- - -## π― Overview - -SonicJS forms are **fully headless-ready** with a JSON API that returns Form.io schemas. You can: - -β **Fetch form schemas** via REST API -β **Render forms** using Form.io React/Angular/Vue components -β **Submit data** back to SonicJS -β **Use any frontend framework** - React, Astro, Angular, Vue, Svelte, etc. -β **Full TypeScript support** - ---- - -## π‘ API Endpoints - -### Get Form Schema (JSON) - -**Endpoint:** `GET /forms/:identifier/schema` -**Auth:** No authentication required for public forms -**Identifier:** Form ID (UUID) or form name - -#### Response Format - -```json -{ - "id": "550e8400-e29b-41d4-a716-446655440000", - "name": "contact_form", - "displayName": "Contact Us", - "description": "Customer contact form", - "category": "customer_service", - "schema": { - "display": "form", - "components": [ - { - "type": "textfield", - "key": "name", - "label": "Full Name", - "validate": { "required": true } - }, - { - "type": "email", - "key": "email", - "label": "Email Address", - "validate": { "required": true } - } - ] - }, - "settings": { - "submitButtonText": "Send Message", - "successMessage": "Thank you for contacting us!", - "requireAuth": false - }, - "submitUrl": "/api/forms/550e8400-e29b-41d4-a716-446655440000/submit" -} -``` - -### Submit Form Data - -**Endpoint:** `POST /api/forms/:identifier/submit` -**Content-Type:** `application/json` -**Auth:** Optional (depends on form settings) - -#### Request Body - -```json -{ - "data": { - "name": "John Doe", - "email": "john@example.com", - "message": "Hello!" - } -} -``` - -#### Response - -```json -{ - "success": true, - "submissionId": "660e8400-e29b-41d4-a716-446655440001", - "message": "Form submitted successfully" -} -``` - ---- - -## βοΈ React Integration - -### Installation - -```bash -npm install @formio/react -``` - -### Basic React Component - -```tsx -// components/SonicForm.tsx -import { Form } from '@formio/react' -import { useState, useEffect } from 'react' - -interface SonicFormProps { - formName: string - apiUrl?: string -} - -export function SonicForm({ formName, apiUrl = 'http://localhost:8787' }: SonicFormProps) { - const [formSchema, setFormSchema] = useState{formSchema.description}
} - - -{formData.description}
} - - - -{{ formData.description }}
- -{{ formData.description }}
- -{formData.description}
- {/if} - - {#if !submitted} - - {:else} -Count: {count}
\\n \\nCount: {count}
\\n \\nCount: {count}
\\n \\n