Convert the contact form to vanilla JS.

assets/js/contact.js

@@ -3,59 +3,48 @@
  * A JavaScript file for the contact form.
  */
 
-(function ($) {
+(function () {
 
   'use strict';
 
-  // Contact form.
+  const form = document.querySelector('.contact-form');
-  $('.contact-form').each(function (e) {
+  const button = form.querySelector('.form-submit');
-    var $contact_form = $(e);
+  const action = form.getAttribute('data-protect');
-    var $contact_button = $contact_form.find('.form-submit');
+  const body = document.querySelector('body');
-    var contact_action = '/php/contact.php';
 
-    // Display the hidden form.
+  // Display the hidden form.
-    $contact_form.removeClass('hidden');
+  form.classList.remove('hidden');
 
-    // Wait for a mouse to move, indicating they are human.
+  function activateForm() {
-    $('body').on('mousemove', function () {
+    form.setAttribute('action', action);
-      // Unlock the form.
+    button.removeAttribute('disabled');
-      $contact_form.attr('action', contact_action);
+  }
-      $contact_button.first().removeAttribute('disabled');
-    });
 
-    // Wait for a touch move event, indicating that they are human.
+  // Wait for a mouse to move, indicating they are human.
-    $('body').on('touchmove', function () {
+  body.addEventListener('mousemove', () => activateForm());
-      // Unlock the form.
+  // Wait for a touch move event, indicating that they are human.
-      $contact_form.attr('action', contact_action);
+  body.addEventListener('touchmove', () => activateForm());
-      $contact_button.first().removeAttribute('disabled');
+  // A tab or enter key pressed can also indicate they are human.
-    });
+  body.addEventListener('keydown', function (e) {
-
+    if ((e.key === 'Tab') || (e.key === 'Enter')) {
-    // A tab or enter key pressed can also indicate they are human.
+      activateForm();
-    $('body').on('keydown', function (e) {
-      if ((e.keyCode === 9) || (e.keyCode === 13)) {
-        // Unlock the form.
-        $contact_form.attr('action', contact_action);
-        $contact_button.first().removeAttribute('disabled');
-      }
-    });
-
-    // Mark the form as submitted.
-    $contact_button.on('click', function () {
-      $contact_form.addClass('js-submitted');
-    });
-
-    // Display messages.
-    if (location.search.substring(1) !== '') {
-      switch (location.search.substring(1)) {
-        case 'submitted':
-          $('.contact-submitted').removeClass('hidden');
-          break;
-
-        case 'error':
-          $('.contact-error').removeClass('hidden');
-          break;
-      }
     }
   });
 
-})(u);
+  // Mark the form as submitted.
+  button.addEventListener('click', () => form.classList.add('js-submitted'));
+
+  // Display messages.
+  if (location.search.substring(1) !== '') {
+    switch (location.search.substring(1)) {
+      case 'submitted':
+        document.querySelector('.contact-submitted').classList.remove('hidden');
+        break;
+
+      case 'error':
+        document.querySelector('.contact-error').classList.remove('hidden');
+        break;
+    }
+  }
+
+})();

assets/js/mobile.js

@@ -11,13 +11,13 @@
   const sheet = document.querySelector('.mobile-nav__sheet');
   const toggle = document.querySelector('.mobile-nav__toggle');
 
-  function navopen () {
+  function navopen() {
     body.classList.add('js-nav-open');
     sheet.setAttribute('aria-hidden', 'false');
     toggle.setAttribute('aria-expanded', 'true');
   }
 
-  function navclose () {
+  function navclose() {
     body.classList.remove('js-nav-open');
     sheet.setAttribute('aria-hidden', 'true');
     toggle.setAttribute('aria-expanded', 'false');
@@ -29,10 +29,10 @@
     toggle.addEventListener('click', function (e) {
       e.preventDefault();
       if (body.classList.contains('js-nav-open')) {
-        navclose ();
+        navclose();
       }
       else {
-        navopen ();
+        navopen();
       }
     });
   });
@@ -41,7 +41,7 @@
   const links = document.querySelectorAll('.mobile-nav__sheet a');
   links.forEach(function (link) {
     link.addEventListener('click', function (e) {
-      navclose ();
+      navclose();
     });
   });
 

assets/sass/_zen.scss

@@ -258,17 +258,18 @@ figure {
 // Form
 
 .content {
+  label:has(+ :required) {
+    &::after {
+      content: '*';
+      color: var(--color-mark-highlight);
+    }
+  }
+
   input,
   textarea {
     @include margin-bottom(.75);
     width: 92%;
 
-    &:required + span::after {
-      content: ' *';
-      color: var(--color-mark-highlight);
-      vertical-align: top;
-    }
-
     &:not(:placeholder-shown):valid {
       background-color: var(--color-status-bg);
     }

assets/sass/mobile.scss

@@ -78,7 +78,7 @@
     display: inline-block;
     fill: var(--color-text);
     width: 1.6rem;
-    margin-left: 0.1rem;
+    margin-left: .1rem;
 
     rect {
       transform-origin: center;

layouts/shortcodes/contact.html

@@ -2,15 +2,15 @@
 <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" action="#" method="post" accept-charset="UTF-8">
+<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" }}" tabindex="1" required autofocus><span></span>
+  <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" }}" tabindex="2" required><span></span>
+  <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" }}" tabindex="3" required><span></span>
+  <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" }}" tabindex="4" required></textarea><span></span>
+  <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>