# Contact 11 – Centered form with supporting sidebar

> A balanced contact layout with a primary, centered form and a secondary sidebar that mirrors or reinforces the same interaction. The main column keeps focus on the form, while the sidebar provides a persistent fallback or alternative entry point. Useful when you want a calm, symmetrical layout with built-in redundancy for conversion.

A shadcn/ui block from the [@shadcncraft](https://shadcncraft.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcncraft/contact-11).

- Page, with a live preview: https://shadcn.exchange/r/shadcncraft/contact-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcncraft/contact-11-light-08baa83ac986b4ab.png
- Registry item: https://shadcncraft.com/r/contact-11.json
- Categories: contact
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcncraft.com/r/contact-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `label`, `input`, `textarea`, `checkbox`, `@shadcncraft/section-heading`

## Notes from the registry

Tip: browse, preview and install every shadcncraft block from your editor with the shadcncraft extension for VS Code and Cursor: https://shadcncraft.com/ide-extension

## Files

### `blocks/pro-marketing/contact/contact-11/index.tsx`

```tsx
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  SectionHeading,
  SectionHeadingBody,
  SectionHeadingTagline,
  SectionHeadingTitle,
} from "@/components/shadcncraft/pro-marketing/section-heading";
import { Textarea } from "@/components/ui/textarea";

export function Contact11() {
  return (
    <section className="py-6 lg:py-20">
      <div className="mx-auto flex max-w-7xl flex-col gap-16 px-5 lg:px-8">
        {/* Section Heading */}
        <div className="mx-auto w-full max-w-md">
          <SectionHeading alignment="center">
            <SectionHeadingTagline>Support</SectionHeadingTagline>
            <SectionHeadingTitle>Need Help? We&apos;re Here to Help</SectionHeadingTitle>
            <SectionHeadingBody>
              Our support team is available to assist you with any questions or issues you
              may have.
            </SectionHeadingBody>
          </SectionHeading>
        </div>

        {/* Contact Form */}
        <div className="mx-auto w-full max-w-md">
          <form className="flex flex-col gap-4" aria-label="Contact form">
            <Field>
              <FieldLabel htmlFor="input-1">Name</FieldLabel>
              <Input id="input-1" placeholder="Joe Smith" />
            </Field>

            <Field>
              <FieldLabel htmlFor="input-2">Email</FieldLabel>
              <Input id="input-2" placeholder="joe@example.com" />
            </Field>

            <Field>
              <FieldLabel htmlFor="input-3">Message</FieldLabel>
              <Textarea
                id="input-3"
                placeholder="Hi, this is my message"
                className="h-16"
              />
            </Field>

            <Field orientation="horizontal">
              <Checkbox id="input-4" />
              <FieldLabel htmlFor="input-4" className="font-normal">
                You agree to our simple{" "}
                <a href="#" className="text-primary underline">
                  Privacy Policy
                </a>
              </FieldLabel>
            </Field>

            <Button type="submit" className="w-full">
              Send message
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
}
```