Contact Section Templates
5 free, editable contact section templates. Contact sections with details, maps and forms. Change the text, images, colours and fonts in your browser, add a GSAP animation, then export HTML, React or Vue.
Contact Section Templates
5 sections · Responsive · GSAP animation · HTML, React & Vue
About these sections
Contact Section Templates
A contact section turns interest into conversations. It should make the next step obvious, set expectations about replies, and work reliably.
Contact Form With Details pairs your email, phone, address and hours with a working form that sends to Formspree, Basin, Getform or your own endpoint, with animated success and error states. Contact Options Cards route visitors to sales, support, partnerships or press with response times. Contact With Map shows your locations beside an embedded OpenStreetMap or Google Map, with no API key needed. Opening Hours & Location adds a weekly hours table with a live Open now badge, the address, a map and call buttons, and writes LocalBusiness data for search engines.
Forms send in the background with JavaScript and fall back to a normal post without it; in the editor they simulate success so nothing is sent while you design. Every section shares the library's theme and exports to HTML, React or Vue.
New: the Booking Request Form collects a service, a day and a time for salons, clinics, restaurants and any business that takes appointments, with your opening hours beside it.
Contact Form With Details: A complete “Contact us” section: on the left a heading, short text and a list of ways to reach you (email, phone, office, chat), each with an icon and link; on the right a contact form card. The form sends in the background to Formspree, Basin or your own endpoint and shows an animated thank-you message.
Contact Options Cards: A “How can we help?” section that sends each visitor to the right place: cards for sales, support, partnerships and press, each with an icon, a short description, a response-time note and its own button or email link. Clean on a dark theme, and it stacks neatly on phones.
Contact With Map: A location-focused contact section: a large embedded map (OpenStreetMap by default, or paste a Google Maps embed link) beside a heading and a list of offices, each with the city, address, phone and email. Perfect for shops, clinics, restaurants and companies with physical locations.
Booking Request Form: An appointment request section: on the left a heading, opening hours and a short list of what to expect; on the right a form card with name, email, phone, a service menu, a date picker, time slots and a notes box. Services and time slots are editable lists, the form sends to Formspree or any endpoint, and the date picker blocks past days.
Opening Hours & Location: A section every local business needs: a weekly opening hours table with today highlighted, a live “Open now” or “Closed, opens Tuesday 09:00” badge that follows the business’s own time zone, the address and an embedded map, and buttons to get directions or call. Closed days, split shifts and notes such as “Brunch until 2 pm” are supported. The hours, address and phone are also written as schema.org LocalBusiness data with OpeningHoursSpecification, so search engines can show them. Works with OpenStreetMap or a Google Maps embed.
Browse other categories
More Section Categories
| Category | What it is for | Sections | Includes |
|---|---|---|---|
| Hero | Above-the-fold hero sections with a headline, supporting text, call-to-action buttons and an image, screenshot or background photo. | 5 | SaaS Split Hero, Centred Gradient Hero, Image Background Hero, App Product Hero, Personal Portfolio Hero |
| Navbar | Responsive navigation bars with a logo, links and a call-to-action button. | 3 | Simple Sticky Navbar, Floating Pill Navbar, Navbar With Announcement Bar |
| Features | Feature grids, alternating image-and-text rows and benefit lists. | 5 | Icon Grid Features, Split Features With Image, Bento Grid Features, Alternating Feature Rows, How It Works Steps |
| Pricing | Pricing tables and plan cards with highlighted plans and feature lists. | 5 | Three-Tier Pricing, Dark Glow Pricing, Single Plan Pricing, Pricing List Rows, Pricing Comparison Table |
| Testimonials | Customer quotes, review walls and case-study highlights. | 6 | Testimonial Wall, Testimonial Carousel, Testimonial Marquee, Testimonial Spotlight, Case Study Showcase, Reviews Summary & Rating |
| FAQ | Frequently asked question sections with expandable answers. | 3 | FAQ Accordion, Split FAQ With Contact Card, FAQ Grid |
| Call to action | Closing call-to-action banners and sign-up blocks. | 4 | Gradient CTA Banner, Split CTA With Image, Newsletter Signup CTA, CTA Strip |
| Stats & logos | Social-proof numbers and customer logo strips. | 3 | Animated Stats Counters, Scrolling Logo Cloud, Stats With Logos (Dark) |
| Team | Team grids with photos, names and roles. | 4 | Team Grid, Team Carousel, Interactive Team Accordion, Team With Hiring CTA |
| About us | About us and our story sections: a picture, the story, the founder, key facts and company values. | 1 | About Us & Our Story |
| Blog | Blog and article grids with cover images. | 6 | Blog Post Cards, Featured Post With List, Editorial Post List, Legal & Long-Form Text Page, Blog Post Page (Single Article), Blog Grid with Pagination |
| Gallery & media | Photo galleries with filters and a lightbox, video sections and before-and-after sliders. | 3 | Filterable Image Gallery, Video Section with Poster, Before & After Slider |
| Scroll effects | Scroll-driven sections built with GSAP: horizontal scroll galleries, pinned scroll stories and stacking cards. | 6 | Horizontal Scroll Gallery, Pinned Scroll Story, Stacking Cards, Scroll Path Timeline, 3D Scroll Carousel, Scroll Zoom Image Stack (Ken Burns) |
| Menus & listings | Industry sections: restaurant menus with prices, property listings and class timetables. | 4 | Restaurant Menu, Property Listings, Product Grid, Class Timetable |
| Music | Sections for bands, artists and labels: a music hero, an audio player with a track list, tour dates with tickets, a discography grid, a release countdown and streaming links. | 6 | Music Artist Hero, Audio Player & Track List, Tour Dates & Tickets, Discography Grid, New Release Spotlight, Streaming Links Bar |
| Login & Sign up | Login and register screens with email and password, social sign-in buttons, show password and a password strength hint. | 2 | Login Form (Sign In Page), Register Form (Sign Up Page) |
| Popups | Popups that open after a delay, on exit intent or on scroll, for sign-ups, offers and announcements. | 1 | Popup & Promo Modal |
| Accessibility | Floating accessibility toolbars that let visitors enlarge text, change contrast, hide images, pause animations and more. | 1 | Accessibility Toolbar Widget |
| Cursor & page effects | Page-wide effects that take no space in the layout: cursor followers that invert what is under them and floating back-to-top buttons. | 2 | Cursor Follower (Blend Mode Circle), Back to Top Button |
| Timelines | Timelines for company history, roadmaps and milestones, laid out along a scrollable line. | 1 | Horizontal Timeline |
| Social share | Floating social share bars that take no space in the layout, with share buttons for the popular networks. | 1 | Floating Social Share Bar |
| Footer | Website footers with link columns, newsletter sign-up and social links. | 4 | Multi-Column Footer, Big Wordmark Footer, Footer With Newsletter, Minimal Footer |
Real-world uses
Best Uses for Contact Sections
How it’s different
How These Section Templates Are Different
Step by step
How to Use
- 1Pick a sectionOpen one of the contact sections above. Your edits autosave in your browser as you go.
- 2Edit the contentChange the text, buttons, links and images in the panel, and switch optional parts on or off.
- 3Add your brandPick colours, fonts, radius and width, or apply your saved brand kit; every section shares the same theme.
- 4Animate and previewChoose a GSAP entrance effect, press Play animation, and check desktop, tablet and mobile.
- 5ExportDownload HTML or a ZIP, copy a React or Vue component, or fork it into My Code.
Got questions?
Frequently Asked Questions
Use a form service such as Formspree, Basin or Getform: create a form, copy its endpoint URL into the section’s Form URL, and submissions are emailed to you.
No. OpenStreetMap embeds and Google Maps “Embed a map” links both work without an API key.
The form includes a hidden honeypot field (_gotcha) that services like Formspree use to discard bots. Most services also offer CAPTCHA or spam filtering.
Contact Form With Details: A complete “Contact us” section: on the left a heading, short text and a list of ways to reach you (email, phone, office, chat), each with an icon and link; on the right a contact form card. The form sends in the background to Formspree, Basin or your own endpoint and shows an animated thank-you message. Contact Options Cards: A “How can we help?” section that sends each visitor to the right place: cards for sales, support, partnerships and press, each with an icon, a short description, a response-time note and its own button or email link. Clean on a dark theme, and it stacks neatly on phones. Contact With Map: A location-focused contact section: a large embedded map (OpenStreetMap by default, or paste a Google Maps embed link) beside a heading and a list of offices, each with the city, address, phone and email. Perfect for shops, clinics, restaurants and companies with physical locations. Booking Request Form: An appointment request section: on the left a heading, opening hours and a short list of what to expect; on the right a form card with name, email, phone, a service menu, a date picker, time slots and a notes box. Services and time slots are editable lists, the form sends to Formspree or any endpoint, and the date picker blocks past days. Opening Hours & Location: A section every local business needs: a weekly opening hours table with today highlighted, a live “Open now” or “Closed, opens Tuesday 09:00” badge that follows the business’s own time zone, the address and an embedded map, and buttons to get directions or call. Closed days, split shifts and notes such as “Brunch until 2 pm” are supported. The hours, address and phone are also written as schema.org LocalBusiness data with OpeningHoursSpecification, so search engines can show them. Works with OpenStreetMap or a Google Maps embed.
Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.