Home
Geoffrey Callaghan
Contact us page

Contact us page

Forked from> @freja-jensen/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. similar terms for this example are Get in touch, Contact form

Author Geoffrey Callaghan

5.6k

Fork Fullscreen

<div class="bg-gray-100">
    <div class="container mx-auto py-12">
        <div class="max-w-lg mx-auto px-4">
            <h2 class="text-3xl font-semibold text-gray-900 mb-4">
                How can we help you
            </h2>
            <p class="text-gray-700 mb-8">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis velit
                eget nisi lobortis dignissim.
            </p>
           <form action="https://fabform.io/f/{form-id}" method="post" class="bg-white rounded-lg px-6 py-8 shadow-md">
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="name">Name</label>
                    <input
                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        id="name" type="text" placeholder="Enter your name">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="email">Email</label>
                    <input
                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        id="email" type="email" placeholder="Enter your email">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="message">Message</label>
                    <textarea
                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        id="message" rows="6" placeholder="Enter your message"></textarea>
                </div>
                <div class="flex justify-end">
                    <button
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="button">
                        Send
                    </button>
                </div>
                   <a href="https://veilmail.io/e/FkKh7o" class="font-medium text-blue-600 hover:underline">Or click here to reveal our protected email address</a>
    
            </form>
        </div>
    </div>
</div>

Related Examples

Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

6 months ago

374
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

455
Get in touch tailwind contact form
Get in touch tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

1.8k
Contact us form template with fabform

Author:
Ho O

6 months ago

831
Contact Form with fabform.io
Contact form

Author:
Ho O

6 months ago

777
Simple contact us form

Author:
Lukas Müller

2 years ago

11.3k
Call Display UI built with Tailwind CSS
Here's a Call Display UI built with Tailwind CSS that mimics an incoming/ongoing call screen with a modern design:

Author:
irahoza daniel

2 months ago

172
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

Author:
SHARIFUL ISLAM

5 months ago

906
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

11 months ago

3k
Get in touch contact form fabform.io
Tailwind contact form that uses fabform.io to save form submissions

Author:
Ho O

6 months ago

665
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components