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.7k

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

16.3k
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.8k
login
login by : html , css

Author:
Hacker Development

5 months ago

1.2k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.2k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

6 months ago

875
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.7k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

1 year ago

5.9k
Book appointment form

Author:
Lukas Müller

2 years ago

27.3k
Login oauth Form

Author:
Rihane SOLID SNAKE

4 months ago

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

Author:
Ranit Saha

9 months ago

1.1k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

2 years ago

12.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components