Jak vytvořit kontaktní formulář pomocí Formspree

Na svém webu můžete použít mnoho metod, které uživatelům umožní bezpečně vám posílat e-maily. Jedním příkladem je použití atributu mailto v kontaktním formuláři. Atribut mailto otevře nainstalovanou poštovní aplikaci, aby uživatel mohl zadat zprávu.

Pro lepší zážitek zvažte integraci nástroje, jako je Formspree. Formspree funguje jako prostředník, zaznamenává data formuláře a odesílá je na vámi zadanou e-mailovou adresu.

Co je Formspree a jak funguje?

Formspree je e-mailová služba, kterou můžete integrovat do vlastního kontaktního formuláře. Když se přihlásíte do Formspree, můžete zadat svou cílovou e-mailovou adresu pro formulář. Formspree zpracovává odeslání formulářů vaším jménem. To vám umožní vytvořit bezplatný kontaktní formulář, například Formuláře Google, ale vlastní označení formuláře hostujete na svém vlastním webu.

Formspree vygeneruje koncový bod, který budete muset přidat do vlastního formuláře. Když uživatel stiskne tlačítko "Odeslat", formulář použije koncový bod k volání služby API Formspree. Tím se vygeneruje e-mail s obsahem kontaktního formuláře.

Formspree zašle tento e-mail na cílový e-mail, který jste uvedli ve svém účtu Formspree. Následně obdržíte e-mail do vaší schránky. Váš účet Formspree má také místo, kde si můžete prohlédnout odeslaná kontaktní formulář.

Chcete-li zaregistrovat svůj e-mail na Formspree, přihlaste se a zadejte cílovou e-mailovou adresu pro svůj formulář.

1. Přihlásit se do Formspree. Pokud nemáte účet, budete muset zadat svou e-mailovou adresu a heslo. Zaregistrujte se pomocí e-mailové adresy, na kterou chcete kontaktní formulář zasílat. Možná budete také muset ověřit tuto e-mailovou adresu během procesu registrace.
2. Po dokončení procesu registrace se otevře stránka "Formuláře". Klikněte na Nový formulář.
3. Zadejte libovolný název svého kontaktního formuláře a ponechte výchozí nastavení projektu. Do pole „Odesílat e-maily“ zadejte cílovou e-mailovou adresu. Toto je místo, kam Formspree odešle vaše odeslání kontaktního formuláře. Po dokončení klikněte na Vytvořit formulář.
4. Formspree vám poskytne koncový bod a příklady jeho použití. Tento koncový bod budete muset přidat do vlastního kontaktního formuláře na vašem webu (více o tom později).
5. Ve výchozím nastavení Formspree ukládá váš formulář pod projektem s názvem "Můj první projekt". Pokud chcete změnit název tohoto, vraťte se na stránku "Formuláře". Klikněte na Nastavení vedle názvu projektu.
6. Zde můžete změnit název svého projektu na jiný. Můžete jej například přejmenovat, aby měl stejný název jako váš web. Můžete také přidat adresu URL svého webu.

Budete muset přidat koncový bod poskytovaný Formspree do kontaktního formuláře v kódu vašeho webu.

1. Přidejte koncový bod do atributu "action" pro formulář. To způsobí, že prohlížeč uživatele odešle formulář na danou adresu URL, když jej odešle.

   <forma akce="https://formspree.io/f/xjvlaqpe" metoda ="POŠTA">
   <!-- Váš formulář zde -->
   <typ tlačítka="Předložit" třída="knoflík"> Předložit </button>
   </form>

2. Přidejte vstupy do formuláře. Můžete použít tento vzorový formulář, který používá Bootstrap CSS framework:

   <forma akce="https://formspree.io/f/mbjqjrdl" třída="extra vycpávka" metoda ="POŠTA">
   <div třída="forma-skupina">
   <štítek pro ="odpovědět"> Vaše emailová adresa </label>
   <typ vstupu="e-mailem" třída="kontrola formy" id="odpovědět" jméno="_odpovědět" ngModel="odpověď" aria-describedby="email Nápověda" zástupný symbol="[email protected]">
   <malé id="email Nápověda" třída="forma-text text-ztlumený"> Váš e-mail nebude sdílen s nikým jiným. </small>
   </div>
   <div třída="forma-skupina">
   <štítek pro ="zpráva"> Vaše zpráva </label>
   <název textové oblasti="zpráva" styl="výška: 200px" třída="kontrola formy" id="zpráva" zástupný symbol="Zdravím! já'Kontaktuji vás, protože..."></textarea>
   </div>
   <typ tlačítka="Předložit" třída="knoflík"> Předložit </button>
   </form>
   

Chcete-li otestovat, zda Formspree funguje, pošlete si zprávu pomocí kontaktního formuláře a stiskněte Předložita zkontrolujte e-mailovou schránku.

1. Spusťte svůj web a otevřete stránku s kontaktním formulářem. Zadejte zprávu do kontaktního formuláře a stiskněte Předložit.
2. Do vaší schránky obdržíte zprávu s kontaktním formulářem.
3. Pokud se vrátíte do Formspree, klikněte na Podání tab. Zde také uvidíte odeslané zprávy z vašeho kontaktního formuláře.

Formspree je jednou z mnoha služeb, které můžete použít k integraci vlastního kontaktního formuláře na váš web. Umožňuje vám rychle začít přijímat zpětnou vazbu od uživatelů, aniž byste se museli starat o detaily backendu.

Pokud s vytvářením formulářů pomocí HTML a JavaScriptu teprve začínáte, můžete se také dozvědět více o ověřování formulářů na straně klienta. To pomáhá zajistit, že vaše kontaktní formuláře mohou ověřovat všechny uživatelské vstupy.

O autorovi

Sharlene von Drehnen (9 publikovaných článků)

Sharlene je Tech Writer na MUO a také pracuje na plný úvazek ve vývoji softwaru. Má bakalářský titul v oboru IT a má předchozí zkušenosti se zajišťováním kvality a univerzitním doučováním. Sharlene miluje hry a hru na klavír.

Více od Sharlene Von Drehnen