modified the contact form

diff --git a/assets/js/contact.js b/assets/js/contact.js
index 020d0e7caf7d09cd63e7dc415d142e0c78e64c29..2aa5dde6c16f95910b18b43d16cc5e95a698e4c3 100644 (file)
--- a/assets/js/contact.js
+++ b/assets/js/contact.js
@@ -8,13 +8,15 @@
   'use strict';
 
   const form = document.querySelector('.contact-form');
-  const button = form.querySelector('.form-submit');
+  const submit_button = form.querySelector('.form-submit');
+  const reset_button = form.querySelector('.form-reset');
   const action = form.getAttribute('data-protect');
   const body = document.querySelector('body');
 
   function activateForm() {
     form.setAttribute('action', action);
-    button.removeAttribute('disabled');
+    submit_button.removeAttribute('disabled');
+    reset_button.removeAttribute('disabled');
   }
 
   // Display the hidden form.
@@ -32,7 +34,10 @@
   });
 
   // Mark the form as submitted.
-  button.addEventListener('click', () => form.classList.add('js-submitted'));
+  submit_button.addEventListener('click', () => form.classList.add('js-submitted'));
+
+  // Reset the form with the clear button
+  reset_button.addEventListener('click', () => form.reset());
 
   // Display messages.
   if (location.search.substring(1) !== '') {

diff --git a/assets/sass/layout/_contact.scss b/assets/sass/layout/_contact.scss
index f224d4add94fb724e5b08fa69a5e7bbd733bb2b2..08344466cf490a5fcf424f26490bd223011c1ff8 100644 (file)
--- a/assets/sass/layout/_contact.scss
+++ b/assets/sass/layout/_contact.scss
@@ -10,7 +10,7 @@
                border-bottom: solid 1px _palette_light(border);\r
                overflow-x: hidden;\r
                @media screen and (prefers-color-scheme: dark) {\r
-                       border-bottom: solid 1px _palette_dark(border);\r
+                       border-bottom: solid 1px _palette_dark(fg-light);\r
                }\r
 \r
                > .inner {\r
@@ -22,7 +22,7 @@
                                border-right: solid 1px _palette_light(border);\r
                                width: 60%;\r
                                @media screen and (prefers-color-scheme: dark) {\r
-                                       border-right: solid 1px _palette_dark(border);\r
+                                       border-right: solid 1px _palette_dark(fg-light);\r
                                }\r
                        }\r
 \r
@@ -47,7 +47,7 @@
                                                top: 0;\r
                                                width: calc(100vw + 3em);\r
                                                @media screen and (prefers-color-scheme: dark) {\r
-                                                       border-top: solid 1px _palette_dark(border);\r
+                                                       border-top: solid 1px _palette_dark(fg-light);\r
                                                }\r
                                        }\r
                                }\r

diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html
index 21e23f34db306e5c889a109d963fbeb1e483629e..8430813166e53766b3a075d8260cb441a11ae180 100644 (file)
--- a/layouts/shortcodes/contact.html
+++ b/layouts/shortcodes/contact.html
@@ -1,16 +1,51 @@
-<p class="error message js-hidden">{{ i18n "js_required" }}</p>
-<p class="contact-submitted status message hidden">{{ i18n "contact_submitted" }}</p>
-<p class="contact-error error message hidden">{{ i18n "contact_error" }}</p>
+<section id="contact">
+  <div class="inner">
+    <section>
+
+      <p class="error message js-hidden">{{ i18n "js_required" }}</p>
+      <p class="contact-submitted status message hidden">{{ i18n "contact_submitted" }}</p>
+      <p class="contact-error error message hidden">{{ i18n "contact_error" }}</p>
+
+      <form class="contact-form hidden" data-protect="/php/contact.php" action="#" method="post" accept-charset="UTF-8">
+        <div class="fields">
+          <div class="field half">
+            <label for="edit-name">Name:</label>
+            <input type="text" id="edit-name" name="name" placeholder="Insert your name" required autofocus>
+          </div>
+          <div class="field half">
+            <label for="edit-mail">Email:</label>
+            <input type="email" id="edit-mail" name="email" placeholder="your email address" required>
+          </div>
+          <div class="field">
+            <label for="edit-subject">What are we talking about?</label>
+            <input type="text" id="edit-subject" name="subject" placeholder="add a subject" required>
+          </div>
+          <div class="field">
+            <label for="edit-message">Tell me everything :)</label>
+            <textarea id="edit-message" name="message" rows="5" placeholder="Insert your message here" required></textarea>
+          </div>
+        </div>
+        <input type="text" id="edit-url" class="hidden" name="url" placeholder="your website">
+        <ul class="actions">
+          <li><input type="submit" name="submit" class="form-submit primary" disabled value="Send Message" /></li>
+          <li><input type="reset" name="reset" class="form-reset" disabled value="clear" /></li>
+        </ul>
+        
+      </form>
+
+
+    </section>
+    <section class="split">
+      <section>
+        <div class="contact-method">
+          <span class="icon solid alt fa-envelope"></span>
+          <h3>Reach out to me</h3>
+          <p>I'm here to help, if you need to talk to me feel free to reach out and tell me whatever you need help with, I'll be happy to find some time to discuss the matter with you!</p>
+        </div>
+      </section>
+    </section>
+  </div>
+</section>
+
+
 
-<form class="contact-form hidden" data-protect="/php/contact.php" action="#" method="post" accept-charset="UTF-8">
-  <label for="edit-name">{{ i18n "contact_name" }}</label>
-  <input type="text" id="edit-name" name="name" placeholder="{{ i18n "contact_name_placeholder" }}" required autofocus>
-  <label for="edit-mail">{{ i18n "contact_mail" }}</label>
-  <input type="email" id="edit-mail" name="email" placeholder="{{ i18n "contact_mail_placeholder" }}" required>
-  <input type="text" id="edit-url" class="hidden" name="url" placeholder="{{ i18n "contact_honeypot" }}">
-  <label for="edit-subject">{{ i18n "contact_subject" }}</label>
-  <input type="text" id="edit-subject" name="subject" placeholder="{{ i18n "contact_subject_placeholder" }}" required>
-  <label for="edit-message">{{ i18n "contact_message" }}</label>
-  <textarea id="edit-message" name="message" rows="5" placeholder="{{ i18n "contact_message_placeholder" }}" required></textarea>
-  <button type="submit" name="submit" class="form-submit" disabled>{{ i18n "contact_submit" }}</button>
-</form>