Each block shows your contact details and renders its default slot in a form panel. Put your own form in the slot, built from Form, Field, Input and Textarea, and point it at your form handler. The blocks do not provide a submission backend. Without slot content, the block shows only the contact details. Give each field an ID that is unique on the page.
Get in touch with us
Have a project in mind? Reach out and let us help you build something great.
Email us
contact@full.devCall us
+31 6 83485163Visit us
Vismarkt 5a, 9712 CA GroningenSupport hours
Weekdays, 9 am to 6 pm CET
---
import Contact1Block from "@/components/blocks/contact-1.astro"
import { Button } from "@/components/ui/button"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
---
<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 method="post">
<FieldGroup>
<div class="grid gap-4 md:grid-cols-2">
<Field>
<FieldLabel for="contact-1-name">Name</FieldLabel>
<Input id="contact-1-name" name="name" autocomplete="name" required />
</Field>
<Field>
<FieldLabel for="contact-1-email">Email</FieldLabel>
<Input
id="contact-1-email"
name="email"
type="email"
autocomplete="email"
required
/>
</Field>
</div>
<Field>
<FieldLabel for="contact-1-message">Message</FieldLabel>
<Textarea
id="contact-1-message"
name="message"
rows={5}
required
aria-describedby="contact-1-message-description"
/>
<FieldDescription id="contact-1-message-description">
Include goals, team size, and any hard deadlines.
</FieldDescription>
</Field>
<Button type="submit" size="lg" class="w-full">
Send message
</Button>
</FieldGroup>
</Form>
</Contact1Block>Let's work together
Tell us about the site, timeline, and what kind of help you need.
Email
contact@full.devPhone
+31 6 83485163Hours
Weekdays, 9 am to 6 pm CET
---
import Contact2Block from "@/components/blocks/contact-2.astro"
import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
---
<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 method="post">
<FieldGroup>
<div class="grid gap-4 md:grid-cols-2">
<Field>
<FieldLabel for="contact-2-name">Name</FieldLabel>
<Input id="contact-2-name" name="name" autocomplete="name" required />
</Field>
<Field>
<FieldLabel for="contact-2-email">Email</FieldLabel>
<Input
id="contact-2-email"
name="email"
type="email"
autocomplete="email"
required
/>
</Field>
</div>
<Field>
<FieldLabel for="contact-2-message">Message</FieldLabel>
<Textarea id="contact-2-message" name="message" rows={5} required />
</Field>
<Button type="submit" size="lg" class="w-full">
Send message
</Button>
</FieldGroup>
</Form>
</Contact2Block>Let's build something great
Fill out the form and our team will get back to you within 24 hours.
Email
contact@full.devPhone
+31 6 83485163Hours
Weekdays, 9 am to 6 pm CET
---
import Contact3Block from "@/components/blocks/contact-3.astro"
import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
---
<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 method="post">
<FieldGroup>
<div class="grid gap-4 md:grid-cols-2">
<Field>
<FieldLabel for="contact-3-name">Name</FieldLabel>
<Input id="contact-3-name" name="name" autocomplete="name" required />
</Field>
<Field>
<FieldLabel for="contact-3-email">Email</FieldLabel>
<Input
id="contact-3-email"
name="email"
type="email"
autocomplete="email"
required
/>
</Field>
</div>
<Field>
<FieldLabel for="contact-3-message">Message</FieldLabel>
<Textarea id="contact-3-message" name="message" rows={5} required />
</Field>
<Button type="submit" size="lg" class="w-full">
Send message
</Button>
</FieldGroup>
</Form>
</Contact3Block>