Kdy dává formulář bez pluginu smysl

Plugin má své místo u složitějších formulářů, rezervací nebo napojení na CRM. U běžného kontaktního formuláře ale často přidává administraci, skripty a styly, které nepotřebujete. Pokud stavíte jednoduchý web podle návodu jak vytvořit web ve WordPressu, je střídmé řešení často příjemnější na správu i na rychlost.

Princip je jednoduchý: do stránky vložíte HTML formulář, služba zpracuje jeho odeslání a vy dostanete zprávu do e-mailu. Nemusíte programovat vlastní backend ani ukládat zprávy do databáze webu.

Základní HTML formulář

V editoru WordPressu nebo Elementoru vložte HTML blok a nahraďte hodnotu YOUR_FORM_ID identifikátorem vlastního formuláře. Nepřebírejte cizí identifikátor z ukázky.

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <label>
    Jméno
    <input type="text" name="name" autocomplete="name" required>
  </label>

  <label>
    E-mail
    <input type="email" name="email" autocomplete="email" required>
  </label>

  <label>
    Zpráva
    <textarea name="message" rows="6" required></textarea>
  </label>

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">Odeslat zprávu</button>
</form>

Skryté pole je jednoduchá ochrana proti části automatizovaného spamu. U veřejně dostupného webu sledujte, jak formulář funguje v praxi, a podle potřeby přidejte další ochranu dostupnou v použité službě. Aktuální limity a podmínky zpracování si vždy ověřte ve svém účtu.

Jak formulář vložit a upravit

1. založte si vlastní formulář a zkopírujte jeho koncový identifikátor,
2. ve WordPressu vložte blok Vlastní HTML nebo HTML widget v Elementoru,
3. nahraďte YOUR_FORM_ID vlastním identifikátorem,
4. upravte popisky polí a tlačítka podle jazyka webu,
5. odešlete testovací zprávu z počítače i telefonu,
6. zkontrolujte doručení, chybové stavy a potvrzení po odeslání.

Pokud používáte Elementor, hlídejte i množství dalších widgetů a skriptů. Samotný formulář je lehký, ale výsledný výkon ovlivňuje celá stránka. Praktický postup najdete v článku jak zrychlit načítání webu v Elementoru.

Jednoduché odeslání bez opuštění stránky

Chcete-li po odeslání zobrazit vlastní potvrzení a nechat návštěvníka na stránce, můžete přidat krátký JavaScript. Nejdřív si ověřte, že základní HTML varianta funguje bez něj. Až potom přidejte vylepšení.

<p id="form-status" aria-live="polite"></p>
<script>
  const form = document.querySelector('form');
  const status = document.getElementById('form-status');

  form.addEventListener('submit', async function (event) {
    event.preventDefault();
    const response = await fetch(form.action, {
      method: form.method,
      body: new FormData(form),
      headers: { Accept: 'application/json' }
    });

    if (response.ok) {
      status.textContent = 'Zpráva byla odeslána.';
      form.reset();
    } else {
      status.textContent = 'Odeslání se nepodařilo. Zkuste to prosím znovu.';
    }
  });
</script>

Nezapomeňte na soukromí a technickou kontrolu

Formulář pracuje s osobními údaji. Sbírejte pouze to, co pro odpověď opravdu potřebujete, a ve svých informacích o ochraně soukromí popište, jak s údaji nakládáte a zda při zpracování využíváte externí službu. Pokud přidáte analytiku, marketingové měření nebo další nástroje, posuďte také odpovídající režim souhlasu.

• web musí běžet přes HTTPS, k čemuž pomůže návod na aktivaci SSL certifikátu,
• zprávy pravidelně testujte, zejména po úpravách šablony,
• zkontrolujte čitelnost formuláře na mobilu,
• nepoužívejte zbytečně dlouhý seznam povinných polí,
• mějte viditelné potvrzení úspěšného i neúspěšného odeslání.