<!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=
rel="stylesheet">
</head>
<body class="bg-green-500">
<h1 class="text-3xl text-center
text-white font-bold mt-8">
GeeksforGeeks 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 GeeksforGeeks 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>