Register Interest Form shadcn/tailwind block

About this block

Register Interest FormPRO

A full register-your-interest form for a development: heading, lead and a phone line on the left; on the right a GET form with first name, last name, email and phone in a two-column grid, bedroom pills writing to a hidden input, a budget select, a message textarea, and a consent checkbox under a hairline beside the submit pill and a privacy note.

Realestate45: Register Interest Form

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash

npx shadcn add "https://beste.dev/r/realestate45?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

npx shadcn add "https://beste.dev/r-base/realestate45?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate45.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the submit button, and the shadcn/ui button, checkbox, input, select and textarea primitives behind them, the four text fields, the budget menu, the message box and the consent row.

Quick start

The installed file exports realestate45Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

tsx

import { Realestate45, realestate45Demo } from "@/components/beste/block/realestate45";

export default function Page() {
  return <Realestate45 {...realestate45Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx

import { Realestate45 } from "@/components/beste/block/realestate45";

export default function Page() {
  return (
    <Realestate45
      eyebrow="Register your interest"
      heading="Be first to hear when the courtyard wing is released."
      description="Registered buyers see prices and floor plans a week before anyone else."
      form={{
        action: "/register",
        params: { firstName: "first_name", lastName: "last_name", email: "email", phone: "phone", bedrooms: "bedrooms", budget: "budget", message: "message", consent: "consent" },
      }}
      bedrooms={[
        { label: "2 bedrooms", value: "2" },
        { label: "3 bedrooms", value: "3" },
        { label: "Penthouse", value: "penthouse" },
      ]}
      budgets={[
        { label: "Up to $700,000", value: "700000" },
        { label: "$700,000 to $900,000", value: "900000" },
        { label: "Over $900,000", value: "900001" },
      ]}
      labels={{
        firstName: "First name",
        lastName: "Last name",
        email: "Email",
        phone: "Phone",
        bedrooms: "Bedrooms",
        budget: "Budget",
        budgetPlaceholder: "Choose a range",
        message: "Anything we should know",
        consent: "I agree to being contacted about Alder Row by email and phone.",
        submit: "Register",
      }}
      contact={{ label: "Prefer to talk? Call us on", number: "+44 20 7946 0000", href: "tel:+442079460000" }}
      note="We never share your details with other developers or agents."
    />
  );
}

Props

Prop	Type	Default	Description
`eyebrow`	`string`	–	Short line above the heading, drawn with a rule in front of it.
`heading`	`string`	–	Section heading.
`description`	`string`	–	Lead paragraph under the heading.
`form`	`RegisterForm`	–	GET target and the query parameter names; without it no form renders.
`bedrooms`	`Option[]`	`[]`	Bedroom choices shown as pills; the first is selected on load and the chosen `value` goes to a hidden input.
`budgets`	`Option[]`	`[]`	Budget ranges for the select.
`labels`	`Labels`	`{}`	Captions for every field, the select placeholder, the consent sentence and the submit pill.
`contact`	`{ label: string; number: string; href: string }`	–	Phone line under the lead, the number rendered as a link.
`note`	`string`	–	Privacy line beside the submit button.
`className`	`string`	–	Extra classes merged onto the `section`.

type Option = { label: string; value: string };

type RegisterForm = {
  action: string;
  params?: {
    firstName?: string;
    lastName?: string;
    email?: string;
    phone?: string;
    bedrooms?: string;
    budget?: string;
    message?: string;
    consent?: string;
  };
};

type Labels = {
  firstName?: string;
  lastName?: string;
  email?: string;
  phone?: string;
  bedrooms?: string;
  budget?: string;
  budgetPlaceholder?: string;
  message?: string;
  consent?: string;
  submit?: string;
};

Behavior notes

The form is a plain method="get" form posting to form.action; parameter names come from form.params with snake_case fallbacks (first_name, last_name, email, phone, bedrooms, budget, message, consent).
The four text fields, the budget select and the consent checkbox carry native required; the shadcn Select and Checkbox render hidden native inputs, so their values travel with the query string. The checkbox submits consent=yes.
Bedroom pills are aria-pressed buttons; the first option is selected on load so the hidden input is never empty.
Fields enter in one sequence: heading, lead, the four text fields 80 ms apart, bedrooms, budget, message, then the hairline draws and the consent row with the submit pill rises last. With prefers-reduced-motion nothing moves.
The textarea is rounded-md while every other control is a rounded-full pill at 44 px tall, matching the rest of the set.

Wiring the form up

This block ships the form markup only; state, validation, and submit are yours to add. Our guide wires the shadcn Field primitives to React Hook Form, TanStack Form, and Formisch on one field system.

More Real Estate blocks

View all Real Estate

PRO

realestate48

Updates Signup Form

PRO

realestate43

Book a Viewing Form

PRO

realestate46

Register Interest Form

Be first to hear when the courtyard wing is released.