From d6a7cf9d7dfcaaff3a6fc45c4a63024794ac6521 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:05:04 -0400
Subject: [PATCH 01/12] feat(ui): add ContactForm.vue skeleton

---
 .vitepress/theme/components/ContactForm.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .vitepress/theme/components/ContactForm.vue

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
new file mode 100644
index 0000000..7c7ad14
--- /dev/null
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -0,0 +1,15 @@
+<script setup>
+// ContactForm component logic will go here
+</script>
+
+<template>
+  <div class="contact-form">
+    <!-- Contact form template will go here -->
+  </div>
+</template>
+
+<style scoped>
+.contact-form {
+  /* Contact form styles will go here */
+}
+</style>

From 0fdf2b84b293a178f34d7d198e667c0d987c09fb Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:06:48 -0400
Subject: [PATCH 02/12] feat(contact-form): migrate form markup to Vue template

---
 .vitepress/theme/components/ContactForm.vue | 325 ++++++++++-
 src/contact.md                              | 586 ++++++++++++++++++++
 2 files changed, 906 insertions(+), 5 deletions(-)
 create mode 100644 src/contact.md

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index 7c7ad14..6b95998 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -1,15 +1,330 @@
 <script setup>
-// ContactForm component logic will go here
+import { ref } from 'vue'
+
+// Form data
+const form = ref({
+  lastName: '',
+  email: '',
+  subject: '',
+  captcha: ''
+})
+
+// Form handlers
+const handleSubmit = (event) => {
+  // Form submission logic will be implemented here
+  console.log('Form submitted:', form.value)
+}
+
+const handleReset = () => {
+  form.value = {
+    lastName: '',
+    email: '',
+    subject: '',
+    captcha: ''
+  }
+}
 </script>
 
 <template>
-  <div class="contact-form">
-    <!-- Contact form template will go here -->
+  <div id='zohoSupportWebToCase' align='center'>
+    <form 
+      name='zsWebToCase_1148939000000379137' 
+      id='zsWebToCase_1148939000000379137' 
+      action='https://desk.zoho.com/support/WebToCase' 
+      method='POST' 
+      @submit.prevent="handleSubmit"
+      @reset.prevent="handleReset"
+      enctype='multipart/form-data'
+    >
+      <!-- Hidden Zoho fields - preserved exactly as they appear -->
+      <input type='hidden' name='xnQsjsdp' value='edbsnfeb76ea8da9d021fe11006adbc11fa5d' />
+      <input type='hidden' name='xmIwtLD' value='edbsn7fc94d202a50ce62921faaea62ba87fb350e2ce7d0c41d3b2be00b28efd48882' />
+      <input type='hidden' name='xJdfEaS' value='' />
+      <input type='hidden' name='actionType' value='Q2FzZXM=' />
+      <input type="hidden" id="property(module)" value="Cases" />
+      <input type="hidden" id="dependent_field_values_Cases" value="&#x7b;&#quot;JSON_VALUES&#quot;&#x3a;&#x7b;&#x7d;,&#quot;JSON_SELECT_VALUES&#quot;&#x3a;&#x7b;&#x7d;,&#quot;JSON_MAP_DEP_LABELS&#quot;&#x3a;&#x5b;&#x5d;&#x7d;" />
+      <input type='hidden' name='returnURL' value='https&#x3a;&#x2f;&#x2f;docs.taskratchet.com&#x2f;' />
+      
+      <table border='0' cellspacing='0' class='zsFormClass'>
+        <tr>
+          <td colspan='2' class='zsFontClass'>
+            <strong>Web Form</strong>
+          </td>
+        </tr>
+        <br>
+        <tr>
+          <td nowrap class='zsFontClass ' width='25%' align='left'>Last Name&nbsp;&nbsp;</td>
+          <td align='left' width='75%'>
+            <input 
+              type='text' 
+              maxlength='120' 
+              name='Contact Name' 
+              class='manfieldbdr'
+              v-model="form.lastName"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td nowrap class='zsFontClass ' width='25%' align='left'>Email&nbsp;&nbsp;</td>
+          <td align='left' width='75%'>
+            <input 
+              type='text' 
+              maxlength='120' 
+              name='Email' 
+              class='manfieldbdr'
+              v-model="form.email"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td nowrap class='zsFontClass ' width='25%' align='left'>Subject&nbsp;&nbsp;</td>
+          <td align='left' width='75%'>
+            <input 
+              type='text' 
+              maxlength='255' 
+              name='Subject' 
+              class='manfieldbdr'
+              v-model="form.subject"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td nowrap class='zsFontClass' width='25%' align='left'>Captcha&nbsp;</td>
+          <td>
+            <div id='zsCaptchaLoading'>
+              <strong>Loading... <br>
+                <br>
+              </strong>
+            </div>
+            <div id='zsCaptcha' style='display:none;'>
+              <img src='#' id='zsCaptchaUrl' name="zsCaptchaImage">
+              <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' onclick='zsRegenerateCaptcha()'>Refresh</a>
+            </div>
+            <div>
+              <input 
+                type='text' 
+                name='zsWebFormCaptchaWord'
+                v-model="form.captcha"
+              />
+              <input type='hidden' name='zsCaptchaSrc' value='' />
+            </div>
+          </td>
+        <tr>
+          <td style='padding: 11px 5px 0px 5px;' colspan='2' align='center' width='25%'>
+            <input type='submit' id="zsSubmitButton_1148939000000379137" class='zsFontClass' value='Submit'> &nbsp; &nbsp; 
+            <input type='button' class='zsFontClass' value='Reset' @click="handleReset">
+          </td>
+        </tr>
+        <tr>
+          <td width='25%' align='left'></td>
+          <td style='padding: 0px 5px;' align='left' width='75%'>
+            <div class='wb_FtCon wb_common'>
+              <span>powered by </span>
+              <a target='_blank' rel='noopener noreferrer' href='https://zoho.com/desk' class='wb_logoCon'>
+                <img class='wb_logo' src='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/portalLogo.de847024ebc0131731a3.png' />
+              </a>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </form>
   </div>
 </template>
 
 <style scoped>
-.contact-form {
-  /* Contact form styles will go here */
+/* Zoho form styles */
+#zohoSupportWebToCase textarea,
+#zohoSupportWebToCase input[type='text'],
+#zohoSupportWebToCase input[type='date'],
+#zohoSupportWebToCase select,
+.wb_common {
+    width: 280px;
+}
+
+#zohoSupportWebToCase td {
+    padding: 11px 5px;
+}
+
+#zohoSupportWebToCase textarea,
+#zohoSupportWebToCase input[type='text'],
+#zohoSupportWebToCase input[type='date'],
+#zohoSupportWebToCase select {
+    border: 1px solid #ddd;
+    padding: 3px 5px;
+    border-radius: 3px;
+}
+
+#zohoSupportWebToCase select {
+    box-sizing: unset
+}
+
+#zohoSupportWebToCase .wb_selectDate {
+    width: auto
+}
+
+#zohoSupportWebToCase input.wb_cusInput {
+    width: 108px
+}
+
+.wb_FtCon {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 15px;
+    padding-left: 10px
+}
+
+.wb_logoCon {
+    display: flex;
+    margin-left: 5px
+}
+
+.wb_logo {
+    max-width: 16px;
+    max-height: 16px;
+}
+
+#zohoSupportWebToCase .wb_multi_pick {
+    border: 1px solid #ddd;
+    padding: 3px 5px;
+    border-radius: 3px;
+    width: 280px;
+    height: 95px;
+    overflow-y: auto;
+}
+
+#zohoSupportWebToCase .wb_multi_pick_label {
+    display: block;
+}
+
+#zohoSupportWebToCase .wb_multi_pick_input,
+.wb_multi_pick_input_all {
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+.zsFormClass {
+    background-color: #FFFFFF;
+    width: 600px
+}
+
+.zsFontClass {
+    color: #000000;
+    font-family: Arial;
+    font-size: 13px
+}
+
+.manfieldbdr {
+    border-left: 1px solid #ff6448 !important
+}
+
+.hleft {
+    text-align: left;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    cursor: pointer;
+}
+
+.wtcsepcode {
+    margin: 0px 15px;
+    color: #aaa;
+    float: left;
+}
+
+.wtccloudattach {
+    float: left;
+    color: #00a3fe !important;
+    cursor: pointer;
+    text-decoration: none !important;
+}
+
+.wtccloudattach:hover {
+    text-decoration: none !important;
+}
+
+.wtcuploadinput {
+    cursor: pointer;
+    float: left;
+    width: 62px;
+    margin-top: -20px;
+    opacity: 0;
+    clear: both;
+}
+
+.wtcuploadfile {
+    float: left;
+    color: #00a3fe;
+}
+
+.filenamecls {
+    margin-right: 15px;
+    float: left;
+    margin-top: 5px;
+}
+
+.clboth {
+    clear: both;
+}
+
+#zsFileBrowseAttachments {
+    clear: both;
+    margin: 5px 0px 10px;
+}
+
+.zsFontClass {
+    vertical-align: top;
+}
+
+#tooltip-zc {
+    font: normal 12px Arial, Helvetica, sans-serif;
+    line-height: 18px;
+    position: absolute;
+    padding: 8px;
+    margin: 20px 0 0;
+    background: #fff;
+    border: 1px solid #528dd1;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    color: #eee;
+    -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
+    z-index: 10000;
+    color: #777
+}
+
+.wtcmanfield {
+    color: #f00;
+    font-size: 16px;
+    position: relative;
+    top: 2px;
+    left: 1px;
+}
+
+#zsCloudAttachmentIframe {
+    width: 100%;
+    height: 100%;
+    z-index: 99999 !important;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    border-style: none;
+    display: none;
+    background-color: #fff;
+}
+
+.wtchelpinfo {
+    background-position: -246px -485px;
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    position: relative;
+    top: 2px;
+    background-image: url(https://d1ydxa2xvtn0b5.cloudfront.net/app/images/zs-mpro.b6c9cf2347c62390fdcb.png);
+}
+
+.zsMaxSizeMessage {
+    font-size: 13px;
 }
 </style>
diff --git a/src/contact.md b/src/contact.md
new file mode 100644
index 0000000..fb1afb8
--- /dev/null
+++ b/src/contact.md
@@ -0,0 +1,586 @@
+# Contact
+
+<style>
+#zohoSupportWebToCase textarea,
+#zohoSupportWebToCase input[type='text'],
+#zohoSupportWebToCase input[type='date'],
+#zohoSupportWebToCase select,
+.wb_common {
+    width: 280px;
+}
+
+#zohoSupportWebToCase td {
+    padding: 11px 5px;
+}
+
+#zohoSupportWebToCase textarea,
+#zohoSupportWebToCase input[type='text'],
+#zohoSupportWebToCase input[type='date'],
+#zohoSupportWebToCase select {
+    border: 1px solid #ddd;
+    padding: 3px 5px;
+    border-radius: 3px;
+}
+
+#zohoSupportWebToCase select {
+    box-sizing: unset
+}
+
+#zohoSupportWebToCase .wb_selectDate {
+    width: auto
+}
+
+#zohoSupportWebToCase input.wb_cusInput {
+    width: 108px
+}
+
+.wb_FtCon {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 15px;
+    padding-left: 10px
+}
+
+.wb_logoCon {
+    display: flex;
+    margin-left: 5px
+}
+
+.wb_logo {
+    max-width: 16px;
+    max-height: 16px;
+}
+
+#zohoSupportWebToCase .wb_multi_pick {
+    border: 1px solid #ddd;
+    padding: 3px 5px;
+    border-radius: 3px;
+    width: 280px;
+    height: 95px;
+    overflow-y: auto;
+}
+
+#zohoSupportWebToCase .wb_multi_pick_label {
+    display: block;
+}
+
+#zohoSupportWebToCase .wb_multi_pick_input,
+.wb_multi_pick_input_all {
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+.zsFormClass {
+    background-color: #FFFFFF;
+    width: 600px
+}
+</style>
+<style>
+.zsFontClass {
+    color: #000000;
+    font-family: Arial;
+    font-size: 13px
+}
+</style>
+<style>
+.manfieldbdr {
+    border-left: 1px solid #ff6448 !important
+}
+
+.hleft {
+    text-align: left;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    cursor: pointer;
+}
+
+.wtcsepcode {
+    margin: 0px 15px;
+    color: #aaa;
+    float: left;
+}
+
+.wtccloudattach {
+    float: left;
+    color: #00a3fe !important;
+    cursor: pointer;
+    text-decoration: none !important;
+}
+
+.wtccloudattach:hover {
+    text-decoration: none !important;
+}
+
+.wtcuploadinput {
+    cursor: pointer;
+    float: left;
+    width: 62px;
+    margin-top: -20px;
+    opacity: 0;
+    clear: both;
+}
+
+.wtcuploadfile {
+    float: left;
+    color: #00a3fe;
+}
+
+.filenamecls {
+    margin-right: 15px;
+    float: left;
+    margin-top: 5px;
+}
+
+.clboth {
+    clear: both;
+}
+
+#zsFileBrowseAttachments {
+    clear: both;
+    margin: 5px 0px 10px;
+}
+
+.zsFontClass {
+    vertical-align: top;
+}
+
+#tooltip-zc {
+    font: normal 12px Arial, Helvetica, sans-serif;
+    line-height: 18px;
+    position: absolute;
+    padding: 8px;
+    margin: 20px 0 0;
+    background: #fff;
+    border: 1px solid #528dd1;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    color: #eee;
+    -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
+    z-index: 10000;
+    color: #777
+}
+
+.wtcmanfield {
+    color: #f00;
+    font-size: 16px;
+    position: relative;
+    top: 2px;
+    left: 1px;
+}
+
+#zsCloudAttachmentIframe {
+    width: 100%;
+    height: 100%;
+    z-index: 99999 !important;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    border-style: none;
+    display: none;
+    background-color: #fff;
+}
+
+.wtchelpinfo {
+    background-position: -246px -485px;
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    position: relative;
+    top: 2px;
+    background-image: url(https://d1ydxa2xvtn0b5.cloudfront.net/app/images/zs-mpro.b6c9cf2347c62390fdcb.png);
+}
+
+.zsMaxSizeMessage {
+    font-size: 13px;
+}
+</style>
+<script src='https://d17nz991552y2g.cloudfront.net/app/js/jqueryandencoder.ef05974972bf3bca1b87.js'></script>
+<script>
+function trimBoth(str) {
+    return jQuery.trim(str);
+}
+
+function setAllDependancyFieldsMapping() {
+    var mapDependancyLabels = getMapDependenySelectValues(jQuery("[id='property(module)']").val(), "JSON_MAP_DEP_LABELS");
+    if (mapDependancyLabels) {
+    for (var i = 0; i < mapDependancyLabels.length; i++) {
+        var label = mapDependancyLabels[i];
+        var obj = document.forms['zsWebToCase_1148939000000379137'][label];
+        if (obj) {
+        setDependent(obj, true);
+        }
+    }
+    }
+}
+
+function getMapDependenySelectValues(module, key) {
+    var dependencyObj = jQuery.parseJSON(jQuery("[id='dependent_field_values_" + module + "']").val());
+    if (dependencyObj == undefined) {
+    return dependencyObj;
+    }
+    return dependencyObj[key];
+}
+
+function setDependent(obj, isload) {
+    var name = obj.id || (obj[0] && obj[0].id) || "";
+    var module = jQuery("[id='property(module)']").val();
+    var val = "";
+    var myObject = getMapDependenySelectValues(module, "JSON_VALUES");
+    if (myObject != undefined) {
+    val = myObject[name];
+    }
+    var mySelObject = getMapDependenySelectValues(module, "JSON_SELECT_VALUES");
+    if (val != null && val != "" && val != "null" && mySelObject) {
+    var fields = val;
+    for (var i in fields) {
+        if (fields.hasOwnProperty(i)) {
+        var isDependent = false;
+        var label = i;
+        var values = fields[i];
+        if (label.indexOf(")") > -1) {
+            label = label.replace(/\)/g, '_____');
+        }
+        if (label.indexOf("(") > -1) {
+            label = label.replace(/\(/g, '____');
+        }
+        if (label.indexOf(".") > -1) {
+            label = label.replace(/\./g, '___');
+        }
+        var depObj = document.forms['zsWebToCase_1148939000000379137'][label];
+        if (depObj && depObj.options) {
+            var mapValues = "";
+            var selected_val = depObj.value;
+            var depLen = depObj.options.length - 1;
+            for (var n = depLen; n >= 0; n--) {
+            if (depObj.options[n].selected) {
+                if (mapValues == "") {
+                mapValues = depObj.options[n].value;
+                } else {
+                mapValues = mapValues + ";;;" + depObj.options[n].value;
+                }
+            }
+            }
+            depObj.value = "";
+            var selectValues = mySelObject[label];
+            for (var k in values) {
+            var rat = k;
+            if (rat == "-None-") {
+                rat = "";
+            }
+            var parentValues = mySelObject[name];
+            if (rat == trimBoth(obj.value)) {
+                isDependent = true;
+                depObj.length = 0;
+                var depvalues = values[k];
+                var depLen = depvalues.length - 1;
+                for (var j = 0; j <= depLen; j++) {
+                var optionElement = document.createElement("OPTION");
+                var displayValue = depvalues[j];
+                var actualValue = displayValue;
+                if (actualValue == "-None-") {
+                    optionElement.value = "";
+                    displayValue = "-None-";
+                } else {
+                    optionElement.value = actualValue;
+                }
+                optionElement.text = displayValue;
+                if (mapValues != undefined) {
+                    var mapValue = mapValues.split(";;;");
+                    var len = mapValue.length;
+                    for (var p = 0; p < len; p++) {
+                    if (actualValue == mapValue[p]) {
+                        optionElement.selected = true;
+                    }
+                    }
+                }
+                depObj.options.add(optionElement);
+                }
+            }
+            }
+            if (!isDependent) {
+            depObj.length = 0;
+            var len = selectValues.length;
+            for (var j = 0; j < len; j++) {
+                var actualValue = selectValues[j];
+                var optionElement = document.createElement("OPTION");
+                if (actualValue == "-None-") {
+                optionElement.value = "";
+                } else {
+                optionElement.value = selectValues[j];
+                }
+                optionElement.text = selectValues[j];
+                depObj.options.add(optionElement);
+            }
+            depObj.value = selected_val;
+            }
+            if (!isload) {
+            setDependent(depObj, false);
+            }
+            var jdepObj = jQuery(depObj);
+            if (jdepObj.hasClass('select2-offscreen')) {
+            jdepObj.select2("val", jdepObj.val());
+            }
+        }
+        }
+    }
+    }
+}
+
+function setSelectAll(id) {
+    var parentElement = document.getElementById(id);
+    var hiddenInput = parentElement.querySelector('#hiddenoptions');
+    var selectAllElement = parentElement.querySelector('#selectall' + id);
+    var selectedValues = [];
+    var checkboxes = parentElement.querySelectorAll('.wb_multi_pick_input');
+    checkboxes.forEach(function(cb) {
+    cb.checked = selectAllElement.checked;
+    if (cb.checked && cb.value) {
+        selectedValues.push(cb.value);
+    }
+    });
+    hiddenInput.value = selectedValues.join(',');
+}
+
+function setMultiSelectOption(id, obj) {
+    var parentElement = document.getElementById(id);
+    var hiddenInput = parentElement.querySelector('#hiddenoptions');
+    var selectAllElement = parentElement.querySelector('#selectall' + id);
+    var selectedStr = hiddenInput.value;
+    var selectedValues = selectedStr ? selectedStr.split(',') : [];
+    if (obj.checked && obj.value) {
+    selectedValues.push(obj.value);
+    } else if (!obj.checked && obj.value) {
+    selectedValues.splice(selectedValues.indexOf(obj.value), 1);
+    selectAllElement.checked = false;
+    } else {
+    selectAllElement.checked = false;
+    }
+    hiddenInput.value = selectedValues.join(',');
+}
+var zctt = function() {
+    var tt, mw = 400,
+    top = 10,
+    left = 0,
+    doctt = document;
+    var ieb = doctt.all ? true : false;
+    return {
+    showtt: function(cont, wid) {
+        if (tt == null) {
+        tt = doctt.createElement('div');
+        tt.setAttribute('id', 'tooltip-zc');
+        doctt.body.appendChild(tt);
+        doctt.onmousemove = this.setpos;
+        doctt.onclick = this.hidett;
+        }
+        tt.style.display = 'block';
+        tt.innerHTML = cont;
+        tt.style.width = wid ? wid + 'px' : 'auto';
+        if (!wid && ieb) {
+        tt.style.width = tt.offsetWidth;
+        }
+        if (tt.offsetWidth > mw) {
+        tt.style.width = mw + 'px'
+        }
+        h = parseInt(tt.offsetHeight) + top;
+        w = parseInt(tt.offsetWidth) + left;
+    },
+    hidett: function() {
+        tt.style.display = 'none';
+    },
+    setpos: function(e) {
+        var u = ieb ? event.clientY + doctt.body.scrollTop : e.pageY;
+        var l = ieb ? event.clientX + doctt.body.scrollLeft : e.pageX;
+        var cw = doctt.body.clientWidth;
+        var ch = doctt.body.clientHeight;
+        if (l < 0) {
+        tt.style.left = left + 'px';
+        tt.style.right = '';
+        } else if ((l + w + left) > cw) {
+        tt.style.left = '';
+        tt.style.right = ((cw - l) + left) + 'px';
+        } else {
+        tt.style.right = '';
+        tt.style.left = (l + left) + 'px';
+        }
+        if (u < 0) {
+        tt.style.top = top + 'px';
+        tt.style.bottom = '';
+        } else if ((u + h + left) > ch) {
+        tt.style.top = '';
+        tt.style.bottom = ((ch - u) + top) + 'px';
+        } else {
+        tt.style.bottom = '';
+        tt.style.top = (u + top) + 'px';
+        }
+    }
+    };
+}();
+var zsWebFormMandatoryFields = new Array("Contact Name", "Email", "Subject");
+var zsFieldsDisplayLabelArray = new Array("Last Name", "Email", "Subject");
+
+function zsValidateMandatoryFields() {
+    var name = '';
+    var email = '';
+    var isError = 0;
+    for (var index = 0; index < zsWebFormMandatoryFields.length; index++) {
+    isError = 0;
+    var fieldObject = document.forms['zsWebToCase_1148939000000379137'][zsWebFormMandatoryFields[index]];
+    if (fieldObject) {
+        if (((fieldObject.value).replace(/^\s+|\s+$/g, '')).length == 0) {
+        alert(zsFieldsDisplayLabelArray[index] + ' cannot be empty ');
+        fieldObject.focus();
+        isError = 1;
+        return false;
+        } else {
+        if (fieldObject.name == 'Email') {
+            if (!fieldObject.value.match(/^([\w_][\w\-_.+\'&]*)@(?=.{4,256}$)(([\w]+)([\-_]*[\w])*[\.])+[a-zA-Z]{2,22}$/)) {
+            isError = 1;
+            alert('Enter a valid email-Id');
+            fieldObject.focus();
+            return false;
+            }
+        }
+        }
+        if (fieldObject.nodeName == 'SELECT') {
+        if (fieldObject.options[fieldObject.selectedIndex].value == '-None-') {
+            alert(zsFieldsDisplayLabelArray[index] + ' cannot be none');
+            fieldObject.focus();
+            isError = 1;
+            return false;
+        }
+        }
+        if (fieldObject.type == 'checkbox') {
+        if (fieldObject.checked == false) {
+            alert('Please accept ' + zsFieldsDisplayLabelArray[index]);
+            fieldObject.focus();
+            isError = 1;
+            return false;
+        }
+        }
+    }
+    }
+    if (isError == 0) {
+    if (document.forms['zsWebToCase_1148939000000379137']['zsWebFormCaptchaWord'].value.replace(/^\s+|\s+$/g, '').length == 0) {
+        alert('Please enter the captcha code.');
+        document.forms['zsWebToCase_1148939000000379137']['zsWebFormCaptchaWord'].focus();
+        return false;
+    }
+    }
+    if (isError == 0) {
+    document.getElementById('zsSubmitButton_1148939000000379137').setAttribute('disabled', 'disabled');
+    }
+}
+
+function zsShowCaptcha() {
+    jQuery('#zsCaptchaLoading').hide();
+    jQuery('#zsCaptcha').show();
+}
+
+function zsRegenerateCaptcha() {
+    var webFormxhr = {};
+    webFormxhr = new XMLHttpRequest();
+    webFormxhr.open('GET', 'https://desk.zoho.com/support/GenerateCaptcha?action=getNewCaptcha&_=' + new Date().getTime(), true);
+    webFormxhr.onreadystatechange = function() {
+    if (webFormxhr.readyState === 4 && webFormxhr.status === 200) {
+        try {
+        var response = (webFormxhr.responseText != null) ? JSON.parse(webFormxhr.responseText) : '';
+        jQuery('#zsCaptchaUrl').load(zsShowCaptcha);
+        document.getElementById('zsCaptchaUrl').src = response.captchaUrl;
+        document.getElementsByName('xJdfEaS')[0].value = response.captchaDigest;
+        } catch (e) {}
+    }
+    };
+    webFormxhr.send();
+}
+document.addEventListener('readystatechange', function() {
+    if (document.readyState === 'complete' && window.zsRegenerateCaptcha) {
+    zsRegenerateCaptcha();
+    }
+    setAllDependancyFieldsMapping();
+    document.getElementById('zsSubmitButton_1148939000000379137').removeAttribute('disabled');
+    zsAttachedAttachmentsCount = 0;
+    zsAttachmentFileBrowserIdsList = [1, 2, 3, 4, 5];
+    document.forms['zsWebToCase_1148939000000379137']['zsWebFormCaptchaWord'].value = '';
+});
+
+function zsResetWebForm(webFormId) {
+    document.forms['zsWebToCase_' + webFormId].reset();
+    document.getElementById('zsSubmitButton_1148939000000379137').removeAttribute('disabled');
+    setAllDependancyFieldsMapping();
+}
+</script>
+
+  <div id='zohoSupportWebToCase' align='center'>
+    <form name='zsWebToCase_1148939000000379137' id='zsWebToCase_1148939000000379137' action='https://desk.zoho.com/support/WebToCase' method='POST' onSubmit='return zsValidateMandatoryFields()' enctype='multipart/form-data'>
+      <input type='hidden' name='xnQsjsdp' value='edbsnfeb76ea8da9d021fe11006adbc11fa5d' />
+      <input type='hidden' name='xmIwtLD' value='edbsn7fc94d202a50ce62921faaea62ba87fb350e2ce7d0c41d3b2be00b28efd48882' />
+      <input type='hidden' name='xJdfEaS' value='' />
+      <input type='hidden' name='actionType' value='Q2FzZXM=' />
+      <input type="hidden" id="property(module)" value="Cases" />
+      <input type="hidden" id="dependent_field_values_Cases" value="&#x7b;&quot;JSON_VALUES&quot;&#x3a;&#x7b;&#x7d;,&quot;JSON_SELECT_VALUES&quot;&#x3a;&#x7b;&#x7d;,&quot;JSON_MAP_DEP_LABELS&quot;&#x3a;&#x5b;&#x5d;&#x7d;" />
+      <input type='hidden' name='returnURL' value='https&#x3a;&#x2f;&#x2f;docs.taskratchet.com&#x2f;' />
+      <table border='0' cellspacing='0' class='zsFormClass'>
+        <tr>
+          <td colspan='2' class='zsFontClass'>
+            <strong>Web Form</strong>
+          </td>
+        </tr>
+        <br>
+        <tr>
+          <td nowrap class='zsFontClass ' width='25%' align='left'>Last Name&nbsp;&nbsp;</td>
+          <td align='left' width='75%'>
+            <input type='text' maxlength='120' name='Contact Name' class='manfieldbdr' />
+          </td>
+        </tr>
+        <tr>
+          <td nowrap class='zsFontClass ' width='25%' align='left'>Email&nbsp;&nbsp;</td>
+          <td align='left' width='75%'>
+            <input type='text' maxlength='120' name='Email' value='' class='manfieldbdr' />
+          </td>
+        </tr>
+        <tr>
+          <td nowrap class='zsFontClass ' width='25%' align='left'>Subject&nbsp;&nbsp;</td>
+          <td align='left' width='75%'>
+            <input type='text' maxlength='255' name='Subject' value='' class='manfieldbdr' />
+          </td>
+        </tr>
+        <tr>
+          <td nowrap class='zsFontClass' width='25%' align='left'>Captcha&nbsp;</td>
+          <td>
+            <div id='zsCaptchaLoading'>
+              <strong>Loading... <br>
+                <br>
+              </strong>
+            </div>
+            <div id='zsCaptcha' style='display:none;'>
+              <img src='#' id='zsCaptchaUrl' name="zsCaptchaImage">
+              <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' onclick='zsRegenerateCaptcha()'>Refresh</a>
+            </div>
+            <div>
+              <input type='text' name='zsWebFormCaptchaWord' />
+              <input type='hidden' name='zsCaptchaSrc' value='' />
+            </div>
+          </td>
+        <tr>
+          <td style='padding: 11px 5px 0px 5px;' colspan='2' align='center' width='25%'>
+            <input type='submit' id="zsSubmitButton_1148939000000379137" class='zsFontClass' value='Submit'> &nbsp; &nbsp; <input type='button' class='zsFontClass' value='Reset' onclick="zsResetWebForm('1148939000000379137')">
+          </td>
+        </tr>
+        <tr>
+          <td width='25%' align='left'></td>
+          <td style='padding: 0px 5px;' align='left' width='75%'>
+            <div class='wb_FtCon wb_common'>
+              <span>powered by </span>
+              <a target='_blank' rel='noopener noreferrer' href='https://zoho.com/desk' class='wb_logoCon'>
+                <img class='wb_logo' src='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/portalLogo.de847024ebc0131731a3.png' />
+              </a>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </form>
+  </div>

From 15619be28f2917c1beb766ef9f130a54c2780a33 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:08:27 -0400
Subject: [PATCH 03/12] feat(contact-form): add reactive data and validation
 logic

---
 .vitepress/theme/components/ContactForm.vue | 134 ++++++++++++++++++--
 1 file changed, 121 insertions(+), 13 deletions(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index 6b95998..cbe5c56 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -1,28 +1,136 @@
 <script setup>
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 // Form data
-const form = ref({
-  lastName: '',
-  email: '',
-  subject: '',
-  captcha: ''
+const form = reactive({ 
+  lastName: '', 
+  email: '', 
+  subject: '', 
+  captcha: '' 
 })
 
-// Form handlers
-const handleSubmit = (event) => {
-  // Form submission logic will be implemented here
-  console.log('Form submitted:', form.value)
+const errors = ref({})
+
+// Based on original zsValidateMandatoryFields
+function validate() {
+  const mandatoryFields = [
+    { key: 'lastName', name: 'Last Name' },
+    { key: 'email', name: 'Email' },
+    { key: 'subject', name: 'Subject' }
+  ]
+  
+  // Clear previous errors
+  errors.value = {}
+  
+  // Check mandatory fields
+  for (const field of mandatoryFields) {
+    const value = form[field.key]?.replace(/^\s+|\s+$/g, '') || ''
+    
+    if (value.length === 0) {
+      alert(`${field.name} cannot be empty`)
+      errors.value[field.key] = `${field.name} cannot be empty`
+      return false
+    }
+    
+    // Email validation
+    if (field.key === 'email') {
+      const emailRegex = /^([\w_][\w\-_.+'&]*)@(?=.{4,256}$)(([\w]+)([\-_]*[\w])*[\.])+[a-zA-Z]{2,22}$/
+      if (!value.match(emailRegex)) {
+        alert('Enter a valid email-Id')
+        errors.value[field.key] = 'Enter a valid email-Id'
+        return false
+      }
+    }
+  }
+  
+  // Check captcha
+  const captchaValue = form.captcha?.replace(/^\s+|\s+$/g, '') || ''
+  if (captchaValue.length === 0) {
+    alert('Please enter the captcha code.')
+    errors.value.captcha = 'Please enter the captcha code.'
+    return false
+  }
+  
+  return true
+}
+
+// AJAX call copied from zsRegenerateCaptcha
+async function refreshCaptcha() {
+  try {
+    const response = await fetch(`https://desk.zoho.com/support/GenerateCaptcha?action=getNewCaptcha&_=${new Date().getTime()}`)
+    const data = await response.json()
+    
+    // Update captcha image and digest
+    const captchaImg = document.getElementById('zsCaptchaUrl')
+    const captchaDigest = document.getElementsByName('xJdfEaS')[0]
+    
+    if (captchaImg && data.captchaUrl) {
+      captchaImg.src = data.captchaUrl
+    }
+    
+    if (captchaDigest && data.captchaDigest) {
+      captchaDigest.value = data.captchaDigest
+    }
+    
+    // Show captcha div and hide loading
+    const loadingDiv = document.getElementById('zsCaptchaLoading')
+    const captchaDiv = document.getElementById('zsCaptcha')
+    
+    if (loadingDiv) loadingDiv.style.display = 'none'
+    if (captchaDiv) captchaDiv.style.display = 'block'
+    
+  } catch (error) {
+    console.error('Error refreshing captcha:', error)
+  }
+}
+
+// Native form submission
+function nativeSubmit() {
+  const formElement = document.getElementById('zsWebToCase_1148939000000379137')
+  const submitButton = document.getElementById('zsSubmitButton_1148939000000379137')
+  
+  if (submitButton) {
+    submitButton.setAttribute('disabled', 'disabled')
+  }
+  
+  if (formElement) {
+    formElement.submit()
+  }
 }
 
-const handleReset = () => {
-  form.value = {
+function handleSubmit() { 
+  if (validate()) {
+    nativeSubmit()
+  }
+}
+
+function handleReset() { 
+  Object.assign(form, {
     lastName: '',
     email: '',
     subject: '',
     captcha: ''
+  })
+  
+  // Clear errors
+  errors.value = {}
+  
+  // Refresh captcha
+  refreshCaptcha()
+  
+  // Re-enable submit button
+  const submitButton = document.getElementById('zsSubmitButton_1148939000000379137')
+  if (submitButton) {
+    submitButton.removeAttribute('disabled')
   }
 }
+
+// Initialize captcha on component mount
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  refreshCaptcha()
+})
 </script>
 
 <template>
@@ -98,7 +206,7 @@ const handleReset = () => {
             </div>
             <div id='zsCaptcha' style='display:none;'>
               <img src='#' id='zsCaptchaUrl' name="zsCaptchaImage">
-              <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' onclick='zsRegenerateCaptcha()'>Refresh</a>
+              <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' @click='refreshCaptcha()'>Refresh</a>
             </div>
             <div>
               <input 

From f9d0bdb5bf22da319a87fd44e67d487b23d15679 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:14:03 -0400
Subject: [PATCH 04/12] style(contact-form): scope legacy styles

---
 src/contact.md | 198 -------------------------------------------------
 1 file changed, 198 deletions(-)

diff --git a/src/contact.md b/src/contact.md
index fb1afb8..1519534 100644
--- a/src/contact.md
+++ b/src/contact.md
@@ -1,203 +1,5 @@
 # Contact
 
-<style>
-#zohoSupportWebToCase textarea,
-#zohoSupportWebToCase input[type='text'],
-#zohoSupportWebToCase input[type='date'],
-#zohoSupportWebToCase select,
-.wb_common {
-    width: 280px;
-}
-
-#zohoSupportWebToCase td {
-    padding: 11px 5px;
-}
-
-#zohoSupportWebToCase textarea,
-#zohoSupportWebToCase input[type='text'],
-#zohoSupportWebToCase input[type='date'],
-#zohoSupportWebToCase select {
-    border: 1px solid #ddd;
-    padding: 3px 5px;
-    border-radius: 3px;
-}
-
-#zohoSupportWebToCase select {
-    box-sizing: unset
-}
-
-#zohoSupportWebToCase .wb_selectDate {
-    width: auto
-}
-
-#zohoSupportWebToCase input.wb_cusInput {
-    width: 108px
-}
-
-.wb_FtCon {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 15px;
-    padding-left: 10px
-}
-
-.wb_logoCon {
-    display: flex;
-    margin-left: 5px
-}
-
-.wb_logo {
-    max-width: 16px;
-    max-height: 16px;
-}
-
-#zohoSupportWebToCase .wb_multi_pick {
-    border: 1px solid #ddd;
-    padding: 3px 5px;
-    border-radius: 3px;
-    width: 280px;
-    height: 95px;
-    overflow-y: auto;
-}
-
-#zohoSupportWebToCase .wb_multi_pick_label {
-    display: block;
-}
-
-#zohoSupportWebToCase .wb_multi_pick_input,
-.wb_multi_pick_input_all {
-    vertical-align: middle;
-    margin-right: 5px;
-}
-
-.zsFormClass {
-    background-color: #FFFFFF;
-    width: 600px
-}
-</style>
-<style>
-.zsFontClass {
-    color: #000000;
-    font-family: Arial;
-    font-size: 13px
-}
-</style>
-<style>
-.manfieldbdr {
-    border-left: 1px solid #ff6448 !important
-}
-
-.hleft {
-    text-align: left;
-}
-
-input[type=file]::-webkit-file-upload-button {
-    cursor: pointer;
-}
-
-.wtcsepcode {
-    margin: 0px 15px;
-    color: #aaa;
-    float: left;
-}
-
-.wtccloudattach {
-    float: left;
-    color: #00a3fe !important;
-    cursor: pointer;
-    text-decoration: none !important;
-}
-
-.wtccloudattach:hover {
-    text-decoration: none !important;
-}
-
-.wtcuploadinput {
-    cursor: pointer;
-    float: left;
-    width: 62px;
-    margin-top: -20px;
-    opacity: 0;
-    clear: both;
-}
-
-.wtcuploadfile {
-    float: left;
-    color: #00a3fe;
-}
-
-.filenamecls {
-    margin-right: 15px;
-    float: left;
-    margin-top: 5px;
-}
-
-.clboth {
-    clear: both;
-}
-
-#zsFileBrowseAttachments {
-    clear: both;
-    margin: 5px 0px 10px;
-}
-
-.zsFontClass {
-    vertical-align: top;
-}
-
-#tooltip-zc {
-    font: normal 12px Arial, Helvetica, sans-serif;
-    line-height: 18px;
-    position: absolute;
-    padding: 8px;
-    margin: 20px 0 0;
-    background: #fff;
-    border: 1px solid #528dd1;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    color: #eee;
-    -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
-    z-index: 10000;
-    color: #777
-}
-
-.wtcmanfield {
-    color: #f00;
-    font-size: 16px;
-    position: relative;
-    top: 2px;
-    left: 1px;
-}
-
-#zsCloudAttachmentIframe {
-    width: 100%;
-    height: 100%;
-    z-index: 99999 !important;
-    position: fixed;
-    left: 0px;
-    top: 0px;
-    border-style: none;
-    display: none;
-    background-color: #fff;
-}
-
-.wtchelpinfo {
-    background-position: -246px -485px;
-    width: 15px;
-    height: 15px;
-    display: inline-block;
-    position: relative;
-    top: 2px;
-    background-image: url(https://d1ydxa2xvtn0b5.cloudfront.net/app/images/zs-mpro.b6c9cf2347c62390fdcb.png);
-}
-
-.zsMaxSizeMessage {
-    font-size: 13px;
-}
-</style>
 <script src='https://d17nz991552y2g.cloudfront.net/app/js/jqueryandencoder.ef05974972bf3bca1b87.js'></script>
 <script>
 function trimBoth(str) {

From 317b5d9276b49d4102f54d0d02b8b31add6db89d Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:19:46 -0400
Subject: [PATCH 05/12] fix: register ticket form component

---
 .vitepress/theme/components/ContactForm.vue | 101 ++---
 .vitepress/theme/index.js                   |   2 +
 src/contact.md                              | 387 +-------------------
 3 files changed, 55 insertions(+), 435 deletions(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index cbe5c56..f206651 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -2,14 +2,15 @@
 import { reactive, ref } from 'vue'
 
 // Form data
-const form = reactive({ 
-  lastName: '', 
-  email: '', 
-  subject: '', 
-  captcha: '' 
+const form = reactive({
+  lastName: '',
+  email: '',
+  subject: '',
+  captcha: ''
 })
 
 const errors = ref({})
+const formRef = ref(null)
 
 // Based on original zsValidateMandatoryFields
 function validate() {
@@ -18,20 +19,20 @@ function validate() {
     { key: 'email', name: 'Email' },
     { key: 'subject', name: 'Subject' }
   ]
-  
+
   // Clear previous errors
   errors.value = {}
-  
+
   // Check mandatory fields
   for (const field of mandatoryFields) {
     const value = form[field.key]?.replace(/^\s+|\s+$/g, '') || ''
-    
+
     if (value.length === 0) {
       alert(`${field.name} cannot be empty`)
       errors.value[field.key] = `${field.name} cannot be empty`
       return false
     }
-    
+
     // Email validation
     if (field.key === 'email') {
       const emailRegex = /^([\w_][\w\-_.+'&]*)@(?=.{4,256}$)(([\w]+)([\-_]*[\w])*[\.])+[a-zA-Z]{2,22}$/
@@ -42,7 +43,7 @@ function validate() {
       }
     }
   }
-  
+
   // Check captcha
   const captchaValue = form.captcha?.replace(/^\s+|\s+$/g, '') || ''
   if (captchaValue.length === 0) {
@@ -50,7 +51,7 @@ function validate() {
     errors.value.captcha = 'Please enter the captcha code.'
     return false
   }
-  
+
   return true
 }
 
@@ -59,65 +60,65 @@ async function refreshCaptcha() {
   try {
     const response = await fetch(`https://desk.zoho.com/support/GenerateCaptcha?action=getNewCaptcha&_=${new Date().getTime()}`)
     const data = await response.json()
-    
+
     // Update captcha image and digest
     const captchaImg = document.getElementById('zsCaptchaUrl')
     const captchaDigest = document.getElementsByName('xJdfEaS')[0]
-    
+
     if (captchaImg && data.captchaUrl) {
       captchaImg.src = data.captchaUrl
     }
-    
+
     if (captchaDigest && data.captchaDigest) {
       captchaDigest.value = data.captchaDigest
     }
-    
+
     // Show captcha div and hide loading
     const loadingDiv = document.getElementById('zsCaptchaLoading')
     const captchaDiv = document.getElementById('zsCaptcha')
-    
+
     if (loadingDiv) loadingDiv.style.display = 'none'
     if (captchaDiv) captchaDiv.style.display = 'block'
-    
+
   } catch (error) {
     console.error('Error refreshing captcha:', error)
   }
 }
 
-// Native form submission
+// Native form submission - using Vue ref
 function nativeSubmit() {
-  const formElement = document.getElementById('zsWebToCase_1148939000000379137')
   const submitButton = document.getElementById('zsSubmitButton_1148939000000379137')
-  
+
   if (submitButton) {
     submitButton.setAttribute('disabled', 'disabled')
   }
-  
-  if (formElement) {
-    formElement.submit()
+
+  // Use Vue ref to get form element and submit natively for Zoho
+  if (formRef.value) {
+    formRef.value.submit()
   }
 }
 
-function handleSubmit() { 
+function handleSubmit() {
   if (validate()) {
     nativeSubmit()
   }
 }
 
-function handleReset() { 
+function handleReset() {
   Object.assign(form, {
     lastName: '',
     email: '',
     subject: '',
     captcha: ''
   })
-  
+
   // Clear errors
   errors.value = {}
-  
+
   // Refresh captcha
   refreshCaptcha()
-  
+
   // Re-enable submit button
   const submitButton = document.getElementById('zsSubmitButton_1148939000000379137')
   if (submitButton) {
@@ -135,11 +136,12 @@ onMounted(() => {
 
 <template>
   <div id='zohoSupportWebToCase' align='center'>
-    <form 
-      name='zsWebToCase_1148939000000379137' 
-      id='zsWebToCase_1148939000000379137' 
-      action='https://desk.zoho.com/support/WebToCase' 
-      method='POST' 
+    <form
+      ref="formRef"
+      name='zsWebToCase_1148939000000379137'
+      id='zsWebToCase_1148939000000379137'
+      action='https://desk.zoho.com/support/WebToCase'
+      method='POST'
       @submit.prevent="handleSubmit"
       @reset.prevent="handleReset"
       enctype='multipart/form-data'
@@ -152,7 +154,7 @@ onMounted(() => {
       <input type="hidden" id="property(module)" value="Cases" />
       <input type="hidden" id="dependent_field_values_Cases" value="&#x7b;&#quot;JSON_VALUES&#quot;&#x3a;&#x7b;&#x7d;,&#quot;JSON_SELECT_VALUES&#quot;&#x3a;&#x7b;&#x7d;,&#quot;JSON_MAP_DEP_LABELS&#quot;&#x3a;&#x5b;&#x5d;&#x7d;" />
       <input type='hidden' name='returnURL' value='https&#x3a;&#x2f;&#x2f;docs.taskratchet.com&#x2f;' />
-      
+
       <table border='0' cellspacing='0' class='zsFormClass'>
         <tr>
           <td colspan='2' class='zsFontClass'>
@@ -163,10 +165,10 @@ onMounted(() => {
         <tr>
           <td nowrap class='zsFontClass ' width='25%' align='left'>Last Name&nbsp;&nbsp;</td>
           <td align='left' width='75%'>
-            <input 
-              type='text' 
-              maxlength='120' 
-              name='Contact Name' 
+            <input
+              type='text'
+              maxlength='120'
+              name='Contact Name'
               class='manfieldbdr'
               v-model="form.lastName"
             />
@@ -175,10 +177,10 @@ onMounted(() => {
         <tr>
           <td nowrap class='zsFontClass ' width='25%' align='left'>Email&nbsp;&nbsp;</td>
           <td align='left' width='75%'>
-            <input 
-              type='text' 
-              maxlength='120' 
-              name='Email' 
+            <input
+              type='text'
+              maxlength='120'
+              name='Email'
               class='manfieldbdr'
               v-model="form.email"
             />
@@ -187,10 +189,10 @@ onMounted(() => {
         <tr>
           <td nowrap class='zsFontClass ' width='25%' align='left'>Subject&nbsp;&nbsp;</td>
           <td align='left' width='75%'>
-            <input 
-              type='text' 
-              maxlength='255' 
-              name='Subject' 
+            <input
+              type='text'
+              maxlength='255'
+              name='Subject'
               class='manfieldbdr'
               v-model="form.subject"
             />
@@ -209,17 +211,18 @@ onMounted(() => {
               <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' @click='refreshCaptcha()'>Refresh</a>
             </div>
             <div>
-              <input 
-                type='text' 
+              <input
+                type='text'
                 name='zsWebFormCaptchaWord'
                 v-model="form.captcha"
               />
               <input type='hidden' name='zsCaptchaSrc' value='' />
             </div>
           </td>
+        </tr>
         <tr>
           <td style='padding: 11px 5px 0px 5px;' colspan='2' align='center' width='25%'>
-            <input type='submit' id="zsSubmitButton_1148939000000379137" class='zsFontClass' value='Submit'> &nbsp; &nbsp; 
+            <input type='submit' id="zsSubmitButton_1148939000000379137" class='zsFontClass' value='Submit'> &nbsp; &nbsp;
             <input type='button' class='zsFontClass' value='Reset' @click="handleReset">
           </td>
         </tr>
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index 403fa8b..8c3f75e 100644
--- a/.vitepress/theme/index.js
+++ b/.vitepress/theme/index.js
@@ -1,10 +1,12 @@
 import DefaultTheme from "vitepress/theme";
 import "./custom.css";
 import Video from "./components/Video.vue";
+import ContactForm from "./components/ContactForm.vue";
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
     app.component("Video", Video);
+    app.component("ContactForm", ContactForm);
   },
 };
diff --git a/src/contact.md b/src/contact.md
index 1519534..45123f6 100644
--- a/src/contact.md
+++ b/src/contact.md
@@ -1,388 +1,3 @@
 # Contact
 
-<script src='https://d17nz991552y2g.cloudfront.net/app/js/jqueryandencoder.ef05974972bf3bca1b87.js'></script>
-<script>
-function trimBoth(str) {
-    return jQuery.trim(str);
-}
-
-function setAllDependancyFieldsMapping() {
-    var mapDependancyLabels = getMapDependenySelectValues(jQuery("[id='property(module)']").val(), "JSON_MAP_DEP_LABELS");
-    if (mapDependancyLabels) {
-    for (var i = 0; i < mapDependancyLabels.length; i++) {
-        var label = mapDependancyLabels[i];
-        var obj = document.forms['zsWebToCase_1148939000000379137'][label];
-        if (obj) {
-        setDependent(obj, true);
-        }
-    }
-    }
-}
-
-function getMapDependenySelectValues(module, key) {
-    var dependencyObj = jQuery.parseJSON(jQuery("[id='dependent_field_values_" + module + "']").val());
-    if (dependencyObj == undefined) {
-    return dependencyObj;
-    }
-    return dependencyObj[key];
-}
-
-function setDependent(obj, isload) {
-    var name = obj.id || (obj[0] && obj[0].id) || "";
-    var module = jQuery("[id='property(module)']").val();
-    var val = "";
-    var myObject = getMapDependenySelectValues(module, "JSON_VALUES");
-    if (myObject != undefined) {
-    val = myObject[name];
-    }
-    var mySelObject = getMapDependenySelectValues(module, "JSON_SELECT_VALUES");
-    if (val != null && val != "" && val != "null" && mySelObject) {
-    var fields = val;
-    for (var i in fields) {
-        if (fields.hasOwnProperty(i)) {
-        var isDependent = false;
-        var label = i;
-        var values = fields[i];
-        if (label.indexOf(")") > -1) {
-            label = label.replace(/\)/g, '_____');
-        }
-        if (label.indexOf("(") > -1) {
-            label = label.replace(/\(/g, '____');
-        }
-        if (label.indexOf(".") > -1) {
-            label = label.replace(/\./g, '___');
-        }
-        var depObj = document.forms['zsWebToCase_1148939000000379137'][label];
-        if (depObj && depObj.options) {
-            var mapValues = "";
-            var selected_val = depObj.value;
-            var depLen = depObj.options.length - 1;
-            for (var n = depLen; n >= 0; n--) {
-            if (depObj.options[n].selected) {
-                if (mapValues == "") {
-                mapValues = depObj.options[n].value;
-                } else {
-                mapValues = mapValues + ";;;" + depObj.options[n].value;
-                }
-            }
-            }
-            depObj.value = "";
-            var selectValues = mySelObject[label];
-            for (var k in values) {
-            var rat = k;
-            if (rat == "-None-") {
-                rat = "";
-            }
-            var parentValues = mySelObject[name];
-            if (rat == trimBoth(obj.value)) {
-                isDependent = true;
-                depObj.length = 0;
-                var depvalues = values[k];
-                var depLen = depvalues.length - 1;
-                for (var j = 0; j <= depLen; j++) {
-                var optionElement = document.createElement("OPTION");
-                var displayValue = depvalues[j];
-                var actualValue = displayValue;
-                if (actualValue == "-None-") {
-                    optionElement.value = "";
-                    displayValue = "-None-";
-                } else {
-                    optionElement.value = actualValue;
-                }
-                optionElement.text = displayValue;
-                if (mapValues != undefined) {
-                    var mapValue = mapValues.split(";;;");
-                    var len = mapValue.length;
-                    for (var p = 0; p < len; p++) {
-                    if (actualValue == mapValue[p]) {
-                        optionElement.selected = true;
-                    }
-                    }
-                }
-                depObj.options.add(optionElement);
-                }
-            }
-            }
-            if (!isDependent) {
-            depObj.length = 0;
-            var len = selectValues.length;
-            for (var j = 0; j < len; j++) {
-                var actualValue = selectValues[j];
-                var optionElement = document.createElement("OPTION");
-                if (actualValue == "-None-") {
-                optionElement.value = "";
-                } else {
-                optionElement.value = selectValues[j];
-                }
-                optionElement.text = selectValues[j];
-                depObj.options.add(optionElement);
-            }
-            depObj.value = selected_val;
-            }
-            if (!isload) {
-            setDependent(depObj, false);
-            }
-            var jdepObj = jQuery(depObj);
-            if (jdepObj.hasClass('select2-offscreen')) {
-            jdepObj.select2("val", jdepObj.val());
-            }
-        }
-        }
-    }
-    }
-}
-
-function setSelectAll(id) {
-    var parentElement = document.getElementById(id);
-    var hiddenInput = parentElement.querySelector('#hiddenoptions');
-    var selectAllElement = parentElement.querySelector('#selectall' + id);
-    var selectedValues = [];
-    var checkboxes = parentElement.querySelectorAll('.wb_multi_pick_input');
-    checkboxes.forEach(function(cb) {
-    cb.checked = selectAllElement.checked;
-    if (cb.checked && cb.value) {
-        selectedValues.push(cb.value);
-    }
-    });
-    hiddenInput.value = selectedValues.join(',');
-}
-
-function setMultiSelectOption(id, obj) {
-    var parentElement = document.getElementById(id);
-    var hiddenInput = parentElement.querySelector('#hiddenoptions');
-    var selectAllElement = parentElement.querySelector('#selectall' + id);
-    var selectedStr = hiddenInput.value;
-    var selectedValues = selectedStr ? selectedStr.split(',') : [];
-    if (obj.checked && obj.value) {
-    selectedValues.push(obj.value);
-    } else if (!obj.checked && obj.value) {
-    selectedValues.splice(selectedValues.indexOf(obj.value), 1);
-    selectAllElement.checked = false;
-    } else {
-    selectAllElement.checked = false;
-    }
-    hiddenInput.value = selectedValues.join(',');
-}
-var zctt = function() {
-    var tt, mw = 400,
-    top = 10,
-    left = 0,
-    doctt = document;
-    var ieb = doctt.all ? true : false;
-    return {
-    showtt: function(cont, wid) {
-        if (tt == null) {
-        tt = doctt.createElement('div');
-        tt.setAttribute('id', 'tooltip-zc');
-        doctt.body.appendChild(tt);
-        doctt.onmousemove = this.setpos;
-        doctt.onclick = this.hidett;
-        }
-        tt.style.display = 'block';
-        tt.innerHTML = cont;
-        tt.style.width = wid ? wid + 'px' : 'auto';
-        if (!wid && ieb) {
-        tt.style.width = tt.offsetWidth;
-        }
-        if (tt.offsetWidth > mw) {
-        tt.style.width = mw + 'px'
-        }
-        h = parseInt(tt.offsetHeight) + top;
-        w = parseInt(tt.offsetWidth) + left;
-    },
-    hidett: function() {
-        tt.style.display = 'none';
-    },
-    setpos: function(e) {
-        var u = ieb ? event.clientY + doctt.body.scrollTop : e.pageY;
-        var l = ieb ? event.clientX + doctt.body.scrollLeft : e.pageX;
-        var cw = doctt.body.clientWidth;
-        var ch = doctt.body.clientHeight;
-        if (l < 0) {
-        tt.style.left = left + 'px';
-        tt.style.right = '';
-        } else if ((l + w + left) > cw) {
-        tt.style.left = '';
-        tt.style.right = ((cw - l) + left) + 'px';
-        } else {
-        tt.style.right = '';
-        tt.style.left = (l + left) + 'px';
-        }
-        if (u < 0) {
-        tt.style.top = top + 'px';
-        tt.style.bottom = '';
-        } else if ((u + h + left) > ch) {
-        tt.style.top = '';
-        tt.style.bottom = ((ch - u) + top) + 'px';
-        } else {
-        tt.style.bottom = '';
-        tt.style.top = (u + top) + 'px';
-        }
-    }
-    };
-}();
-var zsWebFormMandatoryFields = new Array("Contact Name", "Email", "Subject");
-var zsFieldsDisplayLabelArray = new Array("Last Name", "Email", "Subject");
-
-function zsValidateMandatoryFields() {
-    var name = '';
-    var email = '';
-    var isError = 0;
-    for (var index = 0; index < zsWebFormMandatoryFields.length; index++) {
-    isError = 0;
-    var fieldObject = document.forms['zsWebToCase_1148939000000379137'][zsWebFormMandatoryFields[index]];
-    if (fieldObject) {
-        if (((fieldObject.value).replace(/^\s+|\s+$/g, '')).length == 0) {
-        alert(zsFieldsDisplayLabelArray[index] + ' cannot be empty ');
-        fieldObject.focus();
-        isError = 1;
-        return false;
-        } else {
-        if (fieldObject.name == 'Email') {
-            if (!fieldObject.value.match(/^([\w_][\w\-_.+\'&]*)@(?=.{4,256}$)(([\w]+)([\-_]*[\w])*[\.])+[a-zA-Z]{2,22}$/)) {
-            isError = 1;
-            alert('Enter a valid email-Id');
-            fieldObject.focus();
-            return false;
-            }
-        }
-        }
-        if (fieldObject.nodeName == 'SELECT') {
-        if (fieldObject.options[fieldObject.selectedIndex].value == '-None-') {
-            alert(zsFieldsDisplayLabelArray[index] + ' cannot be none');
-            fieldObject.focus();
-            isError = 1;
-            return false;
-        }
-        }
-        if (fieldObject.type == 'checkbox') {
-        if (fieldObject.checked == false) {
-            alert('Please accept ' + zsFieldsDisplayLabelArray[index]);
-            fieldObject.focus();
-            isError = 1;
-            return false;
-        }
-        }
-    }
-    }
-    if (isError == 0) {
-    if (document.forms['zsWebToCase_1148939000000379137']['zsWebFormCaptchaWord'].value.replace(/^\s+|\s+$/g, '').length == 0) {
-        alert('Please enter the captcha code.');
-        document.forms['zsWebToCase_1148939000000379137']['zsWebFormCaptchaWord'].focus();
-        return false;
-    }
-    }
-    if (isError == 0) {
-    document.getElementById('zsSubmitButton_1148939000000379137').setAttribute('disabled', 'disabled');
-    }
-}
-
-function zsShowCaptcha() {
-    jQuery('#zsCaptchaLoading').hide();
-    jQuery('#zsCaptcha').show();
-}
-
-function zsRegenerateCaptcha() {
-    var webFormxhr = {};
-    webFormxhr = new XMLHttpRequest();
-    webFormxhr.open('GET', 'https://desk.zoho.com/support/GenerateCaptcha?action=getNewCaptcha&_=' + new Date().getTime(), true);
-    webFormxhr.onreadystatechange = function() {
-    if (webFormxhr.readyState === 4 && webFormxhr.status === 200) {
-        try {
-        var response = (webFormxhr.responseText != null) ? JSON.parse(webFormxhr.responseText) : '';
-        jQuery('#zsCaptchaUrl').load(zsShowCaptcha);
-        document.getElementById('zsCaptchaUrl').src = response.captchaUrl;
-        document.getElementsByName('xJdfEaS')[0].value = response.captchaDigest;
-        } catch (e) {}
-    }
-    };
-    webFormxhr.send();
-}
-document.addEventListener('readystatechange', function() {
-    if (document.readyState === 'complete' && window.zsRegenerateCaptcha) {
-    zsRegenerateCaptcha();
-    }
-    setAllDependancyFieldsMapping();
-    document.getElementById('zsSubmitButton_1148939000000379137').removeAttribute('disabled');
-    zsAttachedAttachmentsCount = 0;
-    zsAttachmentFileBrowserIdsList = [1, 2, 3, 4, 5];
-    document.forms['zsWebToCase_1148939000000379137']['zsWebFormCaptchaWord'].value = '';
-});
-
-function zsResetWebForm(webFormId) {
-    document.forms['zsWebToCase_' + webFormId].reset();
-    document.getElementById('zsSubmitButton_1148939000000379137').removeAttribute('disabled');
-    setAllDependancyFieldsMapping();
-}
-</script>
-
-  <div id='zohoSupportWebToCase' align='center'>
-    <form name='zsWebToCase_1148939000000379137' id='zsWebToCase_1148939000000379137' action='https://desk.zoho.com/support/WebToCase' method='POST' onSubmit='return zsValidateMandatoryFields()' enctype='multipart/form-data'>
-      <input type='hidden' name='xnQsjsdp' value='edbsnfeb76ea8da9d021fe11006adbc11fa5d' />
-      <input type='hidden' name='xmIwtLD' value='edbsn7fc94d202a50ce62921faaea62ba87fb350e2ce7d0c41d3b2be00b28efd48882' />
-      <input type='hidden' name='xJdfEaS' value='' />
-      <input type='hidden' name='actionType' value='Q2FzZXM=' />
-      <input type="hidden" id="property(module)" value="Cases" />
-      <input type="hidden" id="dependent_field_values_Cases" value="&#x7b;&quot;JSON_VALUES&quot;&#x3a;&#x7b;&#x7d;,&quot;JSON_SELECT_VALUES&quot;&#x3a;&#x7b;&#x7d;,&quot;JSON_MAP_DEP_LABELS&quot;&#x3a;&#x5b;&#x5d;&#x7d;" />
-      <input type='hidden' name='returnURL' value='https&#x3a;&#x2f;&#x2f;docs.taskratchet.com&#x2f;' />
-      <table border='0' cellspacing='0' class='zsFormClass'>
-        <tr>
-          <td colspan='2' class='zsFontClass'>
-            <strong>Web Form</strong>
-          </td>
-        </tr>
-        <br>
-        <tr>
-          <td nowrap class='zsFontClass ' width='25%' align='left'>Last Name&nbsp;&nbsp;</td>
-          <td align='left' width='75%'>
-            <input type='text' maxlength='120' name='Contact Name' class='manfieldbdr' />
-          </td>
-        </tr>
-        <tr>
-          <td nowrap class='zsFontClass ' width='25%' align='left'>Email&nbsp;&nbsp;</td>
-          <td align='left' width='75%'>
-            <input type='text' maxlength='120' name='Email' value='' class='manfieldbdr' />
-          </td>
-        </tr>
-        <tr>
-          <td nowrap class='zsFontClass ' width='25%' align='left'>Subject&nbsp;&nbsp;</td>
-          <td align='left' width='75%'>
-            <input type='text' maxlength='255' name='Subject' value='' class='manfieldbdr' />
-          </td>
-        </tr>
-        <tr>
-          <td nowrap class='zsFontClass' width='25%' align='left'>Captcha&nbsp;</td>
-          <td>
-            <div id='zsCaptchaLoading'>
-              <strong>Loading... <br>
-                <br>
-              </strong>
-            </div>
-            <div id='zsCaptcha' style='display:none;'>
-              <img src='#' id='zsCaptchaUrl' name="zsCaptchaImage">
-              <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' onclick='zsRegenerateCaptcha()'>Refresh</a>
-            </div>
-            <div>
-              <input type='text' name='zsWebFormCaptchaWord' />
-              <input type='hidden' name='zsCaptchaSrc' value='' />
-            </div>
-          </td>
-        <tr>
-          <td style='padding: 11px 5px 0px 5px;' colspan='2' align='center' width='25%'>
-            <input type='submit' id="zsSubmitButton_1148939000000379137" class='zsFontClass' value='Submit'> &nbsp; &nbsp; <input type='button' class='zsFontClass' value='Reset' onclick="zsResetWebForm('1148939000000379137')">
-          </td>
-        </tr>
-        <tr>
-          <td width='25%' align='left'></td>
-          <td style='padding: 0px 5px;' align='left' width='75%'>
-            <div class='wb_FtCon wb_common'>
-              <span>powered by </span>
-              <a target='_blank' rel='noopener noreferrer' href='https://zoho.com/desk' class='wb_logoCon'>
-                <img class='wb_logo' src='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/portalLogo.de847024ebc0131731a3.png' />
-              </a>
-            </div>
-          </td>
-        </tr>
-      </table>
-    </form>
-  </div>
+<ContactForm />

From b66ffb7716dfdd8e52badc3997660346848b1329 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:23:34 -0400
Subject: [PATCH 06/12] fix: styling adjustments

---
 .vitepress/theme/components/ContactForm.vue | 51 ++++++++++++++++-----
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index f206651..b23a812 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -156,12 +156,6 @@ onMounted(() => {
       <input type='hidden' name='returnURL' value='https&#x3a;&#x2f;&#x2f;docs.taskratchet.com&#x2f;' />
 
       <table border='0' cellspacing='0' class='zsFormClass'>
-        <tr>
-          <td colspan='2' class='zsFontClass'>
-            <strong>Web Form</strong>
-          </td>
-        </tr>
-        <br>
         <tr>
           <td nowrap class='zsFontClass ' width='25%' align='left'>Last Name&nbsp;&nbsp;</td>
           <td align='left' width='75%'>
@@ -263,6 +257,18 @@ onMounted(() => {
     border: 1px solid #ddd;
     padding: 3px 5px;
     border-radius: 3px;
+    background-color: var(--vp-c-bg);
+    color: var(--vp-c-text-1);
+}
+
+/* Dark mode support */
+.dark #zohoSupportWebToCase textarea,
+.dark #zohoSupportWebToCase input[type='text'],
+.dark #zohoSupportWebToCase input[type='date'],
+.dark #zohoSupportWebToCase select {
+    border: 1px solid var(--vp-c-border);
+    background-color: var(--vp-c-bg-alt);
+    color: var(--vp-c-text-1);
 }
 
 #zohoSupportWebToCase select {
@@ -314,17 +320,38 @@ onMounted(() => {
     margin-right: 5px;
 }
 
-.zsFormClass {
-    background-color: #FFFFFF;
-    width: 600px
-}
-
 .zsFontClass {
-    color: #000000;
+    color: var(--vp-c-text-1);
     font-family: Arial;
     font-size: 13px
 }
 
+/* Dark mode table styles */
+.dark .zsFontClass {
+    color: var(--vp-c-text-1);
+}
+
+/* Dark mode link styles */
+.dark #zohoSupportWebToCase a {
+    color: var(--vp-c-brand-1);
+}
+
+/* Dark mode button styles */
+.dark #zohoSupportWebToCase input[type='submit'],
+.dark #zohoSupportWebToCase input[type='button'] {
+    background-color: var(--vp-c-bg-alt);
+    color: var(--vp-c-text-1);
+    border: 1px solid var(--vp-c-border);
+    border-radius: 4px;
+    padding: 6px 12px;
+}
+
+.dark #zohoSupportWebToCase input[type='submit']:hover,
+.dark #zohoSupportWebToCase input[type='button']:hover {
+    background-color: var(--vp-c-brand-1);
+    color: var(--vp-c-white);
+}
+
 .manfieldbdr {
     border-left: 1px solid #ff6448 !important
 }

From dbcf82d2879d8e0387b29a176597d83f218cdf33 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:47:48 -0400
Subject: [PATCH 07/12] fix: use web3forms

---
 .vitepress/theme/components/ContactForm.vue | 538 ++++----------------
 1 file changed, 107 insertions(+), 431 deletions(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index b23a812..cf9fa08 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -1,468 +1,144 @@
-<script setup>
-import { reactive, ref } from 'vue'
-
-// Form data
-const form = reactive({
-  lastName: '',
-  email: '',
-  subject: '',
-  captcha: ''
-})
-
-const errors = ref({})
-const formRef = ref(null)
-
-// Based on original zsValidateMandatoryFields
-function validate() {
-  const mandatoryFields = [
-    { key: 'lastName', name: 'Last Name' },
-    { key: 'email', name: 'Email' },
-    { key: 'subject', name: 'Subject' }
-  ]
-
-  // Clear previous errors
-  errors.value = {}
-
-  // Check mandatory fields
-  for (const field of mandatoryFields) {
-    const value = form[field.key]?.replace(/^\s+|\s+$/g, '') || ''
-
-    if (value.length === 0) {
-      alert(`${field.name} cannot be empty`)
-      errors.value[field.key] = `${field.name} cannot be empty`
-      return false
-    }
-
-    // Email validation
-    if (field.key === 'email') {
-      const emailRegex = /^([\w_][\w\-_.+'&]*)@(?=.{4,256}$)(([\w]+)([\-_]*[\w])*[\.])+[a-zA-Z]{2,22}$/
-      if (!value.match(emailRegex)) {
-        alert('Enter a valid email-Id')
-        errors.value[field.key] = 'Enter a valid email-Id'
-        return false
-      }
-    }
-  }
-
-  // Check captcha
-  const captchaValue = form.captcha?.replace(/^\s+|\s+$/g, '') || ''
-  if (captchaValue.length === 0) {
-    alert('Please enter the captcha code.')
-    errors.value.captcha = 'Please enter the captcha code.'
-    return false
-  }
-
-  return true
-}
-
-// AJAX call copied from zsRegenerateCaptcha
-async function refreshCaptcha() {
-  try {
-    const response = await fetch(`https://desk.zoho.com/support/GenerateCaptcha?action=getNewCaptcha&_=${new Date().getTime()}`)
-    const data = await response.json()
-
-    // Update captcha image and digest
-    const captchaImg = document.getElementById('zsCaptchaUrl')
-    const captchaDigest = document.getElementsByName('xJdfEaS')[0]
-
-    if (captchaImg && data.captchaUrl) {
-      captchaImg.src = data.captchaUrl
-    }
-
-    if (captchaDigest && data.captchaDigest) {
-      captchaDigest.value = data.captchaDigest
-    }
-
-    // Show captcha div and hide loading
-    const loadingDiv = document.getElementById('zsCaptchaLoading')
-    const captchaDiv = document.getElementById('zsCaptcha')
-
-    if (loadingDiv) loadingDiv.style.display = 'none'
-    if (captchaDiv) captchaDiv.style.display = 'block'
-
-  } catch (error) {
-    console.error('Error refreshing captcha:', error)
-  }
-}
-
-// Native form submission - using Vue ref
-function nativeSubmit() {
-  const submitButton = document.getElementById('zsSubmitButton_1148939000000379137')
-
-  if (submitButton) {
-    submitButton.setAttribute('disabled', 'disabled')
-  }
-
-  // Use Vue ref to get form element and submit natively for Zoho
-  if (formRef.value) {
-    formRef.value.submit()
-  }
-}
-
-function handleSubmit() {
-  if (validate()) {
-    nativeSubmit()
-  }
-}
-
-function handleReset() {
-  Object.assign(form, {
-    lastName: '',
-    email: '',
-    subject: '',
-    captcha: ''
-  })
-
-  // Clear errors
-  errors.value = {}
-
-  // Refresh captcha
-  refreshCaptcha()
-
-  // Re-enable submit button
-  const submitButton = document.getElementById('zsSubmitButton_1148939000000379137')
-  if (submitButton) {
-    submitButton.removeAttribute('disabled')
-  }
-}
-
-// Initialize captcha on component mount
-import { onMounted } from 'vue'
-
-onMounted(() => {
-  refreshCaptcha()
-})
-</script>
-
 <template>
-  <div id='zohoSupportWebToCase' align='center'>
-    <form
-      ref="formRef"
-      name='zsWebToCase_1148939000000379137'
-      id='zsWebToCase_1148939000000379137'
-      action='https://desk.zoho.com/support/WebToCase'
-      method='POST'
-      @submit.prevent="handleSubmit"
-      @reset.prevent="handleReset"
-      enctype='multipart/form-data'
-    >
-      <!-- Hidden Zoho fields - preserved exactly as they appear -->
-      <input type='hidden' name='xnQsjsdp' value='edbsnfeb76ea8da9d021fe11006adbc11fa5d' />
-      <input type='hidden' name='xmIwtLD' value='edbsn7fc94d202a50ce62921faaea62ba87fb350e2ce7d0c41d3b2be00b28efd48882' />
-      <input type='hidden' name='xJdfEaS' value='' />
-      <input type='hidden' name='actionType' value='Q2FzZXM=' />
-      <input type="hidden" id="property(module)" value="Cases" />
-      <input type="hidden" id="dependent_field_values_Cases" value="&#x7b;&#quot;JSON_VALUES&#quot;&#x3a;&#x7b;&#x7d;,&#quot;JSON_SELECT_VALUES&#quot;&#x3a;&#x7b;&#x7d;,&#quot;JSON_MAP_DEP_LABELS&#quot;&#x3a;&#x5b;&#x5d;&#x7d;" />
-      <input type='hidden' name='returnURL' value='https&#x3a;&#x2f;&#x2f;docs.taskratchet.com&#x2f;' />
-
-      <table border='0' cellspacing='0' class='zsFormClass'>
-        <tr>
-          <td nowrap class='zsFontClass ' width='25%' align='left'>Last Name&nbsp;&nbsp;</td>
-          <td align='left' width='75%'>
+    <section class="contact-section">
+        <div class="contact-intro">
+            <h2 class="contact-title">Get in Touch</h2>
+            <p class="contact-description">
+                Fill out the form below and we'll get back to you as soon as
+                possible.
+            </p>
+        </div>
+
+        <form
+            class="contact-form"
+            action="https://api.web3forms.com/submit"
+            method="POST"
+        >
             <input
-              type='text'
-              maxlength='120'
-              name='Contact Name'
-              class='manfieldbdr'
-              v-model="form.lastName"
+                type="hidden"
+                name="access_key"
+                value="b564b69f-d1d1-4cf0-a79a-4eba504e7f72"
             />
-          </td>
-        </tr>
-        <tr>
-          <td nowrap class='zsFontClass ' width='25%' align='left'>Email&nbsp;&nbsp;</td>
-          <td align='left' width='75%'>
             <input
-              type='text'
-              maxlength='120'
-              name='Email'
-              class='manfieldbdr'
-              v-model="form.email"
+                type="hidden"
+                name="subject"
+                value="New Contact Form Submission from Web3Forms"
             />
-          </td>
-        </tr>
-        <tr>
-          <td nowrap class='zsFontClass ' width='25%' align='left'>Subject&nbsp;&nbsp;</td>
-          <td align='left' width='75%'>
-            <input
-              type='text'
-              maxlength='255'
-              name='Subject'
-              class='manfieldbdr'
-              v-model="form.subject"
-            />
-          </td>
-        </tr>
-        <tr>
-          <td nowrap class='zsFontClass' width='25%' align='left'>Captcha&nbsp;</td>
-          <td>
-            <div id='zsCaptchaLoading'>
-              <strong>Loading... <br>
-                <br>
-              </strong>
-            </div>
-            <div id='zsCaptcha' style='display:none;'>
-              <img src='#' id='zsCaptchaUrl' name="zsCaptchaImage">
-              <a href='javascript:;' style='color:#00a3fe; cursor:pointer; margin-left:10px; vertical-align:middle;text-decoration: none;' class='zsFontClass' @click='refreshCaptcha()'>Refresh</a>
-            </div>
-            <div>
-              <input
-                type='text'
-                name='zsWebFormCaptchaWord'
-                v-model="form.captcha"
-              />
-              <input type='hidden' name='zsCaptchaSrc' value='' />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td style='padding: 11px 5px 0px 5px;' colspan='2' align='center' width='25%'>
-            <input type='submit' id="zsSubmitButton_1148939000000379137" class='zsFontClass' value='Submit'> &nbsp; &nbsp;
-            <input type='button' class='zsFontClass' value='Reset' @click="handleReset">
-          </td>
-        </tr>
-        <tr>
-          <td width='25%' align='left'></td>
-          <td style='padding: 0px 5px;' align='left' width='75%'>
-            <div class='wb_FtCon wb_common'>
-              <span>powered by </span>
-              <a target='_blank' rel='noopener noreferrer' href='https://zoho.com/desk' class='wb_logoCon'>
-                <img class='wb_logo' src='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/portalLogo.de847024ebc0131731a3.png' />
-              </a>
+            <input type="hidden" name="from_name" value="My Website" />
+            <!-- More custom ization options available in the docs: https://docs.web3forms.com -->
+
+            <div class="form-group-container">
+                <div class="form-group">
+                    <label for="name" class="form-label">Name</label>
+                    <input
+                        id="name"
+                        name="name"
+                        class="form-input"
+                        placeholder="Your name"
+                        type="text"
+                    />
+                </div>
+                <div class="form-group">
+                    <label for="email" class="form-label">Email</label>
+                    <input
+                        id="email"
+                        name="email"
+                        class="form-input"
+                        placeholder="Your email"
+                        type="email"
+                    />
+                </div>
+                <div class="form-group">
+                    <label for="message" class="form-label">Message</label>
+                    <textarea
+                        class="form-textarea"
+                        id="message"
+                        name="message"
+                        placeholder="Your message"
+                    ></textarea>
+                </div>
             </div>
-          </td>
-        </tr>
-      </table>
-    </form>
-  </div>
+            <button class="form-submit" type="submit">Send Message</button>
+        </form>
+    </section>
 </template>
 
 <style scoped>
-/* Zoho form styles */
-#zohoSupportWebToCase textarea,
-#zohoSupportWebToCase input[type='text'],
-#zohoSupportWebToCase input[type='date'],
-#zohoSupportWebToCase select,
-.wb_common {
-    width: 280px;
-}
-
-#zohoSupportWebToCase td {
-    padding: 11px 5px;
-}
-
-#zohoSupportWebToCase textarea,
-#zohoSupportWebToCase input[type='text'],
-#zohoSupportWebToCase input[type='date'],
-#zohoSupportWebToCase select {
-    border: 1px solid #ddd;
-    padding: 3px 5px;
-    border-radius: 3px;
-    background-color: var(--vp-c-bg);
-    color: var(--vp-c-text-1);
-}
-
-/* Dark mode support */
-.dark #zohoSupportWebToCase textarea,
-.dark #zohoSupportWebToCase input[type='text'],
-.dark #zohoSupportWebToCase input[type='date'],
-.dark #zohoSupportWebToCase select {
-    border: 1px solid var(--vp-c-border);
-    background-color: var(--vp-c-bg-alt);
-    color: var(--vp-c-text-1);
+.contact-section {
+    width: 100%;
+    max-width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 3rem 1rem;
 }
 
-#zohoSupportWebToCase select {
-    box-sizing: unset
+.contact-intro > * + * {
+    margin-top: 1rem;
 }
 
-#zohoSupportWebToCase .wb_selectDate {
-    width: auto
+.contact-title {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+    font-weight: 700;
 }
 
-#zohoSupportWebToCase input.wb_cusInput {
-    width: 108px
+.contact-description {
+    color: rgb(107 114 128);
 }
 
-.wb_FtCon {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 15px;
-    padding-left: 10px
+.form-group-container {
+    display: grid;
+    gap: 1rem;
+    margin-top: 2rem;
 }
 
-.wb_logoCon {
+.form-group {
     display: flex;
-    margin-left: 5px
-}
-
-.wb_logo {
-    max-width: 16px;
-    max-height: 16px;
-}
-
-#zohoSupportWebToCase .wb_multi_pick {
-    border: 1px solid #ddd;
-    padding: 3px 5px;
-    border-radius: 3px;
-    width: 280px;
-    height: 95px;
-    overflow-y: auto;
-}
-
-#zohoSupportWebToCase .wb_multi_pick_label {
-    display: block;
-}
-
-#zohoSupportWebToCase .wb_multi_pick_input,
-.wb_multi_pick_input_all {
-    vertical-align: middle;
-    margin-right: 5px;
+    flex-direction: column;
 }
 
-.zsFontClass {
-    color: var(--vp-c-text-1);
-    font-family: Arial;
-    font-size: 13px
+.form-label {
+    margin-bottom: 0.5rem;
 }
 
-/* Dark mode table styles */
-.dark .zsFontClass {
-    color: var(--vp-c-text-1);
-}
-
-/* Dark mode link styles */
-.dark #zohoSupportWebToCase a {
-    color: var(--vp-c-brand-1);
-}
-
-/* Dark mode button styles */
-.dark #zohoSupportWebToCase input[type='submit'],
-.dark #zohoSupportWebToCase input[type='button'] {
-    background-color: var(--vp-c-bg-alt);
-    color: var(--vp-c-text-1);
-    border: 1px solid var(--vp-c-border);
-    border-radius: 4px;
-    padding: 6px 12px;
-}
-
-.dark #zohoSupportWebToCase input[type='submit']:hover,
-.dark #zohoSupportWebToCase input[type='button']:hover {
-    background-color: var(--vp-c-brand-1);
-    color: var(--vp-c-white);
-}
-
-.manfieldbdr {
-    border-left: 1px solid #ff6448 !important
-}
-
-.hleft {
-    text-align: left;
-}
-
-input[type=file]::-webkit-file-upload-button {
-    cursor: pointer;
-}
-
-.wtcsepcode {
-    margin: 0px 15px;
-    color: #aaa;
-    float: left;
-}
-
-.wtccloudattach {
-    float: left;
-    color: #00a3fe !important;
-    cursor: pointer;
-    text-decoration: none !important;
-}
-
-.wtccloudattach:hover {
-    text-decoration: none !important;
-}
-
-.wtcuploadinput {
-    cursor: pointer;
-    float: left;
-    width: 62px;
-    margin-top: -20px;
-    opacity: 0;
-    clear: both;
-}
-
-.wtcuploadfile {
-    float: left;
-    color: #00a3fe;
-}
-
-.filenamecls {
-    margin-right: 15px;
-    float: left;
-    margin-top: 5px;
-}
-
-.clboth {
-    clear: both;
+.form-input,
+.form-textarea {
+    padding: 0.5rem;
+    border: 1px solid #e5e7eb;
+    display: flex;
+    height: 2.5rem;
+    width: 100%;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background-color: transparent;
 }
 
-#zsFileBrowseAttachments {
-    clear: both;
-    margin: 5px 0px 10px;
+.form-input::placeholder,
+.form-textarea:focus-visible {
+    color: rgb(60, 60, 67);
 }
 
-.zsFontClass {
-    vertical-align: top;
+.dark .form-input::placeholder,
+.dark .form-textarea:focus-visible {
+    color: rgba(255, 255, 245, 0.86);
 }
 
-#tooltip-zc {
-    font: normal 12px Arial, Helvetica, sans-serif;
-    line-height: 18px;
-    position: absolute;
-    padding: 8px;
-    margin: 20px 0 0;
-    background: #fff;
-    border: 1px solid #528dd1;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    color: #eee;
-    -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
-    z-index: 10000;
-    color: #777
+.form-input:focus-visible,
+.form-textarea:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: 2px;
 }
 
-.wtcmanfield {
-    color: #f00;
-    font-size: 16px;
-    position: relative;
-    top: 2px;
-    left: 1px;
+.form-textarea {
+    min-height: 120px;
 }
 
-#zsCloudAttachmentIframe {
+.form-submit {
     width: 100%;
-    height: 100%;
-    z-index: 99999 !important;
-    position: fixed;
-    left: 0px;
-    top: 0px;
-    border-style: none;
-    display: none;
-    background-color: #fff;
-}
-
-.wtchelpinfo {
-    background-position: -246px -485px;
-    width: 15px;
-    height: 15px;
-    display: inline-block;
-    position: relative;
-    top: 2px;
-    background-image: url(https://d1ydxa2xvtn0b5.cloudfront.net/app/images/zs-mpro.b6c9cf2347c62390fdcb.png);
-}
-
-.zsMaxSizeMessage {
-    font-size: 13px;
+    margin-top: 1.2rem;
+    background-color: #3124ca;
+    color: #fff;
+    padding: 13px 5px;
+    border-radius: 0.375rem;
 }
 </style>

From 27761784011a8535c6bfa0a8053757bf7dd9ebb5 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:49:56 -0400
Subject: [PATCH 08/12] Update .vitepress/theme/components/ContactForm.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .vitepress/theme/components/ContactForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index cf9fa08..e738a7b 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -24,7 +24,7 @@
                 value="New Contact Form Submission from Web3Forms"
             />
             <input type="hidden" name="from_name" value="My Website" />
-            <!-- More custom ization options available in the docs: https://docs.web3forms.com -->
+            <!-- More customization options available in the docs: https://docs.web3forms.com -->
 
             <div class="form-group-container">
                 <div class="form-group">

From d27b37fc064bec9a12934cf51aa9c187a53319f4 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 10:54:44 -0400
Subject: [PATCH 09/12] style tweaks

---
 .vitepress/theme/components/ContactForm.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index cf9fa08..165761f 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -113,12 +113,10 @@
     background-color: transparent;
 }
 
-.form-input::placeholder,
 .form-textarea:focus-visible {
     color: rgb(60, 60, 67);
 }
 
-.dark .form-input::placeholder,
 .dark .form-textarea:focus-visible {
     color: rgba(255, 255, 245, 0.86);
 }

From 40ca25792d7522b683921ac762f65d04348d533a Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 11:06:17 -0400
Subject: [PATCH 10/12] fix: address pr feedback

---
 .vitepress/theme/components/ContactForm.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index bed9820..40e7a0c 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -1,3 +1,7 @@
+<script setup>
+const accessKey = import.meta.env.VITE_WEB3FORMS_KEY || 'YOUR_ACCESS_KEY_HERE'
+</script>
+
 <template>
     <section class="contact-section">
         <div class="contact-intro">
@@ -16,7 +20,7 @@
             <input
                 type="hidden"
                 name="access_key"
-                value="b564b69f-d1d1-4cf0-a79a-4eba504e7f72"
+                :value="accessKey"
             />
             <input
                 type="hidden"
@@ -35,6 +39,7 @@
                         class="form-input"
                         placeholder="Your name"
                         type="text"
+                        required
                     />
                 </div>
                 <div class="form-group">
@@ -45,6 +50,7 @@
                         class="form-input"
                         placeholder="Your email"
                         type="email"
+                        required
                     />
                 </div>
                 <div class="form-group">
@@ -54,6 +60,7 @@
                         id="message"
                         name="message"
                         placeholder="Your message"
+                        required
                     ></textarea>
                 </div>
             </div>

From 9547738dcd98d42ef086bef07869ec5cdb57503e Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 11:28:39 -0400
Subject: [PATCH 11/12] use .env

---
 .gitignore                                  | 1 +
 .vitepress/theme/components/ContactForm.vue | 9 +++------
 src/.env.example                            | 1 +
 3 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 src/.env.example

diff --git a/.gitignore b/.gitignore
index f94d810..3969d26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ vendor
 node_modules
 .vitepress/dist
 .vitepress/cache
+.env
diff --git a/.vitepress/theme/components/ContactForm.vue b/.vitepress/theme/components/ContactForm.vue
index 40e7a0c..6421673 100644
--- a/.vitepress/theme/components/ContactForm.vue
+++ b/.vitepress/theme/components/ContactForm.vue
@@ -1,5 +1,6 @@
 <script setup>
-const accessKey = import.meta.env.VITE_WEB3FORMS_KEY || 'YOUR_ACCESS_KEY_HERE'
+console.log(import.meta.env);
+const accessKey = import.meta.env.VITE_WEB3FORMS_KEY || "YOUR_ACCESS_KEY_HERE";
 </script>
 
 <template>
@@ -17,11 +18,7 @@ const accessKey = import.meta.env.VITE_WEB3FORMS_KEY || 'YOUR_ACCESS_KEY_HERE'
             action="https://api.web3forms.com/submit"
             method="POST"
         >
-            <input
-                type="hidden"
-                name="access_key"
-                :value="accessKey"
-            />
+            <input type="hidden" name="access_key" :value="accessKey" />
             <input
                 type="hidden"
                 name="subject"
diff --git a/src/.env.example b/src/.env.example
new file mode 100644
index 0000000..b358c69
--- /dev/null
+++ b/src/.env.example
@@ -0,0 +1 @@
+VITE_WEB3FORMS_KEY=value

From ebe58051646ba7f964c5bcf551ef5dd5378c2b80 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Fri, 27 Jun 2025 11:33:14 -0400
Subject: [PATCH 12/12] pin linkspector

---
 .github/workflows/ci.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 62d7cd2..1b2c1b4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,14 +9,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: asdf-vm/actions/install@v3
-      - uses: UmbrellaDocs/action-linkspector@v1
+      - uses: UmbrellaDocs/action-linkspector@v1.2.5
   find-uvis:
     runs-on: ubuntu-latest
     permissions:
       contents: read
-      pull-requests: write  # Required for commenting on PRs
+      pull-requests: write # Required for commenting on PRs
     steps:
       - uses: narthur/uvi-finder@v1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          openai-api-key: ${{ secrets.OPENAI_API_KEY }}
\ No newline at end of file
+          openai-api-key: ${{ secrets.OPENAI_API_KEY }}