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.
-    $contact_form.removeClass('hidden');
+  form.classList.remove('hidden');
+
+  function activateForm() {
+    form.setAttribute('action', action);
+    button.removeAttribute('disabled');
+  }
 
   // Wait for a mouse to move, indicating they are human.
-    $('body').on('mousemove', function () {
+  body.addEventListener('mousemove', () => activateForm());
-      // Unlock the form.
-      $contact_form.attr('action', contact_action);
-      $contact_button.first().removeAttribute('disabled');
-    });
-
   // Wait for a touch move event, indicating that they are human.
-    $('body').on('touchmove', function () {
+  body.addEventListener('touchmove', () => activateForm());
-      // Unlock the form.
-      $contact_form.attr('action', contact_action);
-      $contact_button.first().removeAttribute('disabled');
-    });
-
   // A tab or enter key pressed can also indicate they are human.
-    $('body').on('keydown', function (e) {
+  body.addEventListener('keydown', function (e) {
-      if ((e.keyCode === 9) || (e.keyCode === 13)) {
+    if ((e.key === 'Tab') || (e.key === 'Enter')) {
-        // Unlock the form.
+      activateForm();
-        $contact_form.attr('action', contact_action);
-        $contact_button.first().removeAttribute('disabled');
     }
   });
 
   // Mark the form as submitted.
-    $contact_button.on('click', function () {
+  button.addEventListener('click', () => form.classList.add('js-submitted'));
-      $contact_form.addClass('js-submitted');
-    });
 
   // Display messages.
   if (location.search.substring(1) !== '') {
     switch (location.search.substring(1)) {
       case 'submitted':
-          $('.contact-submitted').removeClass('hidden');
+        document.querySelector('.contact-submitted').classList.remove('hidden');
         break;
 
       case 'error':
-          $('.contact-error').removeClass('hidden');
+        document.querySelector('.contact-error').classList.remove('hidden');
         break;
     }
   }
-  });
 
-})(u);
+})();

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>