WIP: Email form

To do:
- [ ] Search for "mailto" and "@" to look for places where email
      addresses need redacting and replacing with links to the contact
      form.
- [ ] Add a link/button to the contact page that opens the email
      authoring page with "general enquiry" selected.
- [ ] Update all email addresses on the contact page to link to the
      email authoring page with the appropriate "purpose" pre-selected.
- [ ] Update Formspree "project" to limit domain email requests can come
      from to be the prod env only.
- [ ] Update all forms to the correct emails when everyone has verified.
- [ ] Deploy and final tests.
- [ ] Send communication to committee members to explain how to get
      started with the system.

contact/email/email.js

@@ -0,0 +1,33 @@
+$(document).ready(() => {
+    const queryStringParameters = new URLSearchParams(window.location.search);
+    const formIdForPurpose = {
+        general: "xblrvaww",
+        chair: "mgvwglzd",
+        vicechair: "mvgpebqj",
+        secretary: "mwpegnqg",
+        treasurer: "mrbznaaz",
+        membership: "xjkbneeg",
+        rallies: "mdknqlle",
+        magazine: "manwrddo",
+        spares: "xqazrddb",
+        regalia: "xldrqwwl",
+        website: "xyzgrddd"
+    };
+
+    const setFormIdOnFormElement = formId => $("#form").attr("action", `https://formspree.io/f/${formId}`);
+
+    if (queryStringParameters.has("purpose")) {
+        const purpose = queryStringParameters.get("purpose");
+
+        if (formIdForPurpose.hasOwnProperty(purpose)) {
+            const formId = formIdForPurpose[purpose];
+            $("#purpose").val(purpose);
+            setFormIdOnFormElement(formId);
+        }
+    }
+
+    $("#purpose").on("change", ({ target }) => {
+        const formId = formIdForPurpose[target.value];
+        $("#form").attr("action", `https://formspree.io/f/${formId}`);
+    });
+});

contact/email/index.html

@@ -0,0 +1,97 @@
+---
+title: Send Email
+section: contact
+customstyles: true
+scripts: <script src="/libraries/jquery-3.6.0.slim.min.js" defer></script>
+---
+
+<main>
+    <article>
+        <ol id="breadcrumb">
+            <li>
+                <a href="{{ site.baseurl }}/">Home</a>
+            </li>
+            <li>
+                <a href="{{ site.baseurl }}/contact">Contact</a>
+            </li>
+            <li>Send Email</li>
+        </ol>
+        <div id="content">
+            <h1>Send Email</h1>
+            <form id="form" action="https://formspree.io/f/xblrvaww" method="post" accept-charset="utf-8">
+                <fieldset>
+                    <label>
+                        <h2>Query purpose / recipient</h2>
+                        <select
+                            id="purpose"
+                            required="true"
+                            placeholder="Query purpose / recipient"
+                        >
+                            <option value="general">General enquiry (to James Chalk)</option>
+                            <option value="chair">For the chairperson (to James Chalk)</option>
+                            <option value="vicechair">For the vice chairperson (to Richard Hughes)</option>
+                            <option value="secretary">For the secretary (to John Corley)</option>
+                            <option value="treasurer">For the treasurer (to Paul Norton)</option>
+                            <option value="membership">Membership (to John Corley)</option>
+                            <option value="rallies">Rallies (to James Chalk)</option>
+                            <option value="magazine">Magazine (to Barbara Davies)</option>
+                            <option value="spares">Spares (to David Spence)</option>
+                            <option value="regalia">Regalia (to James Chalk)</option>
+                            <option value="website">Website (to Rob Davies)</option>
+                        </select>
+                    </label>
+                    <label>
+                        <h2>Your full name</h2>
+                        <input
+                            id="name"
+                            name="name"
+                            type="text"
+                            required="true"
+                            placeholder="Your full name"
+                        >
+                        <span><b>E.g.</b> <i>Joe Bloggs</i></span>
+                    </label>
+                    <label>
+                        <h2>Your email address</h2>
+                        <input
+                            id="email"
+                            name="_replyto"
+                            type="email"
+                            required="true"
+                            placeholder="Your email address"
+                        >
+                        <span><b>E.g.</b> <i>[email protected]</i></span>
+                    </label>
+                    <label>
+                        <h2>Subject</h2>
+                        <input
+                            id="subject"
+                            name="_subject"
+                            type="text"
+                            required="true"
+                            placeholder="Email subject"
+                        >
+                        <span><b>E.g.</b> <i>Car for Sale Advert</i></span>
+                    </label>
+                    <label>
+                        <h2>Your query…</h2>
+                        <textarea
+                            name="message"
+                            required="true"
+                            placeholder="Your query…"
+                        ></textarea>
+                    </label>
+                </fieldset>
+                <div id="submitContainer">
+                    <input
+                        id="submit"
+                        type="submit"
+                        value="Send email"
+                    >
+                </div>
+            </form>
+        </div>
+    </article>
+    <script>const siteBaseUrl = "{{ site.baseurl }}";</script>
+    <script src="{{ site.baseurl }}/contact/email/email.js" defer></script>
+</main>

contact/email/page.css

@@ -0,0 +1,52 @@
+article {
+    width: 100%;
+    margin-right: unset;
+}
+
+form#form fieldset {
+    border: none;
+
+    margin: 0;
+    padding: 0;
+}
+
+form#form fieldset label,
+form#form fieldset label input,
+form#form fieldset label select {
+    font-family: "europa";
+    padding: 5px 5px 4px;
+}
+
+form#form fieldset label:first-child h2 { margin-top: 0; }
+
+form#form fieldset label input#name { min-width: 250px; }
+form#form fieldset label input#email { min-width: 325px; }
+form#form fieldset label input#subject { min-width: 450px; }
+
+form#form fieldset label span {
+    margin-left: 5px;
+    font-size: 10pt;
+    color: darkgrey;
+}
+
+form#form fieldset label textarea {
+    width: calc(100% - 10px);
+    min-height: 250px;
+
+    padding: 5px;
+
+    font-family: europa;
+}
+
+form#form div#submitContainer {
+    display: flex;
+    justify-content: center;
+}
+
+form#form div#submitContainer input#submit {
+    margin-top: 17px;
+    padding: 5px 10px;
+
+    font-family: europa;
+    font-size: 15pt;
+}

contact/email/sent/index.html

@@ -0,0 +1,26 @@
+---
+title: Email Sent Successfully
+section: contact
+customstyles: true
+---
+
+<main>
+    <article>
+        <ol id="breadcrumb">
+            <li>
+                <a href="{{ site.baseurl }}/">Home</a>
+            </li>
+            <li>
+                <a href="{{ site.baseurl }}/contact">Contact</a>
+            </li>
+            <li>
+                <a href="{{ site.baseurl }}/contact/email">Send Email</a>
+            </li>
+            <li>Email Sent Successfully</li>
+        </ol>
+        <div id="content">
+            <h1>Email Sent Successfully</h1>
+            <p>Your email was sent successfully! We will reply to your query as soon as we can.</p>
+        </div>
+    </article>
+</main>

contact/email/sent/page.css

@@ -0,0 +1,4 @@
+article {
+    width: 100%;
+    margin-right: unset;
+}

css/classes.css

@@ -26,7 +26,7 @@
 }
 
 .metadata {
-    font-family: europa;    
+    font-family: europa; 
     font-style: italic;
 }
 

index.html

@@ -1,7 +1,7 @@
 ---
 section: about
 customstyles: true
-scripts: <script src="slideshow/jquery-3.6.0.slim.min.js" defer></script>
+scripts: <script src="/libraries/jquery-3.6.0.slim.min.js" defer></script>
 ---
 
 <main>