Ako vytvoriť kontaktný formulár pomocou Formspree

Na svojom webe môžete použiť mnoho metód, ktoré používateľom umožnia bezpečne vám posielať e-maily. Jedným príkladom je použitie atribútu mailto v kontaktnom formulári. Atribút mailto otvorí nainštalovanú poštovú aplikáciu, aby používateľ mohol zadať správu.

Ak chcete získať lepší zážitok, zvážte integráciu nástroja, ako je Formspree. Formspree funguje ako sprostredkovateľ, zaznamenáva údaje z formulárov a odosiela ich na vami zadanú e-mailovú adresu.

Čo je Formspree a ako to funguje?

Formspree je e-mailová služba, ktorú môžete integrovať do vlastného kontaktného formulára. Keď sa prihlásite do Formspree, môžete zadať svoju cieľovú e-mailovú adresu pre formulár. Formspree spracováva odoslania formulárov vo vašom mene. To vám umožní vytvorte bezplatný kontaktný formulár, napríklad Formuláre Google

Formspree vygeneruje koncový bod, ktorý budete musieť pridať do vlastného formulára. Keď používateľ stlačí tlačidlo „Odoslať“, formulár použije koncový bod na zavolanie služby API Formspree. Tým sa vygeneruje e-mail s obsahom kontaktného formulára.

Formspree odošle tento e-mail na cieľový e-mail, ktorý ste uviedli vo svojom účte Formspree. Následne dostanete e-mail do vašej schránky. Váš účet Formspree má tiež miesto, kde si môžete prezerať odoslané kontaktné formuláre.

Ak chcete zaregistrovať svoj e-mail na Formspree, prihláste sa a zadajte cieľovú e-mailovú adresu pre svoj formulár.

1. Prihlásiť sa Formspree. Ak nemáte účet, budete musieť zadať svoju e-mailovú adresu a heslo. Zaregistrujte sa pomocou e-mailovej adresy, na ktorú chcete, aby kontaktný formulár posielal príspevky. Možno budete musieť overiť túto e-mailovú adresu počas procesu registrácie.
2. Po dokončení procesu registrácie sa otvorí stránka "Formuláre". Kliknite na Nový formulár.
3. Zadajte ľubovoľný názov pre kontaktný formulár a ponechajte predvolené nastavenia projektu. Do poľa „Odoslať e-maily“ zadajte cieľovú e-mailovú adresu. Toto je miesto, kde Formspree odošle vaše odoslania kontaktného formulára. Po dokončení kliknite na Vytvoriť formulár.
4. Formspree vám poskytne koncový bod a príklady jeho použitia. Tento koncový bod budete musieť pridať do vlastného kontaktného formulára na svojej webovej lokalite (viac o tom neskôr).
5. Formspree predvolene ukladá váš formulár pod projektom s názvom „Môj prvý projekt“. Ak chcete zmeniť názov tohto, vráťte sa na stránku "Formuláre". Kliknite na nastavenie vedľa názvu projektu.
6. Tu môžete zmeniť názov svojho projektu na niečo iné. Môžete ho napríklad premenovať, aby mal rovnaký názov ako váš web. Môžete tiež pridať adresu URL svojho webu.

Budete musieť pridať koncový bod poskytnutý Formspree do kontaktného formulára v kóde vašej webovej lokality.

1. Pridajte koncový bod do atribútu „akcia“ formulára. To spôsobí, že prehliadač používateľa odošle formulár na danú adresu URL, keď ho odošle.

   <forma akcia="https://formspree.io/f/xjvlaqpe" metóda ="POST">
   <!-- Váš formulár tu -->
   <typ tlačidla="Predložiť" trieda="tlačidlo"> Predložiť </button>
   </form>

2. Pridajte vstupy do formulára. Môžete použiť tento vzorový formulár, ktorý používa rámec Bootstrap CSS:

   <forma akcia="https://formspree.io/f/mbjqjrdl" trieda="extra polstrovanie" metóda ="POST">
   <trieda div="forma-skupina">
   <štítok pre ="odpovedať"> Vaša emailová adresa </label>
   <typ vstupu ="email" trieda="kontrola formy" id="odpovedať" meno="_odpovedať" ngModel="odpovedať" ária-popísaná="emailPomoc" zástupný symbol ="[email protected]">
   <malé id="emailPomoc" trieda="forma-text text-stlmený"> Váš e-mail nebude zdieľaný s nikým iným. </small>
   </div>
   <trieda div="forma-skupina">
   <štítok pre ="správu"> Tvoja správa </label>
   <názov textovej oblasti="správu" štýl="výška: 200px" trieda="kontrola formy" id="správu" zástupný symbol ="Hej ty tam! ja'kontaktujem ťa, pretože..."></textarea>
   </div>
   <typ tlačidla="Predložiť" trieda="tlačidlo"> Predložiť </button>
   </form>
   

Ak chcete otestovať, či Formspree funguje, pošlite si správu pomocou kontaktného formulára a stlačte Predložiťa skontrolujte doručenú poštu svojho e-mailu.

1. Spustite svoj web a otvorte stránku s kontaktným formulárom. Zadajte správu do kontaktného formulára a stlačte Predložiť.
2. Do schránky vám príde správa s kontaktným formulárom.
3. Ak sa vrátite späť do Formspree, kliknite na Podania tab. Tu budete môcť vidieť aj odoslané správy z vášho kontaktného formulára.

Formspree je jednou z mnohých služieb, ktoré môžete použiť na integráciu vlastného kontaktného formulára na vašu stránku. Umožňuje vám rýchlo začať prijímať spätnú väzbu od používateľov bez toho, aby ste sa museli starať o podrobnosti o backende.

Ak ste novým tvorcom formulárov pomocou HTML a JavaScriptu, môžete sa tiež dozvedieť viac o overovaní formulárov na strane klienta. Pomáha to zabezpečiť, že vaše kontaktné formuláre môžu overiť všetky vstupy používateľov.

O autorovi

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

Sharlene je Tech Writer v MUO a tiež pracuje na plný úväzok v oblasti vývoja softvéru. Má bakalársky titul z IT a predchádzajúce skúsenosti so zabezpečovaním kvality a univerzitným doučovaním. Sharlene miluje hry a hru na klavír.

Viac od Sharlene Von Drehnen