Glow Contact Form
A free nextjs contact form and complete React contact section with accessible validation and a restrained pointer glow.
Start a conversation
Tell us what you want to make possible.
Share the challenge, the people it needs to serve and where you want the work to lead.
- Availability
- New projects from October
Customise
Code
<ContactGlowForm
title="Start a project" onSubmit={handleSubmit}
/>Glow Contact Form is a free contact section for Next.js and React, styled with Tailwind and animated with Motion. It combines a complete labelled form, optional contact details and consumer-owned submission handling with a restrained glow that follows fine pointers inside the form panel.
The server output keeps native required and email validation available without JavaScript. After hydration, the component associates inline errors, focuses the first invalid field, announces concise form and submission states, and removes the follower entirely for reduced-motion or coarse-pointer users.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/contact-glow-formUsage
import { ContactGlowForm } from "@/components/contact-glow-form";
export function ContactSection() {
return (
<ContactGlowForm
title="Tell us what you want to make possible."
description="Share the challenge and where you want the work to lead."
details={[
{
id: "email",
label: "Email",
value: "hello@example.com",
href: "mailto:hello@example.com",
},
]}
privacy={{ label: "Privacy policy", href: "/privacy" }}
onSubmit={async (values) => {
await sendContactMessage(values);
}}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Start a conversation" | Introductory label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy below the heading. |
| details | { id; label; value; href? }[] | [] | Zero to four contact details with stable unique IDs and optional real links. |
| labels | Partial<{ name; email; company; message; submit; submitting; success; failure }> | English labels | Localisable form and status copy. These values are never effect controls. |
| privacy | { label: string; href: string } | undefined | Optional privacy-policy link beside the submit action. |
| initialValues | Partial<{ name; email; company; message }> | {} | Uncontrolled field values applied on first mount only. |
| onSubmit | (values) => void | Promise<void> | required | Consumer-owned submission handler. The component performs no network request. |
| panelSide | "left" | "right" | "right" | Desktop placement of the form panel. |
| panelRatio | number | 0.54 | Form width fraction on desktop, clamped from 0.42 to 0.65. |
| glowSize | number | 360 | Pointer glow diameter in CSS pixels, clamped from 220 to 560. |
| glowLag | number | 0.45 | Pointer glow spring response, clamped from 0.15 to 0.9. |
| fieldRadius | number | 14 | Field corner radius in CSS pixels, clamped from 6 to 24. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Glow Contact Form exposes Tier 3 tokens for its panel, fields, glow and error feedback. Effect and geometry props tune the panel split, glow response and field shape independently of the form copy:
.contact-glow-form {
--contact-form-surface: var(--surface);
--contact-field-surface: var(--background);
--contact-form-glow: var(--primary);
--contact-form-error: var(--destructive, var(--foreground));
}
<ContactGlowForm
title="Start a project"
onSubmit={handleSubmit}
panelSide="left"
panelRatio={0.58}
glowSize={440}
glowLag={0.3}
fieldRadius={18}
className="contact-glow-form"
/>Frequently asked questions
- Is Glow Contact Form free for commercial use?
- Yes. Glow Contact Form is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Glow Contact Form accessible and reduced-motion safe?
- Yes. It uses visible labels, native field types, associated inline errors, first-invalid focus and separate assertive and polite live regions. Coarse pointers and reduced-motion users receive a static low-opacity glow with no pointer follower.
- How do I customise the contact form effect?
- Use panelSide and panelRatio for desktop geometry, glowSize and glowLag for the follower, and fieldRadius for field shape. Four Tier 3 tokens control the panel, field, glow and error colours without changing component code.