1️⃣ Proč zvolit formulář bez pluginu

Většina WordPress webů používá doplňky jako WPForms nebo Contact Form 7. Ty sice fungují, ale často:

• zpomalují načítání webu,
• vyžadují pravidelné aktualizace a konfiguraci,
• komplikují doručování e-mailů (bez správného SMTP nastavení).

Pomocí služby Formspree.io vytvoříte elegantní a rychlý formulář, který funguje spolehlivě na všech webech.

2️⃣ Registrace účtu na Formspree.io

Začněte vytvořením bezplatného účtu:

1. Přejděte na formspree.io
2. Klikněte na Start for free a zaregistrujte se přes Google nebo e-mail
3. Na stránce Account → Linked Emails přidejte a ověřte svou e-mailovou adresu

Po ověření můžete vytvořit nový formulář a získáte svůj jedinečný Form Endpoint, např.:
https://formspree.io/f/xjkaaeyw

3️⃣ Implementace formuláře do WordPressu

Vložte následující kód do HTML widgetu v Elementoru nebo do editoru na stránce „Kontakt“:

<form action="https://formspree.io/f/xjkaaeyw" method="POST" style="display:flex;flex-direction:column;gap:15px;max-width:600px;margin:auto;">
  <input type="text" name="name" placeholder="Vaše jméno *" required style="padding:12px;border:1px solid #ccc;border-radius:6px;">
  <input type="email" name="email" placeholder="Váš e-mail *" required style="padding:12px;border:1px solid #ccc;border-radius:6px;">
  <textarea name="message" placeholder="Vaše zpráva *" required style="padding:12px;border:1px solid #ccc;border-radius:6px;min-height:130px;"></textarea>
  <button type="submit" style="background:#0066cc;color:white;padding:12px;border:none;border-radius:6px;cursor:pointer;font-weight:600;">Odeslat zprávu</button>
</form>

Po odeslání formuláře bude zpráva doručena přímo na Váš e-mail. Odeslání můžete doplnit o potvrzovací hlášku pomocí JavaScriptu:

<script>
const form = document.querySelector('form[action="https://formspree.io/f/xjkaaeyw"]');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);
  const response = await fetch(form.action, {
    method: form.method,
    body: data,
    headers: { 'Accept': 'application/json' }
  });
  if (response.ok) {
    alert('✅ Děkuji za zprávu! Ozvu se Vám co nejdříve.');
    form.reset();
  } else {
    alert('⚠️ Došlo k chybě při odesílání.');
  }
});
</script>

4️⃣ Otestování funkčnosti

Po vložení kódu formulář vyzkoušejte:

• Vyplňte testovací údaje a odešlete zprávu
• Zkontrolujte doručený e-mail (včetně složky Spam)
• Ve Formspree účtu uvidíte testovací záznam

Pokud se vše zobrazí správně, je formulář plně funkční 🎉

5️⃣ Výhody tohoto řešení

• ✅ Žádné pluginy → web zůstane lehký a rychlý
• 📩 Zprávy chodí přímo do e-mailu
• 🔐 Bezpečné odesílání přes HTTPS
• 🧹 Snadná údržba – nic není potřeba aktualizovat