Kontaktní formulář na webu hostovaném u ITRADY.CZ

← Nápověda k hostingu Web u nás je statický (HTML, CSS, JavaScript), PHP se na něm nespouští. Jedinou výjimkou je kontaktní formulář: na požádání u vašeho webu zapneme náš skript /odeslat.php. Formulář na stránce pošle zprávu na tuhle adresu, skript ji odešle e-mailem a návštěvníka vrátí na web.

• Bez captchy a bez cookies. Roboty zastaví skryté pole a časová kontrola.
• Heslo k poště ani adresy nejsou ve webu. Nastavení leží u nás na serveru mimo web.
• odeslat.php ani jiný PHP skript na web nenahrávejte. Skript dodává server a vlastní PHP se nespustí. Stačí formulář podle tohoto návodu.

1. Formulář ve stránce

Formulář posílá method="post" na action="/odeslat.php". Tenhle kousek HTML můžete vložit, jak je, a upravit jen texty:

<form id="formular" class="formular" method="post" action="/odeslat.php">
  <!-- kam se vrátit po odeslání: adresa téhle stránky -->
  <input type="hidden" name="zpet" value="/kontakt/">
  <!-- časová kontrola: JavaScript sem vloží čas načtení stránky -->
  <input type="hidden" name="cas" value="0">
  <!-- past na roboty: člověk ji nevidí ani nevyplní -->
  <p class="formular-past" aria-hidden="true">
    <label>Nevyplňujte <input type="text" name="web" tabindex="-1" autocomplete="off"></label>
  </p>

  <p><label for="f-jmeno">Jméno a příjmení *</label>
     <input id="f-jmeno" type="text" name="jmeno" required autocomplete="name" maxlength="200"></p>
  <p><label for="f-email">E-mail *</label>
     <input id="f-email" type="email" name="email" required autocomplete="email" maxlength="254"></p>
  <p><label for="f-telefon">Telefon</label>
     <input id="f-telefon" type="tel" name="telefon" autocomplete="tel" maxlength="50"></p>
  <p><label for="f-zprava">Zpráva *</label>
     <textarea id="f-zprava" name="zprava" rows="6" required maxlength="10000"></textarea></p>
  <p><label><input type="checkbox" name="souhlas" value="1" required>
     Souhlasím se zpracováním osobních údajů za účelem vyřízení zprávy *</label></p>

  <p><button type="submit">Odeslat zprávu</button></p>
</form>
<script>
  document.querySelectorAll('input[name="cas"]').forEach(function (p) {
    p.value = Math.floor(Date.now() / 1000);
  });
</script>

<p id="formular-odeslano" class="formular-hlaska" role="status">Děkujeme, zpráva dorazila. Ozveme se co nejdříve.</p>
<p id="formular-chyba" class="formular-hlaska" role="alert">Zprávu se nepodařilo odeslat. Napište nám prosím přímo na e-mail.</p>

A do stylů webu:

.formular-past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-hlaska { display: none; }
.formular-hlaska:target { display: block; }   /* hláška se ukáže po návratu z odeslání */

Povinné kousky:

• skryté pole web (past),
• pole cas a skript, který ho vyplní. Bez něj skript každou zprávu tiše zahodí jako robota.
• pole jméno, e-mail, zpráva a souhlas.

Zbytek (telefon, vzhled, texty) je na vás.

2. Názvy polí

Skript přijme kterýkoli z uvedených názvů, stačí jeden z každého řádku:

• Žádné vlastní pole nepojmenovávejte web, cas ani zpet. Ty názvy patří pasti na roboty, časové kontrole a návratu. Pole web je past: formulář, který se návštěvníka ptá na jeho web jako name="web", by všechny zprávy tiše zahodil. Pro adresu webu návštěvníka použijte třeba name="adresa_webu".
• Další pole (třeba výběr služby, i zaškrtávátka name="sluzba[]") se do e-mailu přidají taky, nejvýš 10 polí po 500 znacích.
• Technická pole web, cas a zpet do e-mailu nejdou.
• Pole starých captch (g-recaptcha-response a podobně) skript ignoruje.

3. Co se stane po odeslání

Máte dvě možnosti:

A) Zpět na stejnou stránku s hláškou (doporučujeme). Ve formuláři je skryté pole zpet s adresou stránky (třeba /kontakt/). Skript návštěvníka vrátí:

• na /kontakt/#formular-odeslano, když se zpráva odeslala,
• na /kontakt/#formular-chyba, když ne.

Prohlížeč pak ukáže odstavec se stejným id díky stylu :target výše. Adresa v zpet musí začínat lomítkem a vést na váš web (bez domény).

B) Stránka poděkování. Bez pole zpet skript po odeslání přejde na /dekujeme/. Tu stránku si na webu musíte vytvořit (/web/dekujeme/index.html). Při chybě ukáže jednoduchou stránku „Zprávu se nepodařilo odeslat” s odkazem zpět.

Jinou adresu stránky poděkování nebo pevný způsob návratu nastavíme my, napište nám.

4. Odeslání přes JavaScript (nepovinné)

Když formulář odesíláte přes fetch(), pošlete tělo jako FormData (ne JSON) a přidejte hlavičku Accept: application/json. Skript pak místo přesměrování odpoví {"ok":true} nebo {"ok":false}:

const formular = document.getElementById('formular');
formular.addEventListener('submit', async (udalost) => {
  udalost.preventDefault();
  const odpoved = await fetch('/odeslat.php', {
    method: 'POST',
    body: new FormData(formular),
    headers: { Accept: 'application/json' },
  });
  const { ok } = await odpoved.json();
  location.hash = ok ? 'formular-odeslano' : 'formular-chyba';
});

5. Časté chyby

• Každá zpráva „projde”, ale nic nedorazí. Chybí pole cas nebo skript, který ho vyplní, případně je vyplněná past web (třeba vlastním polem se stejným názvem). Skript takovou zprávu považuje za robota a tiše ji zahodí.
• Stránka „Zprávu se nepodařilo odeslat”. Chybí jméno, e-mail, zpráva nebo souhlas, nebo je e-mail neplatný.
• Po odeslání se ukáže 404. Chybí stránka /dekujeme/ (možnost B) nebo zpet míří na neexistující stránku.
• Formulář vůbec nejde (403/404 na /odeslat.php). U vašeho webu ho ještě nemáme zapnutý, napište nám.

Formulář u vašeho webu zapínáme na požádání, napište nám.