Templates/Signup form

Signup form template

Create-account UI with name, email, password, and a sign-in footer - light Tailwind card laid out like the FormsReach app signup screen.

FormsReach

Create your account

Start collecting form submissions in minutes.

Already have an account?Sign in

Copy the code

Same Tailwind fields as the preview. Paste into your stack, then connect your own submit handler or form backend.

          <div class="flex w-full min-w-0 flex-col gap-4 overflow-hidden rounded-xl bg-white py-4 font-sans text-sm text-zinc-900 ring-1 ring-zinc-200">
  <div class="grid auto-rows-min items-center justify-items-center gap-2 px-4 pb-4 text-center">
    <span class="mb-3 inline-flex items-center gap-2 sm:mb-4">
      <img src="/brand/icon.svg" alt="" width="28" height="28" class="shrink-0" />
      <span class="text-base font-semibold tracking-tight text-zinc-900">FormsReach</span>
    </span>
    <h2 class="font-sans text-base font-semibold leading-snug text-zinc-900">Create your account</h2>
    <p class="px-1 text-balance text-sm text-zinc-500">Start collecting form submissions in minutes.</p>
  </div>
  <div class="min-w-0 px-4">
    <form method="post" action="#" class="flex min-w-0 flex-col gap-4 font-sans">
      <div class="flex min-w-0 flex-col gap-2">
        <label for="fullName" class="inline-flex items-center text-sm leading-none font-medium text-zinc-900 select-none">Name<span class="ml-0.5 text-red-500">*</span></label>
        <input type="text" id="fullName" name="fullName" required placeholder="Jane Doe" autocomplete="name" class="h-10 w-full min-w-0 rounded-lg border border-zinc-300 bg-white px-2.5 py-1 text-base text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:text-zinc-400 hover:border-zinc-400 focus-visible:border-[#25d366]/65 focus-visible:ring-[3px] focus-visible:ring-[#25d366]/15 md:h-8 md:text-sm" />
      </div>
      <div class="flex min-w-0 flex-col gap-2">
        <label for="email" class="inline-flex items-center text-sm leading-none font-medium text-zinc-900 select-none">Email<span class="ml-0.5 text-red-500">*</span></label>
        <input type="email" id="email" name="email" required placeholder="you@example.com" autocomplete="email" class="h-10 w-full min-w-0 rounded-lg border border-zinc-300 bg-white px-2.5 py-1 text-base text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:text-zinc-400 hover:border-zinc-400 focus-visible:border-[#25d366]/65 focus-visible:ring-[3px] focus-visible:ring-[#25d366]/15 md:h-8 md:text-sm" />
      </div>
      <div class="flex min-w-0 flex-col gap-2">
        <label for="password" class="inline-flex items-center text-sm leading-none font-medium text-zinc-900 select-none">Password<span class="ml-0.5 text-red-500">*</span></label>
        <input type="password" id="password" name="password" required placeholder="At least 8 characters" autocomplete="new-password" minlength="8" class="h-10 w-full min-w-0 rounded-lg border border-zinc-300 bg-white px-2.5 py-1 text-base text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:text-zinc-400 hover:border-zinc-400 focus-visible:border-[#25d366]/65 focus-visible:ring-[3px] focus-visible:ring-[#25d366]/15 md:h-8 md:text-sm" />
      </div>
      <button type="submit" class="inline-flex h-10 w-full shrink-0 items-center justify-center rounded-lg border border-transparent bg-[#25d366] px-3.5 text-sm font-semibold text-[#04150c] transition-[background-color,transform] duration-150 outline-none hover:bg-[#3ae27c] focus-visible:ring-[3px] focus-visible:ring-[#25d366]/50 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-65 sm:h-9">Sign up</button>
    </form>
  </div>
  <div class="flex flex-wrap items-center justify-center gap-x-1 rounded-b-xl border-t border-zinc-100 bg-zinc-50 px-4 py-4 text-center text-sm text-zinc-500">
    <span>Already have an account?</span>
    <a href="#" class="text-zinc-900 hover:underline">Sign in</a>
  </div>
</div>

When to use this signup form template

Use it for product waitlists, SaaS create-account pages, community registration, or any flow that needs name, email, and password in a compact card. The layout follows the FormsReach app signup screen in a light theme, without baking in product-specific APIs.

How FormsReach fits

If the form is a marketing waitlist instead of full auth, point submissions at FormsReach for email (and WhatsApp on Pro or Agency). For real account creation, keep your own auth backend and use this only as the UI shell.

Next steps

FAQ

Quick answers about fields, styling, and wiring this template to your own backend.

Does this template create a FormsReach account?+

No. It is a generic signup UI you host on your site. Wire the submit handler to your own auth API, or adapt it for waitlists and lead capture.

Why does it look like the FormsReach app?+

The preview and snippets mirror the app signup layout (logo, fields, primary button, sign-in footer) in a light theme so it fits marketing and docs pages.

Is the name field required?+

Yes. Name, email, and password are all required in this template. Drop the required attribute on name if you want it optional.

Can I use this without a password field?+

Yes. Remove the password input for magic-link or OTP signup, and keep the card chrome and email field.

Ready to receive form leads?

Create a free API key. Upgrade when you need more monthly credits.

Get started →All templates