Contact Form With Background

A hero with a full contact form set over a styled background image. Invites visitors to send a message or request a quote without leaving the top.

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { PhoneIcon, MapPinIcon, MailIcon } from 'lucide-react';

export default function HeroFormContactWithBackground() {
  return (
    <>
      {/* Hero */}
      <div className="relative flex min-h-[800px] items-center overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
          <img
            src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=2069&auto=format&fit=crop"
            alt="Office workspace"
            className="object-cover brightness-[0.6]"
          />
        </div>

        <div className="relative z-10 container mx-auto px-4 py-16 md:px-6 md:py-20 lg:py-32 2xl:max-w-[1400px]">
          <div className="grid items-center gap-12 lg:grid-cols-2">
            {/* Left Content */}
            <div className="text-white">
              <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
                Let&apos;s start a conversation
              </h1>
              <p className="mt-4 max-w-lg text-xl text-white/80">
                Have a project in mind or just want to say hello? Our team is
                ready to connect with you.
              </p>

              <div className="mt-12 space-y-8">
                <div className="flex items-start">
                  <div className="flex-shrink-0 rounded-full bg-white/10 p-3">
                    <PhoneIcon className="h-6 w-6 text-white" />
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-white">
                      Call us
                    </h3>
                    <p className="mt-1 text-white/80">+1 (555) 123-4567</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0 rounded-full bg-white/10 p-3">
                    <MailIcon className="h-6 w-6 text-white" />
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-white">
                      Email us
                    </h3>
                    <p className="mt-1 text-white/80">contact@example.com</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0 rounded-full bg-white/10 p-3">
                    <MapPinIcon className="h-6 w-6 text-white" />
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-semibold text-white">
                      Visit us
                    </h3>
                    <p className="mt-1 text-white/80">
                      123 Design Street, San Francisco, CA
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Form */}
            <div className="bg-background/95 rounded-lg p-8 shadow-lg backdrop-blur-sm">
              <h2 className="mb-6 text-2xl font-bold">Send us a message</h2>
              <form className="space-y-4">
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div>
                    <Label className="mb-1.5" htmlFor="firstName">
                      First name
                    </Label>
                    <Input id="firstName" placeholder="John" />
                  </div>
                  <div>
                    <Label className="mb-1.5" htmlFor="lastName">
                      Last name
                    </Label>
                    <Input id="lastName" placeholder="Doe" />
                  </div>
                </div>
                <div>
                  <Label className="mb-1.5" htmlFor="email">
                    Email address
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="johndoe@example.com"
                  />
                </div>
                <div>
                  <Label className="mb-1.5" htmlFor="phone">
                    Phone number (optional)
                  </Label>
                  <Input id="phone" placeholder="+1 (555) 000-0000" />
                </div>
                <div>
                  <Label className="mb-1.5" htmlFor="subject">
                    Subject
                  </Label>
                  <Select>
                    <SelectTrigger id="subject">
                      <SelectValue placeholder="Select a subject" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="general">General Inquiry</SelectItem>
                      <SelectItem value="support">Technical Support</SelectItem>
                      <SelectItem value="sales">Sales Question</SelectItem>
                      <SelectItem value="billing">Billing Issue</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label className="mb-1.5" htmlFor="message">
                    Message
                  </Label>
                  <Textarea
                    id="message"
                    placeholder="Tell us about your project or question..."
                    rows={4}
                  />
                </div>
                <Button className="w-full">Send Message</Button>
              </form>
              <p className="text-muted-foreground mt-4 text-center text-xs">
                We&apos;ll get back to you within 24-48 business hours
              </p>
            </div>
          </div>
        </div>
      </div>
      {/* End Hero */}
    </>
  );
}

About this block

Contact Form With Background is a two-column hero set over a darkened full bleed photo. The left column carries a headline, a short subtext paragraph, and three contact detail rows, each with a frosted circular icon (phone, email, map pin), a label, and the corresponding value. The right column holds a frosted card containing a "Send us a message" form with first and last name fields side by side, an email field, an optional phone field, a subject dropdown with five categories, a multi-line message textarea, and a full-width submit button. A small response-time note sits below the button.

All copy, the contact detail values, and the subject dropdown options are plain text you can replace. The phone field is already marked optional, so you can remove it with no layout change. The two columns are independent, so dropping one to widen the other is straightforward.

When to use

Reach for this block when you want visitors to contact your team from the very first screen rather than hunting for a separate contact page. It works well on a dedicated "Contact Us" landing page or at the top of an HR platform's "Work with us" page, where candidates or clients need a direct line before they scroll. Compared to a plain split hero, the dimmed background photo adds atmosphere without distracting from the form, and the contact detail column answers basic questions (phone, email, location) for visitors who are not ready to type a message yet.

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

Before

A navbar or announcement banner to frame the page before the hero takes over
Plain text: A short brand or mission statement above the fold

After

A feature section to reinforce what the team delivers after a visitor submits the form
A testimonials section to build confidence for visitors who scroll past the hero

What you can customize

The block covers three distinct contact channels plus a structured intake form, so you can point each piece at the right audience:

Contact detail rows. Swap the phone number, email address, and physical location for your real values, or replace the map pin row with a calendar link for an HR platform that prefers scheduled calls over walk-ins.
Subject dropdown options. The five preset categories (General Inquiry, Technical Support, Sales Question, Billing Issue, Other) map well to an HR or hiring context. Rename them to match your intake workflow, for example "Open Role Inquiry" or "Partnership Request."
Background photo. The Unsplash office image sets a professional tone. Replace the URL with any photo that matches your brand's environment, keeping a dark enough subject so the white left-column text stays readable.

Tip: if your team's response time is faster than 24 to 48 hours, update the note below the button to say so. It is one of the first things a motivated visitor reads after clicking Send.

About this block

When to use

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

Before

A navbar or announcement banner to frame the page before the hero takes over
Plain text: A short brand or mission statement above the fold

After

A feature section to reinforce what the team delivers after a visitor submits the form
A testimonials section to build confidence for visitors who scroll past the hero

What you can customize

The block covers three distinct contact channels plus a structured intake form, so you can point each piece at the right audience:

Contact detail rows. Swap the phone number, email address, and physical location for your real values, or replace the map pin row with a calendar link for an HR platform that prefers scheduled calls over walk-ins.
Subject dropdown options. The five preset categories (General Inquiry, Technical Support, Sales Question, Billing Issue, Other) map well to an HR or hiring context. Rename them to match your intake workflow, for example "Open Role Inquiry" or "Partnership Request."
Background photo. The Unsplash office image sets a professional tone. Replace the URL with any photo that matches your brand's environment, keeping a dark enough subject so the white left-column text stays readable.

Tip: if your team's response time is faster than 24 to 48 hours, update the note below the button to say so. It is one of the first things a motivated visitor reads after clicking Send.

Contact Form With Background

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize