Restore contact form and make it functional with email sending

- Replace mailto link with original contact form (name, email, message fields)
- Add contact API endpoint that sends email via mail() and saves to messages.json
- Restore .contact-form CSS styles and translation keys

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 11:28:26 +02:00
parent 5dfbbacf39
commit dcc1205244
4 changed files with 85 additions and 12 deletions

View File

@@ -15,7 +15,9 @@ const T = {
about_title: 'Mikä tykkää.fi?',
about_text: 'tykkää.fi on avoin yhteisö, jonne kuka tahansa voi tulla jakamaan asioita joista tykkää. Reseptejä, neulomisohjeita, käsityöideoita tai ihan mitä muuta kivaa — tärkeintä on jakamisen ilo. Lisää oma julkaisusi yläkulman napista!',
contact_title: 'Ota yhteyttä',
contact_desc: 'Kysyttävää tai ehdotuksia? Lähetä meille sähköpostia!',
contact_desc: 'Kysyttävää tai ehdotuksia? Lähetä meille viestiä!',
name_ph: 'Nimesi', email_ph: 'Sähköpostisi', msg_ph: 'Viestisi...',
send_btn: 'Lähetä viesti', msg_sent: 'Viesti lähetetty! ✓', msg_error: 'Virhe lähetyksessä. Yritä uudelleen.',
footer: 'Avoin yhteisö kaikille',
modal_by: 'Kirjoittanut',
modal_ingredients: 'Ainekset', modal_steps: 'Ohjeet',
@@ -47,7 +49,9 @@ const T = {
about_title: 'What is tykkää.fi?',
about_text: 'tykkää.fi is an open community where anyone can share things they love. Recipes, knitting patterns, craft ideas or anything fun — the joy of sharing is what matters. Add your own post using the button in the top corner!',
contact_title: 'Get in Touch',
contact_desc: 'Questions or suggestions? Send us an email!',
contact_desc: 'Questions or suggestions? Send us a message!',
name_ph: 'Your name', email_ph: 'Your email', msg_ph: 'Your message...',
send_btn: 'Send Message', msg_sent: 'Message Sent! ✓', msg_error: 'Error sending. Please try again.',
footer: 'Open community for everyone',
modal_by: 'By',
modal_ingredients: 'Ingredients', modal_steps: 'Instructions',
@@ -638,6 +642,29 @@ async function submitPublicPost() {
// ===========================
// CONTACT FORM
// ===========================
// ===========================
// CONTACT FORM
// ===========================
async function handleSubmit(e) {
e.preventDefault();
const btn = e.target.querySelector('button[type="submit"]');
const name = document.getElementById('contact-name').value.trim();
const email = document.getElementById('contact-email').value.trim();
const message = document.getElementById('contact-msg').value.trim();
btn.disabled = true;
try {
await apiPost('contact', { name, email, message });
btn.textContent = t('msg_sent');
btn.style.background = '#5c8a4a';
e.target.reset();
setTimeout(() => { btn.textContent = t('send_btn'); btn.style.background = ''; btn.disabled = false; }, 4000);
} catch {
btn.textContent = t('msg_error');
btn.style.background = '#c04040';
setTimeout(() => { btn.textContent = t('send_btn'); btn.style.background = ''; btn.disabled = false; }, 4000);
}
}
// ===========================
// INIT
// ===========================