Home
Geoffrey Callaghan
contact-form

contact-form

Forked from> @geoffrey-callaghan/contact-form-3

tailwind contact form

This tailwind example is contributed by Geoffrey Callaghan, on 22-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author Geoffrey Callaghan

Fork Fullscreen

<div class="container flex flex-col md:flex-row lg:max-w-5xl w-full px-5 py-12 md:py-24 mx-auto section"
        id="contact-form">
        <div class="md:w-1/3 w-full">
            <h1 class="text-4xl text-gray-800 sm:text-4xl font-bold title-font mb-4">Contact Us</h1>
            <p class="leading-relaxed text-xl text-gray-900">
                We're here to assist you! If you have any questions or need assistance, please feel free to reach out to
                us.
                <br><br>
                You can also email us. Click here to reveal email address
                   <a href="https://veilmail.io/irish-geoff" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">https://veilmail.io/irish-geoff</a>
    
            </p>
            <p class="leading-relaxed text-xl text-gray-900 mt-8">
                We use VeilMail.io to <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline" href="https://veilmail.io">hide email address from spammers</a>
            </p>
            <span class="inline-flex mt-6 justify-center sm:justify-start">
             
               
            </span>
        </div>
        <div class="md:w-2/3 w-full mt-10 md:mt-0 md:pl-28">
            <h1 class="text-4xl text-gray-800 sm:text-4xl font-bold title-font mb-4">Contact Form</h1>
            <form action="send-contact.php" method="post" id="submit-contact-form">
                <div class="p-2 w-full">
                    <div class="relative">
                        <label for="name" class="leading-7 py-4 text-lg text-gray-900">Your Name</label>
                        <input type="text" id="name" name="name" required=""
                            class="w-full bg-white rounded border border-gray-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-200 text-base outline-none text-gray-900 py-1 px-1 leading-8 transition-colors duration-200 ease-in-out ">
                    </div>
                </div>
                <div class="p-2 w-full">
                    <div class="relative">
                        <label for="email" class="leading-7 py-4 text-lg text-gray-900">Your Email</label>
                        <input type="email" id="email" name="email" required=""
                            class="w-full bg-white rounded border border-gray-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-200 text-base outline-none text-gray-900 py-1 px-1 leading-8 transition-colors duration-200 ease-in-out ">
                    </div>
                </div>
                <div class="p-2 w-full">
                    <div class="relative">
                        <label for="message" class="leading-7 py-4 text-lg text-gray-900">Your Message</label>
                        <textarea id="message" name="message" required=""
                            class="w-full bg-white rounded border border-gray-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-200 h-32 text-base outline-none text-gray-900 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out "></textarea>
                    </div>
                </div>
                <div class="p-2 w-full">
                    <button type="submit"
                        class="flex text-white bg-gray-900 border-0 py-4 px-6 focus:outline-none hover:bg-blue-900 rounded text-xl font-bold shadow-lg mx-0 flex-col text-center g-recaptcha">
                        Send Message ✉
                    </button>
                </div>
            </form>
        </div>
    </div>
    </form>
</section>

Related Examples

Responsive contact us section

Author:
Geoffrey Callaghan

2 years ago

7.6k
Responsive Contact Form
Modern Responsive Contact Form Design

Author:
UI-Templates

3 months ago

308
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

7 months ago

1k
Contact page

Author:
Mahir

2 years ago

17.6k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

7 months ago

1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

2 years ago

7k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1k
Visernic Profile

Author:
MD Mostafa Niloy

2 months ago

469
Contact Us
This is contact us page with form

Author:
varniraj vaghela

1 year ago

2.2k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

9 months ago

1.2k
tailwind contact form template
tailwind contact form template

Author:
Ti To

2 years ago

5.8k
Get in touch contact form

Author:
Kris Showen

2 years ago

41.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components