Contact Form

contactfrom Community Creative

Live

AI Usage Rules

Use ContactForm for contact/inquiry pages. Fields: first name, last name, email, message. The dark glassmorphic input style matches the creative theme. Add form validation and submission handling as needed.

Code Template

interface ContactFormProps {
  title: string
  subtitle: string
  submitText?: string
}

export function ContactForm({ title, subtitle, submitText = "Send Message" }: ContactFormProps) {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-xl px-6">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-white">{title}</h2>
          <p className="mt-3 text-gray-400">{subtitle}</p>
        </div>
        <form className="mt-12 space-y-6" onSubmit={(e) => e.preventDefault()}>
          <div className="grid gap-6 sm:grid-cols-2">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">First Name</label>
              <input type="text" className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-gray-500 outline-none transition-all focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/50" placeholder="John" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">Last Name</label>
              <input type="text" className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-gray-500 outline-none transition-all focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/50" placeholder="Doe" />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
            <input type="email" className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-gray-500 outline-none transition-all focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/50" placeholder="john@example.com" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">Message</label>
            <textarea rows={5} className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-gray-500 outline-none transition-all focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/50 resize-none" placeholder="Tell us about your project..." />
          </div>
          <button type="submit" className="w-full rounded-xl bg-indigo-500 py-3 text-sm font-semibold text-white transition-all hover:bg-indigo-600 hover:shadow-[0_0_30px_rgba(99,102,241,0.3)] active:scale-[0.98]">
            {submitText}
          </button>
        </form>
      </div>
    </section>
  )
}

Props Schema

Property	Type	Default
title	string	—
subtitle	string	—
submitText	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "subtitle": {
      "type": "string"
    },
    "submitText": {
      "type": "string"
    }
  }
}