Contact Section Templates

3 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

Contact Section Templates

3 sections · Responsive · GSAP animation · HTML, React & Vue

Updated October 20, 2026

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.

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.

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.

Real-world uses

Best Uses for Contact Sections

🎨

Agency enquiries (Contact Form With Details)

Collect project briefs with a form that goes straight to your inbox through Formspree.

🏢

Business contact page (Contact Form With Details)

List phone, email and opening hours next to a form for general questions.

🚀

SaaS contact page (Contact Options Cards)

Offer "Book a demo" for sales, "Open help centre" for support and a partnerships email.

🏢

Company with departments (Contact Options Cards)

Route visitors to HR, sales, billing and media relations from one page.

☕

Café or restaurant (Contact With Map)

Show your address, opening hours and phone number for bookings next to a map.

🏥

Clinic or practice (Contact With Map)

Help patients find the entrance with the address, hours and phone in one place.

How it’s different

How These Section Templates Are Different

✎

Editable, not just copyable

Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.

◐

One theme for every section

Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.

⇲

Responsive by container

Container queries make each section adapt to its own width, in a full page, a column or a page builder.

✦

GSAP animation built in

Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.

</>

HTML, React and Vue

Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.

◍

Free, private, saved

No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

1
Pick a sectionOpen one of the contact sections above. Your edits autosave in your browser as you go.
2
Edit the contentChange the text, buttons, links and images in the panel, and switch optional parts on or off.
3
Add your brandPick colours, fonts, radius and width, or apply your saved brand kit; every section shares the same theme.
4
Animate and previewChoose a GSAP entrance effect, press Play animation, and check desktop, tablet and mobile.
5
ExportDownload 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.

Yes. Every section is free for personal and commercial websites, with no account and no watermark. Everything runs in your browser and your edits are saved locally.