Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improved feedback form #272

Merged
merged 2 commits into from
Oct 26, 2024
Merged

improved feedback form #272

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
870f2ae
improved feedback form
Sawan-Kushwah Oct 26, 2024
618a353
Merge branch 'main' into enhance/feedback
Anuj3553 Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 85 additions & 59 deletions client/src/component/Footers/Feedback.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { useState } from 'react';

function Feedback(props) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [rating, setRating] = useState(0); // State to manage rating

const handleRatingChange = (value) => {
setRating(value); // Update the rating state
};

const handleSubmit = (e) => {
e.preventDefault();
Expand All @@ -25,86 +30,107 @@ function Feedback(props) {
};

return (
<div className="max-w-10xl mx-auto p-52 bg-white shadow-lg rounded-lg"
style={{
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')`,
<div className="max-w-7xl mx-auto p-10 bg-white shadow-lg rounded-lg relative overflow-hidden mt-28"
style={{
backdropFilter: 'blur(10px)',
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Frosted glass effect
border: '1px solid rgba(255, 255, 255, 0.18)',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
}}
>
<h2 className="text-center text-3xl font-bold text-gray-800 mb-8">We Value Your Feedback</h2>
<form name="submit-to-google-sheet" onSubmit={handleSubmit} className="space-y-6">

{/* Name Field */}
<div>
<label htmlFor="Name" className="block text-sm font-medium text-gray-700">Name:</label>
<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 />
backgroundColor: 'rgba(255, 255, 255, 0.85)', // Frosted glass effect
border: '1px solid rgba(255, 255, 255, 0.2)',
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)'
}}>

<h2 className="text-center text-4xl font-bold text-gray-800 mb-10">We Value Your Feedback</h2>

<form name="submit-to-google-sheet" onSubmit={handleSubmit} className="space-y-8">

{/* Name and Email Fields */}
<div className="flex flex-col sm:flex-row sm:space-x-6">
<div className="flex-1">
<label htmlFor="Name" className="block text-lg font-medium text-gray-700">Name:</label>
<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 />
</div>

<div className="flex-1">
<label htmlFor="Email" className="block text-lg font-medium text-gray-700">Email:</label>
<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 />
</div>
</div>

{/* Email Field */}
<div>
<label htmlFor="Email" className="block text-sm font-medium text-gray-700">Email:</label>
<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 />
{/* Subject or Topic and Date of Visit Fields */}
<div className="flex flex-col sm:flex-row sm:space-x-6">
<div className="flex-1">
<label htmlFor="Subject" className="block text-lg font-medium text-gray-700">Subject or Topic:</label>
<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 />
</div>

<div className="flex-1">
<label htmlFor="Date" className="block text-lg font-medium text-gray-700">Date of Visit:</label>
<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 />
</div>
</div>

{/* Subject or Topic */}
<div>
<label htmlFor="Subject" className="block text-sm font-medium text-gray-700">Subject or Topic:</label>
<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 />
</div>

{/* Date of Visit */}
<div>
<label htmlFor="Date" className="block text-sm font-medium text-gray-700">Date of Visit:</label>
<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 />
</div>

{/* Device Used */}
<div>
<label htmlFor="Device" className="block text-sm font-medium text-gray-700">Device Used:</label>
<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>
<option value="Desktop">Desktop</option>
<option value="Tablet">Tablet</option>
<option value="Mobile">Mobile</option>
</select>
</div>

{/* Rating System */}
<div>
<label htmlFor="Rating" className="block text-sm font-medium text-gray-700">Rating (1-10):</label>
<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" />
{/* Device Used and Priority Level */}
<div className="flex flex-col sm:flex-row sm:space-x-6">
<div className="flex-1">
<label htmlFor="Device" className="block text-lg font-medium text-gray-700">Device Used:</label>
<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>
<option value="Desktop">Desktop</option>
<option value="Tablet">Tablet</option>
<option value="Mobile">Mobile</option>
</select>
</div>

<div className="flex-1">
<label htmlFor="Priority" className="block text-lg font-medium text-gray-700">Priority Level:</label>
<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>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
</div>

{/* Suggestions for Improvement */}
<div>
<label htmlFor="Suggestions" className="block text-sm font-medium text-gray-700">Suggestions for Improvement:</label>
<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>
<label htmlFor="Suggestions" className="block text-lg font-medium text-gray-700">Suggestions for Improvement:</label>
<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>
</div>

{/* Priority Level */}
{/* Feedback Text */}
<div>
<label htmlFor="Priority" className="block text-sm font-medium text-gray-700">Priority Level:</label>
<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>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
<label htmlFor="Feedback" className="block text-lg font-medium text-gray-700">Feedback:</label>
<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>
</div>

{/* Feedback Text */}
<div>
<label htmlFor="Feedback" className="block text-sm font-medium text-gray-700">Feedback:</label>
<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>
{/* Rating System */}
<div className="flex flex-col mb-6">
<label htmlFor="Rating" className="block text-lg font-medium text-gray-700 mb-3">Rating (1-10):</label>

<div className="flex items-center justify-center space-x-4">
{Array.from({ length: 10 }, (_, index) => (
<button
key={index}
type="button"
onClick={() => handleRatingChange(index + 1)}
className={`flex items-center justify-center w-12 h-12 rounded-full transition duration-300 focus:outline-none
${rating === index + 1 ? 'bg-indigo-600 text-white transform scale-110' : 'bg-gray-300 text-gray-600 hover:bg-indigo-500 hover:text-white'}
shadow-md hover:shadow-lg`}
>
{index + 1}
</button>
))}
</div>

<input type="hidden" id="Rating" name="Rating" value={rating} />
</div>

{/* Submit Button */}
<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">
<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">
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
</div>


);
}

Expand Down