Skip to content

Commit 64bb551

Browse files
josuejjv85josuejjv85
committed
Improve EmailJS error handling and user feedback in contact form
1 parent 67d7819 commit 64bb551

File tree

3 files changed

+171
-54
lines changed

3 files changed

+171
-54
lines changed

‎public/contact/index.html‎

Lines changed: 77 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,39 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
357357

358358
<script type="text/javascript">
359359
(function () {
360-
emailjs.init("${HUGO_PARAMS_EMAILJS_PUBLIC_KEY}");
360+
try {
361+
const publicKey = "${HUGO_PARAMS_EMAILJS_PUBLIC_KEY}";
362+
const serviceId = "${HUGO_PARAMS_EMAILJS_SERVICE_ID}";
363+
const templateId = "${HUGO_PARAMS_EMAILJS_TEMPLATE_ID}";
364+
365+
366+
const isConfigValid =
367+
publicKey &&
368+
!publicKey.includes("${HUGO") &&
369+
serviceId &&
370+
!serviceId.includes("${HUGO") &&
371+
templateId &&
372+
!templateId.includes("${HUGO");
373+
374+
if (!isConfigValid) {
375+
console.error("EmailJS configuration is incomplete or invalid");
376+
377+
const formMessage = document.getElementById("formMessage");
378+
const errorMessage = document.querySelector(".error-message");
379+
if (formMessage && errorMessage) {
380+
formMessage.classList.remove("hidden");
381+
errorMessage.classList.remove("hidden");
382+
errorMessage.textContent =
383+
"Email service is temporarily unavailable. Please contact us directly at [email protected]";
384+
}
385+
return;
386+
}
387+
388+
emailjs.init(publicKey);
389+
console.log("EmailJS initialized successfully");
390+
} catch (error) {
391+
console.error("Error initializing EmailJS:", error);
392+
}
361393
})();
362394

363395
document
@@ -366,10 +398,17 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
366398
e.preventDefault();
367399

368400

369-
document.getElementById("submitButton").disabled = true;
370-
document
371-
.getElementById("loadingSpinner")
372-
.classList.remove("hidden");
401+
const submitButton = document.getElementById("submitButton");
402+
const loadingSpinner = document.getElementById("loadingSpinner");
403+
const formMessage = document.getElementById("formMessage");
404+
const successMessage = document.querySelector(".success-message");
405+
const errorMessage = document.querySelector(".error-message");
406+
407+
submitButton.disabled = true;
408+
loadingSpinner.classList.remove("hidden");
409+
formMessage.classList.add("hidden");
410+
successMessage.classList.add("hidden");
411+
errorMessage.classList.add("hidden");
373412

374413

375414
const templateParams = {
@@ -380,35 +419,46 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
380419
to_email: "[email protected]",
381420
};
382421

422+
const serviceId = "${HUGO_PARAMS_EMAILJS_SERVICE_ID}";
423+
const templateId = "${HUGO_PARAMS_EMAILJS_TEMPLATE_ID}";
424+
425+
if (
426+
!serviceId ||
427+
serviceId.includes("${HUGO") ||
428+
!templateId ||
429+
templateId.includes("${HUGO")
430+
) {
431+
formMessage.classList.remove("hidden");
432+
errorMessage.classList.remove("hidden");
433+
errorMessage.textContent =
434+
"Email service is temporarily unavailable. Please contact us directly at [email protected]";
435+
submitButton.disabled = false;
436+
loadingSpinner.classList.add("hidden");
437+
return;
438+
}
439+
383440
emailjs
384-
.send(
385-
"${HUGO_PARAMS_EMAILJS_SERVICE_ID}",
386-
"${HUGO_PARAMS_EMAILJS_TEMPLATE_ID}",
387-
templateParams
388-
)
441+
.send(serviceId, templateId, templateParams)
389442
.then(function (response) {
390-
document
391-
.getElementById("formMessage")
392-
.classList.remove("hidden");
393-
document
394-
.querySelector(".success-message")
395-
.classList.remove("hidden");
443+
console.log("Email sent successfully:", response);
444+
formMessage.classList.remove("hidden");
445+
successMessage.classList.remove("hidden");
396446
document.getElementById("contactForm").reset();
397447
})
398448
.catch(function (error) {
399-
document
400-
.getElementById("formMessage")
401-
.classList.remove("hidden");
402-
document
403-
.querySelector(".error-message")
404-
.classList.remove("hidden");
405-
console.error("Error:", error);
449+
console.error("Error sending email:", error);
450+
formMessage.classList.remove("hidden");
451+
errorMessage.classList.remove("hidden");
452+
if (error.text) {
453+
errorMessage.textContent = "Error: " + error.text;
454+
} else {
455+
errorMessage.textContent =
456+
"Unable to send message. Please try again or contact us directly at [email protected]";
457+
}
406458
})
407459
.finally(function () {
408-
document.getElementById("submitButton").disabled = false;
409-
document
410-
.getElementById("loadingSpinner")
411-
.classList.add("hidden");
460+
submitButton.disabled = false;
461+
loadingSpinner.classList.add("hidden");
412462
});
413463
});
414464
</script>

‎ter‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
3+
4+
Commands marked with * may be preceded by a number, _N.
5+
Notes in parentheses indicate the behavior if _N is given.
6+
A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
7+
8+
h H Display this help.
9+
q :q Q :Q ZZ Exit.
10+
---------------------------------------------------------------------------
11+
12+
MMOOVVIINNGG
13+
14+
e ^E j ^N CR * Forward one line (or _N lines).
15+
y ^Y k ^K ^P * Backward one line (or _N lines).
16+
f ^F ^V SPACE * Forward one window (or _N lines).
17+
b ^B ESC-v * Backward one window (or _N lines).

‎themes/pepewebtech/layouts/_default/contact.html‎

Lines changed: 77 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,39 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
263263
<!-- EmailJS Initialization -->
264264
<script type="text/javascript">
265265
(function () {
266-
emailjs.init("{{ .Site.Params.emailjs_public_key }}");
266+
try {
267+
const publicKey = "{{ .Site.Params.emailjs_public_key }}";
268+
const serviceId = "{{ .Site.Params.emailjs_service_id }}";
269+
const templateId = "{{ .Site.Params.emailjs_template_id }}";
270+
271+
// Check if EmailJS configuration is valid
272+
const isConfigValid =
273+
publicKey &&
274+
!publicKey.includes("${HUGO") &&
275+
serviceId &&
276+
!serviceId.includes("${HUGO") &&
277+
templateId &&
278+
!templateId.includes("${HUGO");
279+
280+
if (!isConfigValid) {
281+
console.error("EmailJS configuration is incomplete or invalid");
282+
// Show a message to the user that email functionality is not available
283+
const formMessage = document.getElementById("formMessage");
284+
const errorMessage = document.querySelector(".error-message");
285+
if (formMessage && errorMessage) {
286+
formMessage.classList.remove("hidden");
287+
errorMessage.classList.remove("hidden");
288+
errorMessage.textContent =
289+
"Email service is temporarily unavailable. Please contact us directly at [email protected]";
290+
}
291+
return;
292+
}
293+
294+
emailjs.init(publicKey);
295+
console.log("EmailJS initialized successfully");
296+
} catch (error) {
297+
console.error("Error initializing EmailJS:", error);
298+
}
267299
})();
268300

269301
document
@@ -272,10 +304,17 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
272304
e.preventDefault();
273305

274306
// Show loading state
275-
document.getElementById("submitButton").disabled = true;
276-
document
277-
.getElementById("loadingSpinner")
278-
.classList.remove("hidden");
307+
const submitButton = document.getElementById("submitButton");
308+
const loadingSpinner = document.getElementById("loadingSpinner");
309+
const formMessage = document.getElementById("formMessage");
310+
const successMessage = document.querySelector(".success-message");
311+
const errorMessage = document.querySelector(".error-message");
312+
313+
submitButton.disabled = true;
314+
loadingSpinner.classList.remove("hidden");
315+
formMessage.classList.add("hidden");
316+
successMessage.classList.add("hidden");
317+
errorMessage.classList.add("hidden");
279318

280319
// Get form data
281320
const templateParams = {
@@ -286,35 +325,46 @@ <h2 class="text-3xl font-roboto font-bold text-center mb-12">
286325
to_email: "[email protected]",
287326
};
288327

328+
const serviceId = "{{ .Site.Params.emailjs_service_id }}";
329+
const templateId = "{{ .Site.Params.emailjs_template_id }}";
330+
331+
if (
332+
!serviceId ||
333+
serviceId.includes("${HUGO") ||
334+
!templateId ||
335+
templateId.includes("${HUGO")
336+
) {
337+
formMessage.classList.remove("hidden");
338+
errorMessage.classList.remove("hidden");
339+
errorMessage.textContent =
340+
"Email service is temporarily unavailable. Please contact us directly at [email protected]";
341+
submitButton.disabled = false;
342+
loadingSpinner.classList.add("hidden");
343+
return;
344+
}
345+
289346
emailjs
290-
.send(
291-
"{{ .Site.Params.emailjs_service_id }}",
292-
"{{ .Site.Params.emailjs_template_id }}",
293-
templateParams
294-
)
347+
.send(serviceId, templateId, templateParams)
295348
.then(function (response) {
296-
document
297-
.getElementById("formMessage")
298-
.classList.remove("hidden");
299-
document
300-
.querySelector(".success-message")
301-
.classList.remove("hidden");
349+
console.log("Email sent successfully:", response);
350+
formMessage.classList.remove("hidden");
351+
successMessage.classList.remove("hidden");
302352
document.getElementById("contactForm").reset();
303353
})
304354
.catch(function (error) {
305-
document
306-
.getElementById("formMessage")
307-
.classList.remove("hidden");
308-
document
309-
.querySelector(".error-message")
310-
.classList.remove("hidden");
311-
console.error("Error:", error);
355+
console.error("Error sending email:", error);
356+
formMessage.classList.remove("hidden");
357+
errorMessage.classList.remove("hidden");
358+
if (error.text) {
359+
errorMessage.textContent = "Error: " + error.text;
360+
} else {
361+
errorMessage.textContent =
362+
"Unable to send message. Please try again or contact us directly at [email protected]";
363+
}
312364
})
313365
.finally(function () {
314-
document.getElementById("submitButton").disabled = false;
315-
document
316-
.getElementById("loadingSpinner")
317-
.classList.add("hidden");
366+
submitButton.disabled = false;
367+
loadingSpinner.classList.add("hidden");
318368
});
319369
});
320370
</script>

0 commit comments

Comments
 (0)