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

Feedback form page creation shiyu #69

Merged
merged 5 commits into from
May 21, 2024
Merged

Feedback form page creation shiyu #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3feaca1
feedback page creation
CchristiNana Apr 15, 2024
b66a41e
Update feedback form.md
CchristiNana Apr 15, 2024
5536c1f
feedback form creation
CchristiNana Apr 28, 2024
d1e8a33
update
CchristiNana May 5, 2024
502f51a
fix star rating order
CchristiNana May 5, 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
9 changes: 9 additions & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,15 @@ export default defineConfig({
},
],
},
{
label: "Feedback",
items: [
{
label: "Feedback",
link: "feedback/feedback-form",
},
],
},
],
}),
],
Expand Down
96 changes: 96 additions & 0 deletions public/feedbackform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!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>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
background: #fff;
padding: 20px;
}
h1, p {
text-align: center;
}
.star-rating {
text-align: center;
font-size: 0;
display: flex;
flex-direction: row-reverse; /* Reverse the order of children */
justify-content: center;
}
.star-rating input {
display: none;
}
.star-rating label {
font-size: 40px;
padding: 10px;
color: #d3d3d3;
}
.star-rating input:checked ~ label {
color: #ffd700;
}
.feedback-form {
text-align: center;
}
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
width: 90%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
.feedback-form input[type="submit"] {
background-color: #5f27cd;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.feedback-form input[type="submit"]:hover {
background-color: #341f97;
}
</style>
</head>
<body>
<div class="container">
<h1>Feedback Page</h1>
<p>We would love your feedback</p>
<p>Our goal is to make a platform that simplifies your workday. You’ve been using Thoth Tech Documentation Website for a while now, and we’d love to know what you think about it. We really appreciate your feedback!</p>

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

<form class="feedback-form" action="/submitsuccess.html" method="post">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<div>
<input type="radio" id="suggestion" name="feedback_type" value="suggestion" checked />
<label for="suggestion">Suggestion</label>
<input type="radio" id="improvement" name="feedback_type" value="improvement" />
<label for="improvement">Improvement Idea</label>
</div>
<textarea name="comment" placeholder="Add your feedback" rows="4" required></textarea>
<input type="submit" value="SUBMIT" />
</form>
</div>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions public/submitsuccess.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Submitted</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
background: #fff;
padding: 20px;
}
h1, p {
text-align: center;
}
.feedback-message {
background-color: #ffc0cb; /* Light pink background */
color: #333;
padding: 20px;
margin: 30px 0;
border-radius: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Feedback Submitted</h1>
<p>We would love your feedback</p>
<p>Our goal is to make a platform that simplifies your workday. You’ve been using Thoth Tech Documentation Website for a while now, and we’d love to know what you think about it. We really appreciate your feedback!</p>

<div class="feedback-message">
<h2>Thanks for sharing your feedback with us</h2>
<p>Your feedback has been submitted successfully.</p>
<p>Your input is valuable to us and will help us improve our services.</p>
</div>
</div>
</body>
</html>
40 changes: 40 additions & 0 deletions src/content/docs/feedback/feedback form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: Feedback Form
description: a way to provide feedback
---

#### We Value Your Feedback

Thank you for choosing to share your thoughts with us. Your feedback helps us improve and continue
providing the best experience possible.

#### How to Provide Feedback

You have several options for sending us your feedback. Please choose the one that suits you best:

##### Option 1: Fill Out Our Online Form

Please fill out our detailed feedback form available at [Our Feedback Form](/feedbackform.html). It
only take a few minutes!

##### Option 2: Contact your team leader or senior students

If you have specific feedback or concerns that require direct communication, please reach out to
your team leader or seniro students. This ensures that your feedback is addressed promptly and
personally.

---

#### What Happens Next?

After you submit your feedback:

- **We Review It:** All feedback is reviewed by our team to understand your needs and requirements.
- **We Plan:** We plan improvements based on the feedback we receive from you and other users.
- **We Implement:** We try out best to implement changes and improvements continuously to enhance
your experience.

Your input is incredibly valuable to us, and we appreciate the time you take to help us improve. If
you have any immediate concerns, please don't hesitate to contact our company operation team.

Thank you for your contribution!
Loading