add HTML form submission to netlify

Author: xeniape

src/js/08-feedback.js

@@ -33,9 +33,27 @@
   feedbackFormSubmitButton.addEventListener('click', submitFeedback)
 
   function submitFeedback (e) {
+    e.preventDefault()
     feedbackFormSubmitButton.classList.add('selected')
 
-    // TODO: Submit feedback to backend, alternatively let netlify handle it
+    var feedbackFormOptionButtonSelected = document.querySelector('.feedback-form-button.selected')
+    if (!feedbackFormOptionButtonSelected) return
+
+    const feedbackForm = document.querySelector('.feedback-section form')
+    if (!feedbackForm) return
+    const feedbackFormData = new FormData(feedbackForm)
+
+    feedbackFormData.append('feedback-option', feedbackFormOptionButtonSelected.value)
+
+    console.log(feedbackFormData)
+
+    fetch("/", {
+       method: "POST",
+       headers: { "Content-Type": "application/x-www-form-urlencoded" },
+       body: new URLSearchParams(feedbackFormData).toString()
+    })
+    .then(() => console.log("Form successfully submitted"))
+    .catch(error => alert(error))
 
     feedbackFormSubmitButton.innerText = 'Submitted'
     feedbackFormSubmitButton.disabled = true

src/partials/feedback-form.hbs

@@ -7,8 +7,8 @@
             </label>
         </div>
         <div class="feedback-form-options">
-            <button class="feedback-form-button" type="button" name="feedback-yes" aria-label="The article was helpful">Yes</button>
-            <button class="feedback-form-button" type="button" name="feedback-no" aria-label="The article was not helpful">No</button>
+            <button class="feedback-form-button" type="button" value="page-helpful" aria-label="The page was helpful">Yes</button>
+            <button class="feedback-form-button" type="button" value="page-not-helpful" aria-label="The page was not helpful">No</button>
         </div>
         <div class="feedback-form-text hide">
             <textarea name="feedback-text" placeholder="Tell us what you liked or didn't like (optional)" rows="3"></textarea>