Home
Geoffrey Callaghan
Contact us page template

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Geoffrey Callaghan

7k

9

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

Author:
Kris Showen

2 years ago

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

Author:
Lukas Müller

2 years ago

16.1k
Contact page

Author:
Mahir

1 year ago

17k
Glassmorphism form

Author:
Sophia Baker

2 years ago

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

Author:
Arya

2 years ago

13.3k
Contact me form

Author:
Arya

2 years ago

11.5k
Contact Form

Author:
Sophia Baker

2 years ago

9.9k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.3k
Responsive contact us section

Author:
Ron Hicks

2 years ago

13.8k
Simple contact us form

Author:
Lukas Müller

2 years ago

11.1k
Contact us form template

Author:
Lukas Müller

2 years ago

8.7k
Contact us Form
suitable for dark-themed websites

Author:
Anja Müller

1 year ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1