Contact Form

Use the contact form block to let visitors reach out with questions, feedback, or support requests through a simple and clean form layout.

Default Contact Form

Contact Us

Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let us know.

Blade code

<x-fwb.blocks.marketing.contact-form />

Custom Contact Form

Get in Touch

Have a question about our product? Fill out the form below and our team will get back to you within 24 hours.

Blade code

<x-fwb.blocks.marketing.contact-form
    title="Get in Touch"
    description="Have a question about our product? Fill out the form below and our team will get back to you within 24 hours."
    action="/contact"
>
    <div>
        <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Full name</label>
        <input type="text" id="name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="John Doe" required>
    </div>
    <div>
        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
        <input type="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="name@flowbite.com" required>
    </div>
    <div class="sm:col-span-2">
        <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
        <textarea id="message" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Tell us what you need help with..."></textarea>
    </div>
    <button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-blue-700 sm:w-fit hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Send message</button>
</x-fwb.blocks.marketing.contact-form>

Component Properties

ContactForm x-fwb.blocks.marketing.contact-form

Prop Type Default Description
title string 'Contact Us' Heading text displayed above the form.
description string 'Got a technical issue? Want to send feedback...' Subheading text displayed below the title.
action string '#' The form action URL where the form data will be submitted.
slot slot - Form fields and submit button. Rendered inside the <form> element.