Each block renders a real form with named, required fields and a submit button.
Set form.action to your form handler and form.method to "post" (the
default) or "get". The blocks do not provide a submission backend.
Pass form.id for a stable form ID; field IDs use it as their prefix.
---
import Contact1Block from "@/components/blocks/contact-1.astro"
---
<Contact1Block
title="Get in touch with us"
description="Have a project in mind? Reach out and let us help you build something great."
contactItems={[
{
icon: "mail",
title: "Email us",
description: "contact@full.dev",
href: "mailto:contact@full.dev",
},
{
icon: "phone",
title: "Call us",
description: "+31 6 83485163",
href: "tel:+31683485163",
},
{
icon: "map-pin",
title: "Visit us",
description: "Vismarkt 5a, 9712 CA Groningen",
href: "https://maps.google.com/?q=Vismarkt%205a%2C%209712%20CA%20Groningen",
},
{
icon: "clock",
title: "Support hours",
description: "Weekdays, 9 am to 6 pm CET",
},
]}
form={{
legend: "Contact form",
nameLabel: "Name",
namePlaceholder: "Avery Morgan",
emailLabel: "Email",
emailPlaceholder: "avery@studio.dev",
messageLabel: "Message",
messagePlaceholder:
"Tell us about your project, timeline, and what kind of help you need...",
messageDescription: "Include goals, team size, and any hard deadlines.",
actionLabel: "Send message",
}}
/>---
import Contact2Block from "@/components/blocks/contact-2.astro"
---
<Contact2Block
title="Let's work together"
description="Tell us about the site, timeline, and what kind of help you need."
contactItems={[
{
icon: "mail",
title: "Email",
description: "contact@full.dev",
href: "mailto:contact@full.dev",
},
{
icon: "phone",
title: "Phone",
description: "+31 6 83485163",
href: "tel:+31683485163",
},
{
icon: "map-pin",
title: "Office",
description: "Vismarkt 5a, 9712 CA Groningen",
href: "https://maps.google.com/?q=Vismarkt%205a%2C%209712%20CA%20Groningen",
},
{
icon: "clock",
title: "Hours",
description: "Weekdays, 9 am to 6 pm CET",
},
]}
form={{
title: "Send us a message",
legend: "Contact form",
nameLabel: "Name",
namePlaceholder: "Jordan Lee",
emailLabel: "Email",
emailPlaceholder: "jordan@northwind.studio",
messageLabel: "Message",
messagePlaceholder:
"We are refreshing our docs and need reusable sections for onboarding, changelogs, and feature launches.",
actionLabel: "Send message",
}}
/>
---
import Contact3Block from "@/components/blocks/contact-3.astro"
---
<Contact3Block
title="Let's build something great"
description="Fill out the form and our team will get back to you within 24 hours."
contactItems={[
{
icon: "mail",
title: "Email",
description: "contact@full.dev",
href: "mailto:contact@full.dev",
},
{
icon: "phone",
title: "Phone",
description: "+31 6 83485163",
href: "tel:+31683485163",
},
{
icon: "map-pin",
title: "Office",
description: "Vismarkt 5a, 9712 CA Groningen",
href: "https://maps.google.com/?q=Vismarkt%205a%2C%209712%20CA%20Groningen",
},
{
icon: "clock",
title: "Hours",
description: "Weekdays, 9 am to 6 pm CET",
},
]}
form={{
legend: "Contact form",
nameLabel: "Name",
namePlaceholder: "Morgan Hale",
emailLabel: "Email",
emailPlaceholder: "morgan@team.dev",
messageLabel: "Message",
messagePlaceholder:
"Tell us what you are working on and how we can help...",
actionLabel: "Send message",
}}
/>