Simple contact us form

This tailwind example is contributed by Lukas Müller, on 22-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Lukas Müller

Tailwind v3.4 12.7k 19

Fork Fullscreen

<div class="flex items-center justify-center p-12">
    
    
    <div class="mx-auto w-full max-w-[550px] bg-white">
        <form action="https://formbold.com/s/FORM_ID" method="POST">
            <div class="mb-5">
                <label for="name" class="mb-3 block text-base font-medium text-[#07074D]">
                    Full Name
                </label>
                <input type="text" name="name" id="name" placeholder="Full Name"
                    class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
            </div>
            <div class="mb-5">
                <label for="email" class="mb-3 block text-base font-medium text-[#07074D]">
                    Email Address
                </label>
                <input type="email" name="email" id="email" placeholder="example@domain.com"
                    class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
            </div>
            <div class="mb-5">
                <label for="subject" class="mb-3 block text-base font-medium text-[#07074D]">
                    Subject
                </label>
                <input type="text" name="subject" id="subject" placeholder="Enter your subject"
                    class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
            </div>
            <div class="mb-5">
                <label for="message" class="mb-3 block text-base font-medium text-[#07074D]">
                    Message
                </label>
                <textarea rows="4" name="message" id="message" placeholder="Type your message"
                    class="w-full resize-none rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"></textarea>
            </div>
            <div>
                <button
                    class="hover:shadow-form rounded-md bg-[#6A64F1] py-3 px-8 text-base font-semibold text-white outline-none">
                    Submit
                </button>
            </div>
        </form>
    </div>
</div>