Feedback Form with rating input

take users feedback with this simple form

This tailwind example is contributed by Nour Haider, on 19-Jun-2023. Component is made with Tailwind v3.4. It is responsive.

Form

Author Nour Haider

Tailwind v3.4 11.5k 17

Fork Fullscreen

<form class="max-w-md mx-auto mt-16 p-4 bg-white shadow rounded">
    <h2 class="text-2xl font-bold mb-4">Feedback Form</h2>
    <div class="mb-4">
        <label for="name" class="block mb-1">Name</label>
        <input type="text" id="name" class="w-full py-2 px-4 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div class="mb-4">
        <label for="email" class="block mb-1">Email</label>
        <input type="email" id="email" class="w-full py-2 px-4 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div class="mb-4">
        <label class="block mb-1">Rating</label>
        <div class="flex items-center space-x-2">
            <input type="radio" name="rating" id="rating1" value="1" class="focus:outline-none focus:ring-2 focus:ring-blue-500">
            <label for="rating1">1</label>
            <input type="radio" name="rating" id="rating2" value="2" class="focus:outline-none focus:ring-2 focus:ring-blue-500">
            <label for="rating2">2</label>
            <input type="radio" name="rating" id="rating3" value="3" class="focus:outline-none focus:ring-2 focus:ring-blue-500">
            <label for="rating3">3</label>
            <input type="radio" name="rating" id="rating4" value="4" class="focus:outline-none focus:ring-2 focus:ring-blue-500">
            <label for="rating4">4</label>
            <input type="radio" name="rating" id="rating5" value="5" class="focus:outline-none focus:ring-2 focus:ring-blue-500">
            <label for="rating5">5</label>
        </div>
    </div>
    <div class="mb-4">
        <label for="message" class="block mb-1">Message</label>
        <textarea id="message" class="w-full py-2 px-4 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>
    <button type="submit" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</button>
</form>

Related Examples

Survey form
User survey form

JaxStone

3 years ago

17.6k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
Reservation form with fabform.io

Ho O

1 year ago

1.9k
Contact Us / Enquiry-form Responsive

KULDEEP

1 year ago

2.1k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.6k
form Événement
form Événement

Omer fils ELENGA

6 months ago

382
Input output form

Prajwal Hallale

3 years ago

7.8k
Appointment booking form

Leif99

3 years ago

18.5k
Contact me form

Arya

3 years ago

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

Geoffrey Callaghan

2 years ago

8.3k
Age verification 18+

Maxim

1 year ago

1.6k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Fathallah Anass

2 years ago

3.7k