Skip to content

Commit 2264796

Browse files
Anuj3553Anuj3553
authored
Merge pull request #272 from Sawan-Kushwah/enhance/feedback
Improved feedback form #272
2 parents 81727fc + 618a353 commit 2264796

File tree

1 file changed

+85
-59
lines changed

1 file changed

+85
-59
lines changed

‎client/src/component/Footers/Feedback.jsx

+85-59
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import { useState } from 'react';
33

44
function Feedback(props) {
55
const [isSubmitting, setIsSubmitting] = useState(false);
6+
const [rating, setRating] = useState(0); // State to manage rating
7+
8+
const handleRatingChange = (value) => {
9+
setRating(value); // Update the rating state
10+
};
611

712
const handleSubmit = (e) => {
813
e.preventDefault();
@@ -25,86 +30,107 @@ function Feedback(props) {
2530
};
2631

2732
return (
28-
<div className="max-w-10xl mx-auto p-52 bg-white shadow-lg rounded-lg"
29-
style={{
30-
backgroundImage: `url('https://static.vecteezy.com/system/resources/previews/007/353/647/large_2x/blue-wrinkled-paper-background-with-abstract-seamless-pattern-crumpled-paper-texture-photo.jpg')`,
33+
<div className="max-w-7xl mx-auto p-10 bg-white shadow-lg rounded-lg relative overflow-hidden mt-28"
34+
style={{
3135
backdropFilter: 'blur(10px)',
32-
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Frosted glass effect
33-
border: '1px solid rgba(255, 255, 255, 0.18)',
34-
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
35-
}}
36-
>
37-
<h2 className="text-center text-3xl font-bold text-gray-800 mb-8">We Value Your Feedback</h2>
38-
<form name="submit-to-google-sheet" onSubmit={handleSubmit} className="space-y-6">
39-
40-
{/* Name Field */}
41-
<div>
42-
<label htmlFor="Name" className="block text-sm font-medium text-gray-700">Name:</label>
43-
<input type="text" id="Name" name="Name" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Enter your name *" required />
36+
backgroundColor: 'rgba(255, 255, 255, 0.85)', // Frosted glass effect
37+
border: '1px solid rgba(255, 255, 255, 0.2)',
38+
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)'
39+
}}>
40+
41+
<h2 className="text-center text-4xl font-bold text-gray-800 mb-10">We Value Your Feedback</h2>
42+
43+
<form name="submit-to-google-sheet" onSubmit={handleSubmit} className="space-y-8">
44+
45+
{/* Name and Email Fields */}
46+
<div className="flex flex-col sm:flex-row sm:space-x-6">
47+
<div className="flex-1">
48+
<label htmlFor="Name" className="block text-lg font-medium text-gray-700">Name:</label>
49+
<input type="text" id="Name" name="Name" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" placeholder="Enter your name *" required />
50+
</div>
51+
52+
<div className="flex-1">
53+
<label htmlFor="Email" className="block text-lg font-medium text-gray-700">Email:</label>
54+
<input type="email" id="Email" name="Email" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" placeholder="Enter your email *" required />
55+
</div>
4456
</div>
4557

46-
{/* Email Field */}
47-
<div>
48-
<label htmlFor="Email" className="block text-sm font-medium text-gray-700">Email:</label>
49-
<input type="email" id="Email" name="Email" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Enter your email *" required />
58+
{/* Subject or Topic and Date of Visit Fields */}
59+
<div className="flex flex-col sm:flex-row sm:space-x-6">
60+
<div className="flex-1">
61+
<label htmlFor="Subject" className="block text-lg font-medium text-gray-700">Subject or Topic:</label>
62+
<input type="text" id="Subject" name="Subject" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" placeholder="Specify the subject (e.g., design, content)" required />
63+
</div>
64+
65+
<div className="flex-1">
66+
<label htmlFor="Date" className="block text-lg font-medium text-gray-700">Date of Visit:</label>
67+
<input type="date" id="Date" name="Date" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" required />
68+
</div>
5069
</div>
5170

52-
{/* Subject or Topic */}
53-
<div>
54-
<label htmlFor="Subject" className="block text-sm font-medium text-gray-700">Subject or Topic:</label>
55-
<input type="text" id="Subject" name="Subject" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Specify the subject (e.g., design, content)" required />
56-
</div>
57-
58-
{/* Date of Visit */}
59-
<div>
60-
<label htmlFor="Date" className="block text-sm font-medium text-gray-700">Date of Visit:</label>
61-
<input type="date" id="Date" name="Date" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required />
62-
</div>
63-
64-
{/* Device Used */}
65-
<div>
66-
<label htmlFor="Device" className="block text-sm font-medium text-gray-700">Device Used:</label>
67-
<select id="Device" name="Device" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required>
68-
<option value="Desktop">Desktop</option>
69-
<option value="Tablet">Tablet</option>
70-
<option value="Mobile">Mobile</option>
71-
</select>
72-
</div>
73-
74-
{/* Rating System */}
75-
<div>
76-
<label htmlFor="Rating" className="block text-sm font-medium text-gray-700">Rating (1-10):</label>
77-
<input type="range" id="Rating" name="Rating" min={1} max={10} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg focus:outline-none bg-white bg-opacity-70" />
71+
{/* Device Used and Priority Level */}
72+
<div className="flex flex-col sm:flex-row sm:space-x-6">
73+
<div className="flex-1">
74+
<label htmlFor="Device" className="block text-lg font-medium text-gray-700">Device Used:</label>
75+
<select id="Device" name="Device" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" required>
76+
<option value="Desktop">Desktop</option>
77+
<option value="Tablet">Tablet</option>
78+
<option value="Mobile">Mobile</option>
79+
</select>
80+
</div>
81+
82+
<div className="flex-1">
83+
<label htmlFor="Priority" className="block text-lg font-medium text-gray-700">Priority Level:</label>
84+
<select id="Priority" name="Priority" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" required>
85+
<option value="Low">Low</option>
86+
<option value="Medium">Medium</option>
87+
<option value="High">High</option>
88+
</select>
89+
</div>
7890
</div>
7991

8092
{/* Suggestions for Improvement */}
8193
<div>
82-
<label htmlFor="Suggestions" className="block text-sm font-medium text-gray-700">Suggestions for Improvement:</label>
83-
<textarea id="Suggestions" name="Suggestions" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" rows="4" placeholder="Provide suggestions for improvement" required></textarea>
94+
<label htmlFor="Suggestions" className="block text-lg font-medium text-gray-700">Suggestions for Improvement:</label>
95+
<textarea id="Suggestions" name="Suggestions" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" rows="4" placeholder="Provide suggestions for improvement" required></textarea>
8496
</div>
8597

86-
{/* Priority Level */}
98+
{/* Feedback Text */}
8799
<div>
88-
<label htmlFor="Priority" className="block text-sm font-medium text-gray-700">Priority Level:</label>
89-
<select id="Priority" name="Priority" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required>
90-
<option value="Low">Low</option>
91-
<option value="Medium">Medium</option>
92-
<option value="High">High</option>
93-
</select>
100+
<label htmlFor="Feedback" className="block text-lg font-medium text-gray-700">Feedback:</label>
101+
<textarea id="Feedback" name="Feedback" className="mt-2 p-4 py-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-600 focus:border-indigo-600 sm:text-lg bg-white bg-opacity-90 transition duration-200 ease-in-out" rows="4" placeholder="Enter your feedback here" required></textarea>
94102
</div>
95103

96-
{/* Feedback Text */}
97-
<div>
98-
<label htmlFor="Feedback" className="block text-sm font-medium text-gray-700">Feedback:</label>
99-
<textarea id="Feedback" name="Feedback" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" rows="4" placeholder="Enter your feedback here" required></textarea>
104+
{/* Rating System */}
105+
<div className="flex flex-col mb-6">
106+
<label htmlFor="Rating" className="block text-lg font-medium text-gray-700 mb-3">Rating (1-10):</label>
107+
108+
<div className="flex items-center justify-center space-x-4">
109+
{Array.from({ length: 10 }, (_, index) => (
110+
<button
111+
key={index}
112+
type="button"
113+
onClick={() => handleRatingChange(index + 1)}
114+
className={`flex items-center justify-center w-12 h-12 rounded-full transition duration-300 focus:outline-none
115+
${rating === index + 1 ? 'bg-indigo-600 text-white transform scale-110' : 'bg-gray-300 text-gray-600 hover:bg-indigo-500 hover:text-white'}
116+
shadow-md hover:shadow-lg`}
117+
>
118+
{index + 1}
119+
</button>
120+
))}
121+
</div>
122+
123+
<input type="hidden" id="Rating" name="Rating" value={rating} />
100124
</div>
101125

102126
{/* Submit Button */}
103-
<button type="submit" disabled={isSubmitting} className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
127+
<button type="submit" disabled={isSubmitting} className="w-full py-3 px-4 border border-transparent text-lg font-medium rounded-md shadow-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-200 ease-in-out">
104128
{isSubmitting ? 'Submitting...' : 'Submit'}
105129
</button>
106130
</form>
107131
</div>
132+
133+
108134
);
109135
}
110136

0 commit comments

Comments
 (0)