From 0c838d5b143cd35d9a4981634fbaae17b079d056 Mon Sep 17 00:00:00 2001
From: CchristiNana <139203070+CchristiNana@users.noreply.github.com>
Date: Sun, 12 May 2024 23:19:42 +1000
Subject: [PATCH] create feedback form documentation

---
 astro.config.mjs                              |  4 ++
 .../feedback/feedback form documentation.md   | 52 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/content/docs/feedback/feedback form documentation.md

diff --git a/astro.config.mjs b/astro.config.mjs
index 085f6800..2ba9a33c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -477,6 +477,10 @@ export default defineConfig({
               label: "Feedback",
               link: "feedback/feedback-form",
             },
+            {
+              label: "Feedback form documentation",
+              link: "feedback/feedback-form-documentation",
+            },
           ],
         },
       ],
diff --git a/src/content/docs/feedback/feedback form documentation.md b/src/content/docs/feedback/feedback form documentation.md
new file mode 100644
index 00000000..adc2f16d
--- /dev/null
+++ b/src/content/docs/feedback/feedback form documentation.md	
@@ -0,0 +1,52 @@
+---
+title: Feedback Form Implementation Documentation
+description: Documentation of the feedback form setup for future maintenance and enhancement.
+---
+
+## Feedback Form Implementation Documentation
+
+### Overview
+
+This document outlines the implementation and setup of the feedback form used on the Thoth Tech
+Documentation Website. It is intended to assist future students and developers in understanding the
+current system and to facilitate further development and maintenance.
+
+### Tools Used
+
+- **HTML/CSS** for structuring and styling the form.
+- **JavaScript** for front-end logic.
+- **Web3Forms** for handling form submissions without server-side code.
+- **Node.js** and **Express** for server-side logic in case of future custom backend integration.
+
+### Form Setup and Design
+
+The feedback form is designed to be simple yet functional, enabling users to quickly provide their
+feedback on the Thoth Tech Documentation Website. It includes fields for user identification,
+feedback content, and ratings:
+
+- **Name**: Allows the user to enter their name.
+- **Email**: Allows the user to enter their email for follow-ups.
+- **Feedback Type**: Users can select whether they are submitting a general suggestion or specific
+  improvement ideas.
+- **Rating**: Users can rate their experience using star ratings.
+- **Comments**: A textarea for additional comments.
+
+### Integration with Web3Forms
+
+Web3Forms is used to manage form submissions. This service was selected for its simplicity and the
+ability to handle form submissions without the need for additional backend code, making it ideal for
+projects with limited server-side interaction:
+
+#### How to Configure Web3Forms
+
+1. **API Key**: An API key is required from Web3Forms, which is included in the form's hidden input
+   field to authenticate requests.
+2. **Form Action**: The form's `action` attribute is set to the Web3Forms endpoint URL.
+3. **Method**: POST method is used to send data to the Web3Forms service.
+
+```html
+<form action="https://api.web3forms.com/submit" method="post">
+  <input type="hidden" name="access_key" value="your_access_key_here" />
+  <!-- Additional form fields -->
+</form>
+```