Skip to content

Added Feedback Form #1418

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

Merged
merged 1 commit into from
Oct 12, 2024
Merged

Added Feedback Form #1418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
75 changes: 75 additions & 0 deletions Website/Feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<link rel="stylesheet" href="css/feedback.css" />
</head>
<body>

<div class="feedback-container">
<h2>Feedback Form</h2>
<p>We appreciate your feedback! Please rate us and leave a comment.</p>

<form id="feedbackForm" action="#" method="post" onsubmit="return handleSubmit(event);">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>

<label class="rate-label">Rate Us:</label>
<div class="star-rating">
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="1 star">★</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2" title="2 stars">★</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3" title="3 stars">★</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4" title="4 stars">★</label>
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="5 stars">★</label>
</div>

<button type="submit">Send Feedback</button>
</form>

<!-- Back to Home Button -->
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
</div>

<script>
function handleSubmit(event) {
event.preventDefault(); // Prevent the default form submission

// You can add logic here to process the form data as needed
// For example, you could send the data to a server using AJAX

// After processing, redirect to the home page
window.location.href = 'index.html';
return false; // Prevent any additional form submission
}

// Highlight stars logic
const stars = document.querySelectorAll('.star-rating input');

stars.forEach(star => {
star.addEventListener('change', () => {
// Reset all stars to gray
stars.forEach(s => s.nextElementSibling.style.color = '#ddd');

// Highlight checked star and all stars to the left
for (let i = 0; i < star.value; i++) {
stars[i].nextElementSibling.style.color = 'gold';
}
});
});
</script>

</body>
</html>
128 changes: 128 additions & 0 deletions Website/css/Feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #160457;
color: #99d6dd;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Feedback Form Container */
.feedback-container {
background-color: rgb(4, 9, 85);
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(243, 246, 246, 0.1);
max-width: 500px;
width: 100%;
text-align: center;
}

.feedback-container h2 {
margin-bottom: 20px;
font-size: 24px;
}

.feedback-container p {
margin-bottom: 30px;
color: #0bc1f9;
}

/* Form Styles */
form {
display: flex;
flex-direction: column;
}

/* Label Styles */
label {
text-align: left;
margin-bottom: 5px;
color: #8fe8f4;
}

/* Input and Textarea Styles */
input[type="text"],
input[type="email"],
textarea {
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}

textarea {
resize: vertical;
}

/* Star Rating Styles */
.star-rating {
display: flex; /* Use flexbox for alignment */
justify-content: center; /* Center the stars */
margin-bottom: 15px; /* Space below the rating */
}

.star-rating input {
display: none; /* Hide the radio inputs */
}

.star-rating label {
font-size: 30px; /* Adjust size of the stars */
color: #ddd; /* Default star color */
cursor: pointer; /* Change cursor on hover */
transition: color 0.3s; /* Smooth color transition */
}

/* Highlight stars when hovered */
.star-rating label:hover,
.star-rating label:hover ~ label {
color: gold; /* Color for hovered stars */
}

/* Button Styles */
button {
background-color: #416f77;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #05d1fa;
}

/* Back to Home Button Styles */
.back-button {
margin-top: 20px;
background-color: #5048eb;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.back-button:hover {
background-color: #06fdfd;
}

/* Rate Us label styles */
.rate-label {
text-align: center; /* Center the text */
font-size: 20px; /* Adjust font size as needed */
margin-bottom: 10px; /* Space below the label */
color: #8fe8f4; /* Set the label color */
}
1 change: 1 addition & 0 deletions Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
<li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
<li><a href="organization">Organization</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/faq">Feedback</a></li>
<li><a href="contact">Contact</a></li>
<!-- Dropdown on navbar -->
<li class="dropdown">
Expand Down
Loading