Contact pages
Whole contact pages: a contact form, offices on a map, ways to reach the team and store addresses, between a header and a footer.
Last updated
Each example is a whole contact page stacked from blocks: a header navigation, an opening block from Contact sections that holds the page’s h1, then more ways to get in touch, a call to action or a newsletter signup before the footer. Two pages are a form on its own, for a focused contact screen. Adding a page copies its blocks too. The page renders its own header, <main> and footer, so give it a layout without a <main>.
npx @ava-ui/apogee add contact/contact-page-01---
// src/pages/contact.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/contact/ContactPage01.astro'
---
<Layout title="Contact">
<Page />
</Layout>
Contact page 01A heading and contact form beside a photo (the photo shows from lg). Then a footer.
Contact page 02A photo beside a heading, an email link and a contact form with a services checklist. Then a footer.
Contact page 03A heading and contact form beside a map (the map shows from lg). Then office addresses, contact cards, a call to action card and a footer on dark.
Contact page 04A centred heading, a wide map and three office cards with their hours and addresses. Then contact cards and a footer.
Contact page 05A centred heading, a world map with office pins (from lg) and three contact cards. Then office addresses on the brand colour, a contact form, a newsletter signup and a footer.
Contact page 06A centred heading over three contact methods with icons and links. Then a contact form, a newsletter signup and a footer on dark.
Contact page 07A heading over four contact cards, a map of offices, a contact form and a footer.
Contact page 08A centred heading over a contact form, ways to get in touch, a call to action card and a footer on the brand colour.
Contact page 09A heading, an email link and a contact form with a services checklist beside a photo.
Contact page 10A brand-colour sidebar with contact methods and links (from lg) beside a form with a services checklist.
Related
ContactFormThe message form contact pages share; names, email, an optional phone with a country code, the message, an optional services checklist and a privacy checkbox.
ContactMethodOne way to reach you; an icon, a title, a line about it and the address, number or link, plain or on a card.
ContactA message form, with or without a column of contact details.