Add working contact form #4
3 changed files with 129 additions and 1 deletions
59
css/site.css
59
css/site.css
|
|
@ -157,3 +157,62 @@ body.custom-background { background-color: #ffffff; }
|
||||||
font-size: 21px;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,37 @@
|
||||||
<p><strong>19 North Great Georges St.</strong><br /><strong> Dublin 1, Ireland</strong></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:info@unification.ie">info@unification.ie</a></p>
|
||||||
|
|
||||||
|
<form id="contact-form" class="contact-form" action="mailto:info@unification.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><!-- .entry-content -->
|
||||||
</div><!-- #post-## -->
|
</div><!-- #post-## -->
|
||||||
|
|
|
||||||
|
|
@ -11,4 +11,43 @@ import articleHtml from "../content/pages/contact.html?raw";
|
||||||
canonical="/contact.html"
|
canonical="/contact.html"
|
||||||
>
|
>
|
||||||
<TwoColumnPage articleHtml={articleHtml} />
|
<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:info@unification.ie?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</SiteLayout>
|
</SiteLayout>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue