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

6.1k

6

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

1 year ago

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

Author:
Lukas Müller

1 year ago

14.3k
Contact page

Author:
Mahir

1 year ago

15.4k
Glassmorphism form

Author:
Sophia Baker

1 year ago

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

Author:
Arya

2 years ago

12.2k
Contact me form

Author:
Arya

1 year ago

10.5k
Contact Form

Author:
Sophia Baker

1 year ago

9.4k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

10.3k
Responsive contact us section

Author:
Ron Hicks

1 year ago

12.2k
Simple contact us form

Author:
Lukas Müller

1 year ago

10k
Contact us form template

Author:
Lukas Müller

1 year ago

7.6k
Contact us Form
suitable for dark-themed websites

Author:
Anja Müller

1 year ago

8.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9