Skip to content

Commit 7277461

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1418 from Aditijainnn/Feedback
Added Feedback Form
2 parents e06e9de + d4a5edc commit 7277461

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎Website/Feedback.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Feedback Form</title>
7+
<link rel="stylesheet" href="css/feedback.css" />
8+
</head>
9+
<body>
10+
11+
<div class="feedback-container">
12+
<h2>Feedback Form</h2>
13+
<p>We appreciate your feedback! Please rate us and leave a comment.</p>
14+
15+
<form id="feedbackForm" action="#" method="post" onsubmit="return handleSubmit(event);">
16+
<label for="name">Name</label>
17+
<input type="text" id="name" name="name" required>
18+
19+
<label for="email">Email</label>
20+
<input type="email" id="email" name="email" required>
21+
22+
<label for="message">Message</label>
23+
<textarea id="message" name="message" rows="5" required></textarea>
24+
25+
<label class="rate-label">Rate Us:</label>
26+
<div class="star-rating">
27+
<input type="radio" id="star1" name="rating" value="1" />
28+
<label for="star1" title="1 star">★</label>
29+
<input type="radio" id="star2" name="rating" value="2" />
30+
<label for="star2" title="2 stars">★</label>
31+
<input type="radio" id="star3" name="rating" value="3" />
32+
<label for="star3" title="3 stars">★</label>
33+
<input type="radio" id="star4" name="rating" value="4" />
34+
<label for="star4" title="4 stars">★</label>
35+
<input type="radio" id="star5" name="rating" value="5" />
36+
<label for="star5" title="5 stars">★</label>
37+
</div>
38+
39+
<button type="submit">Send Feedback</button>
40+
</form>
41+
42+
<!-- Back to Home Button -->
43+
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
44+
</div>
45+
46+
<script>
47+
function handleSubmit(event) {
48+
event.preventDefault(); // Prevent the default form submission
49+
50+
// You can add logic here to process the form data as needed
51+
// For example, you could send the data to a server using AJAX
52+
53+
// After processing, redirect to the home page
54+
window.location.href = 'index.html';
55+
return false; // Prevent any additional form submission
56+
}
57+
58+
// Highlight stars logic
59+
const stars = document.querySelectorAll('.star-rating input');
60+
61+
stars.forEach(star => {
62+
star.addEventListener('change', () => {
63+
// Reset all stars to gray
64+
stars.forEach(s => s.nextElementSibling.style.color = '#ddd');
65+
66+
// Highlight checked star and all stars to the left
67+
for (let i = 0; i < star.value; i++) {
68+
stars[i].nextElementSibling.style.color = 'gold';
69+
}
70+
});
71+
});
72+
</script>
73+
74+
</body>
75+
</html>

‎Website/css/Feedback.css

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/* General Styles */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #160457;
5+
color: #99d6dd;
6+
margin: 0;
7+
padding: 0;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
}
13+
14+
/* Feedback Form Container */
15+
.feedback-container {
16+
background-color: rgb(4, 9, 85);
17+
padding: 40px;
18+
border-radius: 10px;
19+
box-shadow: 0 0 10px rgba(243, 246, 246, 0.1);
20+
max-width: 500px;
21+
width: 100%;
22+
text-align: center;
23+
}
24+
25+
.feedback-container h2 {
26+
margin-bottom: 20px;
27+
font-size: 24px;
28+
}
29+
30+
.feedback-container p {
31+
margin-bottom: 30px;
32+
color: #0bc1f9;
33+
}
34+
35+
/* Form Styles */
36+
form {
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
41+
/* Label Styles */
42+
label {
43+
text-align: left;
44+
margin-bottom: 5px;
45+
color: #8fe8f4;
46+
}
47+
48+
/* Input and Textarea Styles */
49+
input[type="text"],
50+
input[type="email"],
51+
textarea {
52+
padding: 10px;
53+
margin-bottom: 15px;
54+
border-radius: 5px;
55+
border: 1px solid #ccc;
56+
font-size: 16px;
57+
width: 100%;
58+
box-sizing: border-box;
59+
}
60+
61+
textarea {
62+
resize: vertical;
63+
}
64+
65+
/* Star Rating Styles */
66+
.star-rating {
67+
display: flex; /* Use flexbox for alignment */
68+
justify-content: center; /* Center the stars */
69+
margin-bottom: 15px; /* Space below the rating */
70+
}
71+
72+
.star-rating input {
73+
display: none; /* Hide the radio inputs */
74+
}
75+
76+
.star-rating label {
77+
font-size: 30px; /* Adjust size of the stars */
78+
color: #ddd; /* Default star color */
79+
cursor: pointer; /* Change cursor on hover */
80+
transition: color 0.3s; /* Smooth color transition */
81+
}
82+
83+
/* Highlight stars when hovered */
84+
.star-rating label:hover,
85+
.star-rating label:hover ~ label {
86+
color: gold; /* Color for hovered stars */
87+
}
88+
89+
/* Button Styles */
90+
button {
91+
background-color: #416f77;
92+
color: white;
93+
padding: 12px;
94+
border: none;
95+
border-radius: 5px;
96+
cursor: pointer;
97+
font-size: 16px;
98+
transition: background-color 0.3s ease;
99+
}
100+
101+
button:hover {
102+
background-color: #05d1fa;
103+
}
104+
105+
/* Back to Home Button Styles */
106+
.back-button {
107+
margin-top: 20px;
108+
background-color: #5048eb;
109+
color: white;
110+
padding: 10px 20px;
111+
border: none;
112+
border-radius: 5px;
113+
cursor: pointer;
114+
font-size: 16px;
115+
transition: background-color 0.3s ease;
116+
}
117+
118+
.back-button:hover {
119+
background-color: #06fdfd;
120+
}
121+
122+
/* Rate Us label styles */
123+
.rate-label {
124+
text-align: center; /* Center the text */
125+
font-size: 20px; /* Adjust font size as needed */
126+
margin-bottom: 10px; /* Space below the label */
127+
color: #8fe8f4; /* Set the label color */
128+
}

‎Website/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
<li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
7777
<li><a href="organization">Organization</a></li>
7878
<li><a href="/faq">FAQ</a></li>
79+
<li><a href="/faq">Feedback</a></li>
7980
<li><a href="contact">Contact</a></li>
8081
<!-- Dropdown on navbar -->
8182
<li class="dropdown">

0 commit comments

Comments
 (0)