Contact us page template

Forked from @lukas-muller/contact-us-page-template

full page fancy contact us page

This tailwind example is contributed by Geoffrey Callaghan, on 02-Nov-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Geoffrey Callaghan

Tailwind v3.4 8.3k 10

Fork Fullscreen

<div class="min-h-screen bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
    <div class="relative py-3 sm:max-w-xl sm:mx-auto">
        <div
            class="absolute inset-0 bg-gradient-to-r from-indigo-700 to-purple-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl">
        </div>
        <div class="text-white relative px-4 py-10 bg-indigo-400 shadow-lg sm:rounded-3xl sm:p-20">

<div class="text-center pb-6">
                <h1 class="text-3xl">Contact Us!</h1>

<p class="text-gray-300">
                    Fill up the form below to send us a message.
                </p>
            </div>

<form action="https://fabform.io/f/{form-id}" method="post">

<input
                        class="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="text" placeholder="Name" name="name">

<input
                        class="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="email" placeholder="Email" name="email">

<input
                        class="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="text" placeholder="Subject" name="_subject">

<textarea
                        class="shadow mb-4 min-h-0 appearance-none border rounded h-64 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="text" placeholder="Type your message here..." name="message" style="height: 121px;"></textarea>

<div class="flex justify-between">
                    <input
                        class="shadow bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="submit" value="Send ➤">
                    <input
                        class="shadow bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="reset">
                </div>
<a href="https://veilmail.io/e/FkKh7o" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Or click here to reveal our protected email address</a>
    
            </form>
        </div>
        
    </div>
</div>

Related Examples

Get in touch contact form

Kris Showen

3 years ago

42.3k
Contact us page template
full page fancy contact us page

Lukas Müller

3 years ago

17.8k
Contact page

Mahir

3 years ago

18k
Glassmorphism form

Sophia Baker

3 years ago

19.3k
Feedback form
Collect opinions about your company's service

Arya

4 years ago

14.7k
Contact me form

Arya

3 years ago

12.9k
Contact Form

Sophia Baker

3 years ago

11.1k
Contact us section
Minimal contact us form

Leon Bachmann

3 years ago

13k
Responsive contact us section

Ron Hicks

3 years ago

15.9k
Simple contact us form

Lukas Müller

3 years ago

12.7k
Contact us form template

Lukas Müller

3 years ago

10k
Contact us Form
suitable for dark-themed websites

Anja Müller

3 years ago

10.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.