Embed the Casework contact form on your council website so residents can report issues without leaving your site.
How it works
The widget loads as a single <script> tag. It creates a shadow DOM container for CSS isolation, fetches available wards and categories from your tenant, and renders a fully functional contact form.
Quick Start
Add this snippet to any HTML page:
That's it — the form will appear where the script tag is placed.
Configuration
Customise the widget using data-* attributes on the script tag:
Example with options
How it works
- The script determines the base URL from its own
srcattribute - It fetches
/api/public/wardsand/api/public/categoriesto populate dropdowns - On submit, it POSTs to
/api/public/contactwith the form data - On success, it displays the case reference number
CORS
The widget makes cross-origin requests back to your Casework tenant. CORS headers are configured automatically on the embed and public API routes.
Form Fields
| Field | Required | Notes |
|---|---|---|
| Name | Yes | Resident's full name |
| No | For case notifications | |
| Phone | No | Optional contact number |
| Postcode | No | Used for case tracking verification |
| Issue Description | Yes | Minimum 10 characters |
| Ward | No | Auto-populated from tenant data |
| Category | No | Auto-populated from tenant data |
Styling
The widget uses shadow DOM for complete CSS isolation. Your page styles won't affect the widget, and the widget won't affect your page. The data-primary-color attribute lets you match your brand colors.