Categories
28°C, New York
Home CSS Design a Survey Form in Tailwind CSS

Design a Survey Form in Tailwind CSS

Tailwind CSS Divide Style

Link Component in React Router

In this project, we’ll create a survey form using the HTML and style it with the Tailwind CSS. The survey form will collect user information such as name, email, age, role, recommendations known languages and frameworks, and comments or suggestions.

Example: Implemenattion to design a survey form using Tailwind.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>
          Survey Form
      </title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-green-500">
    <h1 class="text-3xl text-center
               text-white font-bold mt-8">
      w3wiki Survey Form
      </h1>
    <form id="form"
          class="bg-white max-w-lg mx-auto
                 mt-8 p-8 rounded-lg shadow-lg">
        <div class="mb-6">
            <label for="name"
                   class="block text-gray-700 font-bold mb-2">
                  Name
              </label>
            <input type="text" id="name"
                   placeholder="Enter your name"
                   required
                   class="appearance-none border rounded w-full py-2
                          px-3 text-gray-700 leading-tight
                          focus:outline-none focus:shadow-outline">
        </div>
        <div class="mb-6">
            <label for="email" class="block text-gray-700 font-bold mb-2">
                  Email
              </label>
            <input type="email" id="email" placeholder="Enter your email"
                   required
                    class="appearance-none border rounded w-full py-2
                               px-3 text-gray-700 leading-tight
                               focus:outline-none focus:shadow-outline">
        </div>
        <div class="mb-6">
            <label for="age"
                   class="block text-gray-700 font-bold mb-2">
                  Age
              </label>
            <input type="text" id="age" placeholder="Enter your age"
                   required
                   class="appearance-none border rounded w-full py-2
                          px-3 text-gray-700 leading-tight
                          focus:outline-none focus:shadow-outline">
        </div>
        <div class="mb-6">
            <label for="role" class="block text-gray-700 font-bold mb-2">
                  Which option best describes you?
              </label>
            <select name="role" id="role"
                    required
                    class="appearance-none border rounded w-full
                           py-2 px-3 text-gray-700 leading-tight
                           focus:outline-none focus:shadow-outline">
                <option value="student">Student</option>
                <option value="intern">Intern</option>
                <option value="professional">Professional</option>
                <option value="other">Other</option>
            </select>
        </div>
        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">
                  Would you recommend w3wiki to a friend?
              </label>
            <div class="flex">
                <label for="recommed-1" class="mr-4">
                    <input type="radio" id="recommed-1"
                           name="recommed" class="mr-2">Yes
                </label>
                <label for="recommed-2" class="mr-4">
                    <input type="radio" id="recommed-2"
                           name="recommed" class="mr-2">No
                </label>
                <label for="recommed-3">
                    <input type="radio" id="recommed-3"
                           name="recommed" class="mr-2">Maybe
                </label>
            </div>
        </div>
        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">
                  Languages and Frameworks known
              </label>
            <div class="grid grid-cols-2 gap-4">
                <label for="inp-1">
                    <input type="checkbox" name="inp" class="mr-2">C
                </label>
                <label for="inp-2">
                    <input type="checkbox" name="inp" class="mr-2">
                      C++
                </label>
                <label for="inp-3">
                    <input type="checkbox" name="inp" class="mr-2">
                      C#
                </label>
                <label for="inp-4">
                    <input type="checkbox" name="inp" class="mr-2">
                      Java
                </label>
                <label for="inp-5">
                    <input type="checkbox" name="inp" class="mr-2">
                      Python
                </label>
                <label for="inp-6">
                    <input type="checkbox" name="inp" class="mr-2">
                      JavaScript
                </label>
                <label for="inp-7">
                    <input type="checkbox" name="inp" class="mr-2">
                      React
                </label>
                <label for="inp-7">
                    <input type="checkbox" name="inp" class="mr-2">
                      Angular
                </label>
                <label for="inp-7">
                    <input type="checkbox" name="inp" class="mr-2">
                      Django
                </label>
                <label for="inp-7">
                    <input type="checkbox" name="inp" class="mr-2">
                      Spring
                </label>
            </div>
        </div>
        <div class="mb-6">
            <label for="comment"
                   class="block text-gray-700 font-bold mb-2">
                  Any comments or suggestions
              </label>
            <textarea name="comment" id="comment"
                      required
                      placeholder="Enter your comment here"
                      class="appearance-none border rounded w-full
                             py-2 px-3 text-gray-700 leading-tight
                             focus:outline-none focus:shadow-outline">
              </textarea>
        </div>
        <button type="submit"
                class="bg-green-600 text-white font-bold py-2
                          px-4 rounded focus:outline-none
                          focus:shadow-outline">Submit
          </button>
    </form>
    <div id="message"
         class="hidden bg-white max-w-lg mx-auto
                mt-8 p-8 rounded-lg shadow-lg">
        <p class="text-2xl text-center text-green-600 font-bold">
              Thank you for submitting the form!
          </p>
    </div>
    <script>
        document.getElementById('form')
              .addEventListener('submit', function (event) {
            event.preventDefault();
            document.getElementById('form').style.display = 'none';
            document.getElementById('message').classList.remove('hidden');
        });
    </script>
</body>
 
</html>
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#CSS
										
										#JavaScript
										
										#Tailwind CSS
										
										#Web Technologies
										
										#Web Templates
										
										

									

									

										

											
											
												
												Tailwind CSS Divide Style
											
											
										

										

											
											
												Link Component in React Router