Contact `"type": "contact"`

Contact details and opening hours on the left, a contact form on the right, and an optional Google map underneath.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "contact",
  "eyebrow": "Get in touch",
  "title": "We reply within a day",
  "info": [
    {
      "icon": "geo-alt",
      "title": "Visit us",
      "text": "48 Harbour Street, Portland, OR 97209"
    },
    {
      "icon": "telephone",
      "title": "Call us",
      "text": "<a href=\"tel:+15550142200\">+1 (555) 014-2200</a>"
    },
    {
      "icon": "envelope",
      "title": "Email us",
      "text": "<a href=\"mailto:hello@example.com\">hello@example.com</a>"
    }
  ],
  "hours": [
    {
      "day": "Mon – Fri",
      "time": "9:00 – 18:00"
    },
    {
      "day": "Saturday",
      "time": "10:00 – 14:00"
    },
    {
      "day": "Sunday",
      "time": "Closed"
    }
  ],
  "fields": [
    {
      "label": "Name",
      "name": "name",
      "col": 6,
      "required": true
    },
    {
      "label": "Email",
      "name": "email",
      "type": "email",
      "col": 6,
      "required": true
    },
    {
      "label": "Topic",
      "name": "topic",
      "type": "select",
      "options": [
        "New project",
        "Support",
        "Careers",
        "Something else"
      ]
    },
    {
      "label": "Message",
      "name": "message",
      "type": "textarea",
      "rows": 5,
      "required": true
    }
  ],
  "button": "Send message",
  "map": "48 Harbour Street, Portland, OR"
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	—	Section heading. Simple inline HTML such as <em> or <br> is allowed.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it. Values: `center \| start`
`info`	array	`address, phone and email from site.json`	Contact detail rows.
`hours`	array	—	Opening hours table under the details.
`fields`	array	`Name, Email, Subject, Message`	Form fields.
`button`	string	`Send message`	Submit button text.
`map`	string	—	Address or place name. Adds an embedded Google map below the form.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `info`#

Option	Type	Default	Description
`icon`	string	—	Bootstrap Icons name, e.g. "geo-alt".
`title`	string	—	Small heading.
`text`	string	—	The detail; inline HTML such as <br> or <a> is allowed.

Fields of each entry in `hours`#

Option	Type	Default	Description
`day`	string	—	Day or range, e.g. "Mon – Fri".
`time`	string	—	Hours, e.g. "9:00 – 18:00" or "Closed".

Fields of each entry in `fields`#

Option	Type	Default	Description
`label`	string	—	Label shown above the field.
`name`	string	—	Field name sent with the form (e.g. "email").
`type`	string	`text`	Field type. Any HTML input type works as well. Values: `text \| email \| tel \| date \| number \| password \| select \| textarea`
`options`	array	—	For type "select": the list of choices (strings).
`placeholder`	string	—	Grey hint text inside the field (not used by select).
`required`	boolean	`false`	Makes the field required.
`col`	number	`full width`	Set to 6 for a half-width field (two side by side). Anything else is full width.
`rows`	number	`4`	For type "textarea": number of visible lines.

Tips#

Leave "info" out to show the address, phone and email from site.json automatically.
Until formAction in site.json is set to a real endpoint (e.g. Formspree), the form only shows a thank-you message.
The map needs an internet connection; it uses Google Maps without an API key.

Editing it in the HTML files#

The form is form.form-o. Its action comes from formAction in site.json; set it once there rather than in each page. The map is an iframe in .contact-map.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/contact.html (source src/demos/creative-agency/pages/contact.json)
Real Estate: template/real-estate/contact.html (source src/demos/real-estate/pages/contact.json)
Corporate: template/corporate/contact.html (source src/demos/corporate/pages/contact.json)
Finance: template/finance/contact.html (source src/demos/finance/pages/contact.json)
Law Firm: template/law-firm/contact.html (source src/demos/law-firm/pages/contact.json)
Mobile App: template/mobile-app/contact.html (source src/demos/mobile-app/pages/contact.json)
Online Academy: template/education/contact.html (source src/demos/education/pages/contact.json)
Restaurant: template/restaurant/contact.html (source src/demos/restaurant/pages/contact.json)
Coffee Shop: template/cafe/contact.html (source src/demos/cafe/pages/contact.json)
Hotel & Resort: template/hotel/contact.html (source src/demos/hotel/pages/contact.json)
Wedding: template/wedding/contact.html (source src/demos/wedding/pages/contact.json)
Gym & Fitness: template/gym/contact.html (source src/demos/gym/pages/contact.json)
Yoga Studio: template/yoga/contact.html (source src/demos/yoga/pages/contact.json)
Day Spa & Salon: template/spa/contact.html (source src/demos/spa/pages/contact.json)
Medical Clinic: template/medical/contact.html (source src/demos/medical/pages/contact.json)
Dental Clinic: template/dental/contact.html (source src/demos/dental/pages/contact.json)
Pet Care: template/pet-care/contact.html (source src/demos/pet-care/pages/contact.json)
Construction: template/construction/contact.html (source src/demos/construction/pages/contact.json)
Car Dealer: template/car-dealer/contact.html (source src/demos/car-dealer/pages/contact.json)
Travel Agency: template/travel/contact.html (source src/demos/travel/pages/contact.json)
Photographer: template/photography/contact.html (source src/demos/photography/pages/contact.json)
Architecture Studio: template/architecture/contact.html (source src/demos/architecture/pages/contact.json)
Interior Design: template/interior-design/contact.html (source src/demos/interior-design/pages/contact.json)
Portfolio: template/portfolio/contact.html (source src/demos/portfolio/pages/contact.json)
Music Festival: template/music-festival/contact.html (source src/demos/music-festival/pages/contact.json)
Fashion Store: template/fashion-store/contact.html (source src/demos/fashion-store/pages/contact.json)
Charity: template/charity/contact.html (source src/demos/charity/pages/contact.json)
Logistics: template/logistics/contact.html (source src/demos/logistics/pages/contact.json)

Contact "type": "contact"