Demo Request Split FormPRO

Cta77: Demo Request Split Form

Closing call to action split in two: a soft panel carrying the promise and what the call will actually cover, separated by hairlines, beside an inline demo request form with name, work email, and team size fields under a full-width submit and its fine print.

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

npx shadcn add "https://ui.beste.co/r/cta77?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/cta77?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/cta77.tsx, the select shadcn/ui primitive it is built on, and the badge23 and button21 components it uses for the eyebrow and the submit action.

Quick start

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

import { Cta77, cta77Demo } from "@/components/beste/block/cta77";

export default function Page() {
  return <Cta77 {...cta77Demo} />;
}

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

import { Cta77 } from "@/components/beste/block/cta77";

export default function Page() {
  return (
    <Cta77
      badge={{ label: "Book a demo" }}
      heading="See it running on your own Tuesday"
      description="Thirty minutes, a working workspace, and straight answers."
      points={[
        "A live workspace, never a slide deck",
        "Straight answers on pricing and migration",
      ]}
      form={{
        name: { label: "Your name", placeholder: "Elena Rourke" },
        email: { label: "Work email", placeholder: "you@practice.com" },
        size: {
          label: "Team size",
          options: ["3 to 10 seats", "11 to 25 seats", "More than 25 seats"],
        },
        submitLabel: "Request a demo",
        finePrint: "We reply within one working day.",
      }}
    />
  );
}

Props

type Field = { label: string; placeholder: string };

type SelectField = { label: string; options: string[] };

type DemoForm = {
  name: Field;
  email: Field;
  size: SelectField;
  submitLabel: string;
  finePrint: string;
};

Behavior notes

• There is no <form> element and no submit handler: the text fields are uncontrolled markup and the submit is a plain Button21, so posting the lead is the integrator's to wire.
• The team size field is a shadcn Select, and its defaultValue is the first entry of options, so the control opens on a real choice rather than an empty trigger.
• Field ids come from useId and every label is bound through htmlFor, which keeps two instances of the block on one page from colliding.
• The two text inputs share one class string held in a local constant, so restyling the fields is a single edit rather than three.
• The promise list is checked rows separated by hairlines with the rules dropped at both ends, so the group sits inside the panel's padding instead of drawing a line against it.
• The panel and the form are two halves of one bordered container, splitting only at lg. Below that the panel stacks above the form in source order.