Home
Nour Haider
Feedback Form with rating input

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 CSS v3. It is responsive.

Form

Author Nour Haider

10.2k

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

Author:
JaxStone

2 years ago

15.4k
Contact Form

Author:
Sophia Baker

2 years ago

9.9k
update user
it is the layout for creating an event

Author:
seth dridi

10 months ago

1.4k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

4 weeks ago

94
Simple contact us form

Author:
Lukas Müller

2 years ago

11.2k
Simple Form 2

Author:
Mr Robot

2 years ago

9.9k
Large File upload input

Author:
Akshay

2 years ago

13.6k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

11k
Waitlist signup form

Author:
Anonymous

1 year ago

3.8k
Text Rpg UI

Author:
Crimson

5 months ago

693
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

4 weeks ago

42
Login form

Author:
Leon Bachmann

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components