With Map

A contact section that places a form beside an embedded map of your location. Ideal for a storefront or office that wants visitors to find and reach it.

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Mail, MapPin, Phone } from 'lucide-react';

export default function WithMap() {
  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      <div className="mx-auto max-w-2xl lg:max-w-5xl">
        <div className="text-center">
          <h1 className="text-3xl font-bold sm:text-4xl">Get in touch</h1>
          <p className="text-muted-foreground mt-3">
            We&apos;d love to hear from you. Please fill out this form.
          </p>
        </div>

        <div className="mt-12 grid gap-8 lg:grid-cols-2">
          {/* Form */}
          <Card className="p-0">
            <CardContent className="p-6">
              <form>
                <div className="grid gap-4">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="first-name">First name</Label>
                      <Input id="first-name" placeholder="First name" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="last-name">Last name</Label>
                      <Input id="last-name" placeholder="Last name" />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" placeholder="Email" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="phone">Phone</Label>
                    <Input id="phone" type="tel" placeholder="Phone" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="message">Message</Label>
                    <Textarea
                      id="message"
                      placeholder="Your message"
                      className="min-h-[350px]"
                      rows={14}
                    />
                  </div>

                  <Button type="submit">Send message</Button>
                </div>
              </form>
            </CardContent>
          </Card>

          {/* Map and Contact Info */}
          <div className="space-y-6">
            <div className="bg-muted relative aspect-square w-full overflow-hidden rounded-lg">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.9416307263784!2d-0.12574468422944231!3d51.50718397963522!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c7c7eb9be3%3A0x3918653583725b56!2sRiver%20Thames!5e0!3m2!1sen!2suk!4v1647095757714!5m2!1sen!2suk"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>

            <div className="space-y-4">
              <div className="flex items-start gap-4">
                <MapPin className="text-muted-foreground mt-1 h-5 w-5 shrink-0" />
                <div>
                  <h3 className="font-medium">Visit us</h3>
                  <p className="text-muted-foreground text-sm">
                    100 Smith Street, Melbourne VIC 3000, Australia
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <Mail className="text-muted-foreground mt-1 h-5 w-5 shrink-0" />
                <div>
                  <h3 className="font-medium">Email us</h3>
                  <a
                    href="mailto:hello@example.com"
                    className="text-primary text-sm hover:underline"
                  >
                    hello@example.com
                  </a>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <Phone className="text-muted-foreground mt-1 h-5 w-5 shrink-0" />
                <div>
                  <h3 className="font-medium">Call us</h3>
                  <a
                    href="tel:+1234567890"
                    className="text-primary text-sm hover:underline"
                  >
                    +1 (234) 567-890
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

With Map is a two-column contact section. A centered heading and a short line of supporting text sit above the grid, then the left column holds a card with a contact form: a side-by-side first-and-last-name row, an email field, a phone field, a tall message textarea, and a submit button. The right column stacks an embedded map iframe above three icon-labeled contact detail rows covering address, email, and phone.

All four form fields and the message area are independent, so you can relabel them or remove the phone field without affecting the rest. The three contact detail rows are equally independent, and the map src can be swapped for any location embed. The heading and subtext at the top can be rewritten to match the tone of your page.

When to use

Reach for this block when a physical location is central to the contact experience. It is the right choice for a clinic, specialist practice, or health campus that wants patients to confirm they have the right address before booking. Compared to the Split With Details variant, this layout trades the detail column for a live map so the location is immediately visual rather than text-only.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the practice or clinic and establish trust before the visitor commits to reaching out
A team section showing the practitioners, so the form feels personal rather than anonymous

After

A FAQ section to catch common questions that might otherwise become support messages
A footer to round out the page with secondary navigation and legal links

What you can display

The form and map work for any situation where visitors need to reach a physical place or a specific team. A few focused ways to use it:

Appointment requests. Let patients or clients describe what they need in the message field so staff can prepare before calling back.
Multi-location presence. Swap the map embed and address row to highlight whichever office or clinic is most relevant to that page.
Service area confirmation. Point the map to a neighborhood or district rather than a single pin to show the region you cover.

Tip: shorten the textarea height if your visitors tend to write brief notes so the form and map panel stay roughly the same visual height.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the practice or clinic and establish trust before the visitor commits to reaching out
A team section showing the practitioners, so the form feels personal rather than anonymous

After

A FAQ section to catch common questions that might otherwise become support messages
A footer to round out the page with secondary navigation and legal links

What you can display

The form and map work for any situation where visitors need to reach a physical place or a specific team. A few focused ways to use it:

Appointment requests. Let patients or clients describe what they need in the message field so staff can prepare before calling back.
Multi-location presence. Swap the map embed and address row to highlight whichever office or clinic is most relevant to that page.
Service area confirmation. Point the map to a neighborhood or district rather than a single pin to show the region you cover.

Tip: shorten the textarea height if your visitors tend to write brief notes so the form and map panel stay roughly the same visual height.

With Map

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display