Merge pull request #1 from JakeSCahill/forms

Implement feedback form modal

Author: JakeSCahill

src/css/feedback-form.css

@@ -39,11 +39,13 @@
   margin-bottom: 20px;
 }
 
-.form-field.submit {
-  margin: auto;
+.form-field.wrapper {
+  margin: 0 auto;
+  text-align: center;
 }
 
-button[type=submit] {
+button[type=submit],
+button.close {
   background-color: var(--link-font-color);
   border: 1px solid #dadce0;
   border-radius: 8px;

src/partials/feedback-forms.hbs

@@ -40,7 +40,7 @@
           <textarea id="otherText" name="otherText" rows="4" cols="50" placeholder="Please share details or suggestions for this topic."></textarea>
         </div>
       </div>
-      <div class="form-field submit">
+      <div class="form-field wrapper">
         <button type="submit" class="button">Submit</button>
       </div>
     </div>
@@ -90,60 +90,11 @@
           <textarea id="otherText" name="otherText" rows="4" cols="50" placeholder="Please share details or suggestions for this topic."></textarea>
         </div>
       </div>
-      <div class="form-field submit">
+      <div class="form-field wrapper">
         <button type="submit" class="button">Submit</button>
       </div>
     </div>
   </div>
   <div class="modal-overlay" id="modal-overlay">
   </div>
-</form>
-<script>
-function encode(data) {
-  return Object.keys(data)
-    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
-    .join("&");
-}
-
-const handleSubmit = function (e) {
-  e.preventDefault();
-  console.log(e)
-  const currentUrl = '{{{ or site.url siteRootPath }}}{{{ page.url }}}'
-  const beta = {{ is-beta page }}
-  const version = {{ page.attributes.version }}
-
-  var formData = {}
-  formData.version = version
-  formData.url = currentUrl
-  formData.beta = beta
-
-  const form = e.target.closest('form')
-  const feedback = form.querySelector('input[name="feedback"]:checked').value
-
-  formData.positiveFeedback = feedback
-  formData.otherText = form.querySelector('textarea[name="otherText"]').value
-
-  formData.email = form.querySelector('input[name="email"]').value
-
-  formData.date = new Date().toISOString()
-  formData.navigator = JSON.stringify({
-    appName: window.navigator.appName,
-    appVersion: window.navigator.appVersion,
-    platform: window.navigator.platform,
-    userAgent: window.navigator.userAgent,
-    language: window.navigator.language
-  })
-
-  fetch('/', {
-    method: 'POST',
-    headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    body: encode(formData)
-  })
-    .then(() => {
-      console.log('Form submission success')
-    })
-    .catch(error => {
-      console.error('Form submission error:', error)
-    })
-}
-</script>
+</form>

src/partials/feedback-success-modal.hbs

@@ -0,0 +1,8 @@
+<div class="form-field wrapper">
+  <span class="material-icons MuiIcon-root" aria-hidden="true" style="color: green;overflow: hidden;width: 1em;height: 1em;font-size: 4em;">checkmark</span>
+  <h4>Thank you for your feedback!</h4>
+  <p>We appreciate your input and will use it to improve our documentation.</p>
+  <div class="form-field wrapper">
+    <button onclick="closeForm(event)" class="button close">Close</button>
+  </div>
+</div>

src/partials/footer-scripts.hbs

@@ -34,18 +34,78 @@ docsearch({
 });
 </script>
 {{/if}}
+{{#if page.version }}
 <script>
 const thumbs = document.querySelectorAll('.thumb');
 const positiveModal = document.getElementById('positive');
 const negativeModal = document.getElementById('negative');
+var currentForm;
 
 thumbs.forEach(function(thumb) {
   thumb.addEventListener('click', function() {
     if (thumb.id.indexOf('up') !== -1) {
       positiveModal.classList.toggle("hidden");
+      currentForm = positiveModal
     } else if (thumb.id.indexOf('down') !== -1) {
       negativeModal.classList.toggle("hidden");
+      currentForm = negativeModal
     }
   });
 });
-</script>
+</script>
+<script>
+const handleSubmit = function (e) {
+  e.preventDefault();
+  const currentUrl = '{{{ or site.url siteRootPath }}}{{{ page.url }}}'
+  const beta = {{ is-beta page }}
+  const version = {{ page.attributes.version }}
+
+  const form = event.target;
+  var formData = new FormData(form);
+
+  formData.set('version', version)
+  formData.set('url', currentUrl)
+  formData.set('beta', beta)
+
+  const formFields = e.target.closest('form')
+  const feedback = formFields.querySelector('input[name="feedback"]:checked').value
+
+  formData.set('positiveFeedback', feedback)
+  formData.set('otherText', (form.querySelector('textarea[name="otherText"]').value))
+
+  formData.set('email', (form.querySelector('input[name="email"]').value))
+
+  formData.set('date', new Date().toISOString())
+  formData.set('navigator', JSON.stringify({
+    appName: window.navigator.appName,
+    appVersion: window.navigator.appVersion,
+    platform: window.navigator.platform,
+    userAgent: window.navigator.userAgent,
+    language: window.navigator.language
+  }))
+
+  fetch("/", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams(formData).toString(),
+  }).then(() => {
+      console.log('Form submission success')
+      clearFeedbackModal()
+    })
+    .catch(error => {
+      console.error('Form submission error:', error)
+    })
+}
+function clearFeedbackModal() {
+  var modalBody = currentForm.querySelector('.feedback-modal-body');
+  modalBody.innerHTML = `
+  {{> feedback-success-modal}}
+  `;
+}
+
+function closeForm(e) {
+  e.preventDefault()
+  currentForm.classList.toggle("hidden");
+}
+</script>
+{{/if}}