Contact Form Info
A contact form paired with a sidebar showing phone, email, address, and map link details.
What It Does
The Contact Form Info module renders a two-column layout with a contact-information sidebar on one side and a configurable form on the other. The sidebar can include a phone number, email address, physical address, map link, and optional image. This module is designed for dedicated contact pages where visitors expect both a form and direct contact information in one place.
Best Used For
- Dedicated contact pages
- Office or store location pages
- Support request pages with direct contact details
- Any page where visitors need both a form and contact information
Variants
LeftRight
The standard two-column layout with contact information on the left and the form on the right. Both panels slide in from opposite directions on scroll.
Best for: Dedicated contact pages where you want to prominently display office details alongside the form
FullForm
Demonstrates the form with all field types populated and custom colours applied.
Best for: Testing the full layout with varied input types and colour customisation
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| formTitle | component | No | Heading displayed above the form |
| info | component | No | Contact information sidebar with phone, email, address, map link, and image |
| textColor | customField | No | Text colour for form labels and descriptions |
| backgroundColor | customField | No | Background colour for the form section |
| accentColor | customField | No | Accent colour for interactive elements and focus states |
| fields | component | Yes | List of form input fields with type, label, and validation |
| submitButton | component | No | Submit button with configurable label and style |
| submitButtonText | string | No | Legacy plain-text label for the submit button |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Always include at least a phone number or email address in the info sidebar so visitors have a fallback if they prefer not to use the form.
- Use the
accentColorto highlight links and decorative elements in the info panel — choose a colour that contrasts well withbackgroundColor. - Add a
mapLinkso visitors can navigate directly to your office from the contact details. - For a simpler form without the contact-info sidebar, use the Basic Form module instead.
Supported Languages
Fully bilingual — all text fields (title, field labels, button label, info sidebar text) support both English and Thai content.