Contact Form
SectionsFunctional layout for user inquiries.
Contact Us
We'll get back to you as soon as possible.
Live Functional Playground Interactive Hooks • useState
Interactive Preview
useState Active
Contact Us
We'll get back to you as soon as possible.
Click element to toggle state
Motion Physics & Animation Showcase Framer Motion ✨
Motion Physics
✨
Contact Us
We'll get back to you as soon as possible.
Hover to trigger spring elevation lift
Format:
Required Animation Library: framer-motion & lucide-react
Install this package in your project before importing the animated component.
npm i framer-motion lucide-react <section class="py-12 md:py-24 max-w-md mx-auto w-full">
<div class="space-y-6">
<div class="space-y-2 text-center">
<h2 class="text-3xl font-bold tracking-tighter">Contact Us</h2>
<p class="text-muted-foreground">We'll get back to you as soon as possible.</p>
</div>
<form class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<label class="text-sm font-medium" for="first-name">First name</label>
<input id="first-name" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="John" />
</div>
<div class="space-y-2">
<label class="text-sm font-medium" for="last-name">Last name</label>
<input id="last-name" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="Doe" />
</div>
</div>
<div class="space-y-2">
<label class="text-sm font-medium" for="email">Email</label>
<input id="email" type="email" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="john@example.com" />
</div>
<div class="space-y-2">
<label class="text-sm font-medium" for="message">Message</label>
<textarea id="message" class="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm" placeholder="How can we help you?"></textarea>
</div>
<button class="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 h-9">Send Message</button>
</form>
</div>
</section><section className="py-12 md:py-24 max-w-md mx-auto w-full">
<div className="space-y-6">
<div className="space-y-2 text-center">
<h2 className="text-3xl font-bold tracking-tighter">Contact Us</h2>
<p className="text-muted-foreground">We'll get back to you as soon as possible.</p>
</div>
<form className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="first-name">First name</label>
<input id="first-name" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="John" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="last-name">Last name</label>
<input id="last-name" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="Doe" />
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="email">Email</label>
<input id="email" type="email" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="john@example.com" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="message">Message</label>
<textarea id="message" className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm" placeholder="How can we help you?"></textarea>
</div>
<button className="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 h-9">Send Message</button>
</form>
</div>
</section>"use client";
import React, { useState } from "react";
interface ContactFormProps {
className?: string;
children?: React.ReactNode;
}
export default function ContactForm({
className = "",
children,
}: ContactFormProps) {
const [isActive, setIsActive] = useState(false);
return (
<div
onClick={() => setIsActive(!isActive)}
className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
>
<section className="py-12 md:py-24 max-w-md mx-auto w-full">
<div className="space-y-6">
<div className="space-y-2 text-center">
<h2 className="text-3xl font-bold tracking-tighter">Contact Us</h2>
<p className="text-muted-foreground">We'll get back to you as soon as possible.</p>
</div>
<form className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="first-name">First name</label>
<input id="first-name" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="John" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="last-name">Last name</label>
<input id="last-name" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="Doe" />
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="email">Email</label>
<input id="email" type="email" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="john@example.com" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="message">Message</label>
<textarea id="message" className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm" placeholder="How can we help you?"></textarea>
</div>
<button className="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 h-9">Send Message</button>
</form>
</div>
</section>
</div>
);
}"use client";
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedContactForm() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
className="cursor-pointer"
>
<section className="py-12 md:py-24 max-w-md mx-auto w-full">
<div className="space-y-6">
<div className="space-y-2 text-center">
<h2 className="text-3xl font-bold tracking-tighter">Contact Us</h2>
<p className="text-muted-foreground">We'll get back to you as soon as possible.</p>
</div>
<form className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="first-name">First name</label>
<input id="first-name" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="John" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="last-name">Last name</label>
<input id="last-name" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="Doe" />
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="email">Email</label>
<input id="email" type="email" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" placeholder="john@example.com" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium" htmlFor="message">Message</label>
<textarea id="message" className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm" placeholder="How can we help you?"></textarea>
</div>
<button className="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 h-9">Send Message</button>
</form>
</div>
</section>
</motion.div>
);
}