Skip to content

Commit

Permalink
Upgraded the feedback form and its UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jay-1409
Jay-1409 committed Oct 12, 2024
1 parent e2cad68 commit d04724d
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 59 deletions.
114 changes: 84 additions & 30 deletions client/src/component/Footers/Feedback.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import '../css/Feedback.css'; // Import CSS file for styling
import PropTypes from 'prop-types';
import { useState } from 'react';

Expand All @@ -7,48 +6,103 @@ function Feedback(props) {

const handleSubmit = (e) => {
e.preventDefault();
if (isSubmitting) return; // If already submitting, do nothing
setIsSubmitting(true); // Set isSubmitting to true to disable the button
if (isSubmitting) return;
setIsSubmitting(true);

const scriptURL = 'https://script.google.com/macros/s/AKfycbxJzYGZE0R6W2ZLGbJZlUoxNwWShpAYhcJY4zBM9LOycb7iiM4vncS1fbSpVnIXwKIU/exec';
const form = document.forms['submit-to-google-sheet'];

fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
form.reset();
setIsSubmitting(false); // Re-enable the button
props.showAlert("Form Submitted Successfully", "success");
console.log('Success!', response);
setIsSubmitting(false);
props.showAlert("Feedback Submitted Successfully", "success");
})
.catch(error => {
setIsSubmitting(false); // Re-enable the button
props.showAlert("Form Submission Failed", "danger");
console.error('Error!', error.message);
setIsSubmitting(false);
props.showAlert("Feedback Submission Failed", "danger");
});
};

return (
<div className='feedback-main-box'>
<h2 className="text-center Heading-Page">Feedback</h2>
<form className="feedback-container container mt-4" name="submit-to-google-sheet" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="Name" className="form-label">Name:</label>
<input type="text" id="Name" name='Name' className="form-control" placeholder='Enter your name here *' required='true' />
</div>
<div className="mb-3">
<label htmlFor="Email" className="form-label">Email:</label>
<input type="email" id="Email" name='Email' className="form-control" placeholder='Enter your email here' required='true' />
</div>
<div className="mb-3">
<label htmlFor="Rating" className="form-label">Rating &nbsp;(1-10):</label>
<input type="number" id="Rating" name='Rating' className="form-control" placeholder='Enter your rating here' min={0} max={10}/>
</div>
<div className="mb-3">
<label htmlFor="Feedback" className="form-label">Feedback:</label>
<textarea
id="Feedback" className="form-control" name='Feedback' rows="5" placeholder='Enter your feedback here' required='true' ></textarea>
</div>
<button className="btn btn-primary" type="submit" disabled={isSubmitting} style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black', outline: props.mode=== 'dark' ? '2px solid white': '2px solid black'}}>Submit</button>
<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')`,
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 />
</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 />
</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" />
</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>
</div>

{/* Priority Level */}
<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>
</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>
</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">
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
</div>
);
Expand Down
84 changes: 55 additions & 29 deletions client/src/component/css/Feedback.css
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,66 @@
.rating-container {
.feedback-main-box {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

.heading-page {
font-size: 2.5rem;
margin-bottom: 20px;
color: #333;
}

.feedback-container {
display: flex;
justify-content: center;
/* Add space between rating buttons */
gap: 10px;
flex-direction: column;
}

.star {
background-color: transparent;
border: none;
font-size: 50px;
cursor: pointer;
/* Smooth transition for color change */
transition: color 0.3s ease;
.form-group {
margin-bottom: 15px;
}

.star:hover,
.star.active {
/* Change color to gold on hover and when active */
color: gold;
.form-label {
font-weight: bold;
margin-bottom: 5px;
color: #555;
}

.feedback-main-box {
margin-top: 100px;
margin-bottom: 40px;
.form-control {
width: 100%;
padding: 10px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ddd;
transition: border-color 0.2s ease;
}

.feedback-container {
/* Add border to the container */
border: 2px solid #ccc;
/* Add padding to the container */
padding: 20px;
/* Add border radius for rounded corners */
border-radius: 8px;
.form-control:focus {
border-color: #4a90e2;
outline: none;
}

.form-label {
/* Make form labels bold */
font-weight: bold;
}
.form-range {
width: 100%;
}

.btn-submit {
padding: 12px 20px;
font-size: 1.2rem;
border: none;
border-radius: 5px;
background-color: #4a90e2;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-submit:disabled {
background-color: #aaa;
}

.btn-submit:hover {
background-color: #357ABD;
}

0 comments on commit d04724d

Please sign in to comment.