https://www.athensbuilding.com/js/contact-form.js

1/* Athens Building Company — contact-form.js
2   Submits the contact form via EmailJS using the standard Townsite template.
3   --------------------------------------------------------------------------
4   SETUP:
5   1. Sign in to https://dashboard.emailjs.com (Townsite account)
6   2. Replace the three placeholders below with the project's real IDs:
7        EMAILJS_PUBLIC_KEY  — Account → API Keys → "Public Key"
8        EMAILJS_SERVICE_ID  — Email Services → service id (e.g., "service_xxxx")
9        EMAILJS_TEMPLATE_ID — Email Templates → template id (e.g., "template_xxxx")
10   3. The shared "Townsite Contact Form Template" expects these fields — every
11      one of them must exist as a form input or the send fails:
12        client_email  — hidden input; fills the template's "To Email" field
13        business_name — hidden input; used in the subject and From Name
14        from_name, from_email, phone, message
15*/
16
17(function () {
18  'use strict';
19
20  const EMAILJS_PUBLIC_KEY  = 'k2OPU0_-FMfkM95ii';
21  const EMAILJS_SERVICE_ID  = 'service_xitxjzq';
22  const EMAILJS_TEMPLATE_ID = 'template_4nfqigs';
23
24  const form = document.getElementById('contact-form');
25  if (!form) return;
26
27  const submit = document.getElementById('contact-submit');
28  const hint = document.getElementById('contact-hint');
29
30  if (typeof emailjs === 'undefined') {
31    console.warn('EmailJS SDK not loaded — contact form will not send.');
32    return;
33  }
34
35  emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY });
36
37  const ORIGINAL_BUTTON_TEXT = submit.textContent;
38  const ORIGINAL_HINT = hint.textContent;
39
40  function setState(state, message) {
41    if (state === 'sending') {
42      submit.disabled = true;
43      submit.textContent = 'Sending…';
44      hint.textContent = '';
45      hint.style.color = '';
46    } else if (state === 'success') {
47      submit.disabled = true;
48      submit.textContent = 'Thank you — message sent';
49      hint.textContent = message || 'Tyler will be in touch within one business day.';
50      hint.style.color = 'var(--accent-deep)';
51    } else if (state === 'error') {
52      submit.disabled = false;
53      submit.textContent = ORIGINAL_BUTTON_TEXT;
54      hint.textContent = message || 'Something went wrong — please try again or call (706) 352-9409.';
55      hint.style.color = '#a13b1f';
56    } else {
57      submit.disabled = false;
58      submit.textContent = ORIGINAL_BUTTON_TEXT;
59      hint.textContent = ORIGINAL_HINT;
60      hint.style.color = '';
61    }
62  }
63
64  form.addEventListener('submit', async (e) => {
65    e.preventDefault();
66
67    // Basic native validation first
68    if (!form.checkValidity()) {
69      form.reportValidity();
70      return;
71    }
72
73    setState('sending');
74
75    try {
76      await emailjs.sendForm(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, form);
77      setState('success');
78      form.reset();
79    } catch (err) {
80      console.error('EmailJS send failed:', err);
81      setState('error');
82    }
83  });
84})();