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

11.1k

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

3 years ago

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

Author:
Lukas Müller

3 years ago

17.4k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

3k
Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Author:
Ranit Saha

1 year ago

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

Author:
Ti To

2 years ago

8.1k
Login form

Author:
Leon Bachmann

3 years ago

15.2k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

3.1k
Login form

Author:
Aman kumar

2 years ago

4.5k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

11 months ago

1.7k
User registration form

Author:
Leon Bachmann

3 years ago

25.2k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

3.2k
Records Form - HPower
records survey form

Author:
Anonymous

1 year ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components