---
type: block
title: Contact
description: Contact sections for project inquiries, support, and sales conversations.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

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.

```astro live props={{ name: 'contact-1' }}
---
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>
```

```astro live props={{ name: 'contact-2' }}
---
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>
```

```astro live props={{ name: 'contact-3' }}
---
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>
```

## Installation

```bash
npx shadcn@latest add @fulldev/contact-1 @fulldev/contact-2 @fulldev/contact-3
```