Forms

Text Input

Pill-shaped text input with border. Used for name, email, phone, etc.

class="w-full px-6 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"

Select

Pill-shaped select dropdown. Used for inquiry type, categories, etc.

class="w-full px-6 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"

Textarea

Rounded textarea for longer messages. Uses rounded-3xl instead of rounded-full.

class="w-full px-6 py-3 border border-gray-300 rounded-3xl focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"

Submit Button

Full-width pill submit button. Supernova background, uppercase.

class="bg-supernova w-full rounded-full text-black px-8 py-4 text-lg font-medium hover:scale-[1.025] transition uppercase"

Full Form Example

Complete contact form layout as used on the Contact page.