Merge pull request 'Add working contact form' (#4) from codex/contact-form into main

Reviewed-on: https://git.bcgen.ie/familyfedie/familyfedie-website/pulls/4

archive-source/contact.html

@@ -83,10 +83,10 @@ var parabola_settings = {"masonry":"0","magazine":"0","mobile":"1","fitvids":"1"
 						<p>We&#8217;re conveniently located in Dublin City Centre, directly across from the James Joyce Center. Feel free to drop by anytime, since most days someone is around to offer you a cup of tea and a friendly chat about our beliefs.</p>
 <p>Our address is:</p>
 <p><strong>19 North Great Georges St.</strong><br /><strong> Dublin 1, Ireland</strong></p>
-<p>Feel free to email us any questions you may have or to book an appointment to hear our lecture series of the Divine Principle or to organize a religious event at our church center: <a href="mailto:info@unification.ie">info@unification.ie</a></p>
+<p>Feel free to email us any questions you may have or to book an appointment to hear our lecture series of the Divine Principle or to organize a religious event at our church center: <a href="mailto:directors@familyfed.ie">directors@familyfed.ie</a></p>
 
 
-<p><a class="button" href="mailto:info@unification.ie">Email us</a></p>
+<p><a class="button" href="mailto:directors@familyfed.ie">Email us</a></p>
 																	</div><!-- .entry-content -->
 				</div><!-- #post-## -->
 

css/site.css

@@ -157,3 +157,62 @@ body.custom-background { background-color: #ffffff; }
     font-size: 21px;
   }
 }
+
+/* Contact page form. */
+.contact-form {
+  display: grid;
+  gap: 14px;
+  max-width: 620px;
+  margin: 22px 0 0;
+}
+
+.contact-field label {
+  display: block;
+  margin-bottom: 5px;
+  color: #444444;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.contact-field input,
+.contact-field select,
+.contact-field textarea {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+}
+
+.contact-field input,
+.contact-field select {
+  min-height: 38px;
+}
+
+.contact-field textarea {
+  min-height: 150px;
+  resize: vertical;
+}
+
+.contact-field input:focus,
+.contact-field select:focus,
+.contact-field textarea:focus {
+  outline: 2px solid #bf4d28;
+  outline-offset: 2px;
+}
+
+.contact-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.contact-actions .button {
+  margin: 0;
+  cursor: pointer;
+}
+
+.contact-form-status {
+  min-height: 1.4em;
+  margin: 0;
+  color: #5c5c56;
+}

src/content/pages/contact.html

@@ -5,9 +5,39 @@
 						<p>We&#8217;re conveniently located in Dublin City Centre, directly across from the James Joyce Center. Feel free to drop by anytime, since most days someone is around to offer you a cup of tea and a friendly chat about our beliefs.</p>
 <p>Our address is:</p>
 <p><strong>19 North Great Georges St.</strong><br /><strong> Dublin 1, Ireland</strong></p>
-<p>Feel free to email us any questions you may have or to book an appointment to hear our lecture series of the Divine Principle or to organize a religious event at our church center: <a href="mailto:info@unification.ie">info@unification.ie</a></p>
+<p>Feel free to email us any questions you may have or to book an appointment to hear our lecture series of the Divine Principle or to organize a religious event at our church center: <a href="mailto:directors@familyfed.ie">directors@familyfed.ie</a></p>
 
+<form id="contact-form" class="contact-form" action="mailto:directors@familyfed.ie" method="post" enctype="text/plain">
+  <div class="contact-field">
+    <label for="contact-name">Name</label>
+    <input id="contact-name" name="name" type="text" autocomplete="name" required />
+  </div>
 
-<p><a class="button" href="mailto:info@unification.ie">Email us</a></p>
+  <div class="contact-field">
+    <label for="contact-email">Email</label>
+    <input id="contact-email" name="email" type="email" autocomplete="email" required />
+  </div>
+
+  <div class="contact-field">
+    <label for="contact-topic">Topic</label>
+    <select id="contact-topic" name="topic" required>
+      <option value="">Choose a topic</option>
+      <option value="General enquiry">General enquiry</option>
+      <option value="Divine Principle lecture series">Divine Principle lecture series</option>
+      <option value="Sunday service">Sunday service</option>
+      <option value="Event booking">Event booking</option>
+    </select>
+  </div>
+
+  <div class="contact-field">
+    <label for="contact-message">Message</label>
+    <textarea id="contact-message" name="message" rows="7" required></textarea>
+  </div>
+
+  <div class="contact-actions">
+    <button class="button" type="submit">Send message</button>
+    <p id="contact-form-status" class="contact-form-status" aria-live="polite"></p>
+  </div>
+</form>
 																	</div><!-- .entry-content -->
 				</div><!-- #post-## -->

src/pages/contact.astro

@@ -12,4 +12,43 @@ import articleHtml from "../content/pages/contact.html?raw";
   canonical="/contact.html"
 >
   <TwoColumnPage articleHtml={articleHtml} />
+  <script is:inline slot="scripts">
+    (() => {
+      const form = document.getElementById("contact-form");
+      const status = document.getElementById("contact-form-status");
+
+      if (!form) {
+        return;
+      }
+
+      form.addEventListener("submit", (event) => {
+        event.preventDefault();
+
+        if (!form.checkValidity()) {
+          form.reportValidity();
+          return;
+        }
+
+        const formData = new FormData(form);
+        const name = String(formData.get("name") || "").trim();
+        const email = String(formData.get("email") || "").trim();
+        const topic = String(formData.get("topic") || "").trim();
+        const message = String(formData.get("message") || "").trim();
+        const subject = `FFWPU Ireland contact: ${topic}`;
+        const body = [
+          `Name: ${name}`,
+          `Email: ${email}`,
+          `Topic: ${topic}`,
+          "",
+          message,
+        ].join("\n");
+
+        if (status) {
+          status.textContent = "Opening your email app with the message ready to send.";
+        }
+
+        window.location.href = `mailto:directors@familyfed.ie?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      });
+    })();
+  </script>
 </SiteLayout>