Add the contact page

assets/package-lock.json

@@ -1,6 +1,8 @@
 {
-  "requires": true,
+  "name": "millironx.github.io",
+  "version": "0.0.0",
   "lockfileVersion": 1,
+  "requires": true,
   "dependencies": {
     "@fortawesome/fontawesome-pro": {
       "version": "5.15.4",
@@ -26,6 +28,11 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
       "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
+    "jquery-mask-plugin": {
+      "version": "1.14.16",
+      "resolved": "https://registry.npmjs.org/jquery-mask-plugin/-/jquery-mask-plugin-1.14.16.tgz",
+      "integrity": "sha512-reywdHlYEkPbzWjTpcc1fk9XQ3PLvO5dzEAVqy8zI7NTF22tB1HbeU3iboZTLdkBEPaWAqeI2HtEjsGQ4roZKw=="
     }
   }
 }

assets/package.json

@@ -18,6 +18,7 @@
     "@popperjs/core": "^2.11.2",
     "bootstrap": "^5.1.3",
     "fittext.js": "^1.2.0",
-    "jquery": "^3.6.0"
+    "jquery": "^3.6.0",
+    "jquery-mask-plugin": "^1.14.16"
   }
 }

assets/scripts/phone-masking.js

@@ -0,0 +1 @@
+$('#phone').mask('(000) 000-0000')

content/contact/_index.html

@@ -0,0 +1,50 @@
+---
+title: Contact Me
+cardImage: venice-mailbox
+motto: Contact Me
+---
+
+<form class="form-horizontal"
+    action="https://usebasin.com/f/787df7bfd22e"
+    method="post">
+    <fieldset>
+        <legend>Contact Me</legend>
+        <input type="hidden" name="_gotcha">
+        <div class="form-group">
+            <label for="name" class="col-lg-2 control-label">Name</label>
+            <div class="col-lg-10">
+                <input type="text" class="form-control" id="name" name="name" placeholder="Jay Lush" required>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="email" class="col-lg-2 control-label">Email</label>
+            <div class="col-lg-10">
+                <input type="email" class="form-control" id="email" name="email" placeholder="jlush@iastate.edu" required>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="phone" class="col-lg-2 control-label">Phone number</label>
+            <div class="col-lg-10">
+                <input type="tel" class="form-control" id="phone" name="phone" placeholder="(515) 294-2160">
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="subject" class="col-lg-2 control-label">Subject</label>
+            <div class="col-lg-10">
+                <input type="text" class="form-control" id="subject" name="subject" placeholder="Beef genetics" required>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="message" class="col-lg-2 control-label">Message</label>
+            <div class="col-lg-10">
+                <textarea rows="5" class="form-control font-sans" id="message" name="body" required style="min-height: 72pt;"></textarea>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-lg-10 col-lg-offset-2">
+                <button type="reset" class="btn btn-default">Cancel</button>
+                <button type="submit" class="btn btn-primary pageclip-form__submit"><span>Submit</span></button>
+            </div>
+        </div>
+    </fieldset>
+</form>

layouts/_default/baseof.html

@@ -116,8 +116,10 @@
     {{ $twbsjs    := resources.Get "node_modules/bootstrap/dist/js/bootstrap.js" }}
     {{ $fajs      := resources.Get "node_modules/@fortawesome/fontawesome-pro/js/all.js" }}
     {{ $fittextjs := resources.Get "node_modules/fittext.js/jquery.fittext.js" }}
+    {{ $jqmaskjs  := resources.Get "node_modules/jquery-mask-plugin/dist/jquery.mask.js" }}
     {{ $scrolljs  := resources.Get "scripts/scroll-effect.js" }}
-    {{ $alljs := slice $jqueryjs $popperjs $twbsjs $fajs $fittextjs $scrolljs | resources.Concat "js/bundle.js" | minify | fingerprint }}
+    {{ $maskjs    := resources.Get "scripts/phone-masking.js" }}
+    {{ $alljs := slice $jqueryjs $popperjs $twbsjs $fajs $fittextjs $scrolljs $jqmaskjs $maskjs | resources.Concat "js/bundle.js" | minify | fingerprint }}
     <script src="{{ $alljs.Permalink }}"></script>
 </body>
 </html>