Contact Form
A configurable contact form with dynamic questions, validation, and layout variants.
Contact Form
A configurable contact form with dynamic questions, validation, and two layout variants. The form fetches its questions from the CMS and submits responses through the platform's contact API.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Contact" > "Contact Form"
- Choose a variant, fill in the contact info, and set the submit button text
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| variant | Enum | No | Layout style: simple or left-right. Defaults to left-right. |
| info | Component (Contact Info) | Yes | The contact details displayed alongside the form — see sub-fields below. |
| formTitle | Component (Title) | No | Heading displayed above or beside the form fields |
| textColor | Color | No | Colour for body text and form labels |
| backgroundColor | Color | No | Background colour of the entire section |
| accentColor | Color | No | Highlight colour for links and key text (left-right variant only) |
| submitButtonText | String | Yes | Label text for the submit button (e.g. "Send Message") |
| entranceAnimation | Component | No | Scroll-triggered entrance animation (fade, slide-up, slide-left, slide-right, none) |
Contact Info Sub-fields
| Field | Description |
|---|---|
| phone | Phone number displayed with a tel: link |
| Email address displayed with a mailto: link | |
| address | Physical address text (supports line breaks) |
| mapLink | URL for a Google Maps or similar directions link |
| title | Optional heading above the contact details |
| description | Supporting text below the contact details |
| image | Optional image (e.g. office photo) in the left-right variant |
Variants
Simple
A compact rounded-card layout. The form title and contact details appear on the left; the form fields appear on the right. The card fades up into view when it enters the viewport.
Best for: Minimalist pages where the form should feel lightweight and embedded.
Left-Right
A full-width layout with contact information (address, phone, email, map link) occupying the left half and a tab-shaped form card on the right. Both sides slide in from opposite directions.
Best for: Dedicated contact pages where you want to prominently display office details alongside the form.
Tips
- Use a clear, action-oriented submit button label such as "Send Message" or "Get in Touch".
- The
accentColorin the left-right variant highlights links and decorative elements — choose a colour that contrasts well withbackgroundColor. - For the left-right variant, always include a
mapLinkso visitors can navigate to your office. - Test the form on mobile — the simple variant stacks vertically and is ideal for narrow screens.