Kapcsolatfelvételi űrlap létrehozása a Formspree segítségével

Webhelyén számos módszert használhat annak érdekében, hogy a felhasználók biztonságosan küldhessenek e-maileket Önnek. Az egyik példa a mailto attribútum használata egy kapcsolatfelvételi űrlapon. A mailto attribútum megnyit egy telepített levelezőalkalmazást, ahol a felhasználó beírhat egy üzenetet.

A jobb élmény érdekében fontolja meg egy olyan eszköz integrálását, mint a Formspree. A Formspree közvetítőként működik, rögzíti az űrlapadatokat és elküldi az Ön által megadott e-mail címre.

Mi az a Formspree és hogyan működik?

A Formspree egy e-mail szolgáltatás, amelyet egyéni kapcsolatfelvételi űrlapba integrálhat. Amikor bejelentkezik a Formspree-be, megadhatja az űrlap cél e-mail címét. A Formspree az Ön nevében kezeli az űrlapok benyújtását. Ez lehetővé teszi

A Formspree létrehoz egy végpontot, amelyet hozzá kell adnia az egyéni űrlaphoz. Amikor a felhasználó megnyomja a „Küldés” gombot, az űrlap a végpontot használja a Formspree API-szolgáltatásának meghívásához. Ez létrehoz egy e-mailt a kapcsolatfelvételi űrlap tartalmával.

A Formspree ezt az e-mailt a Formspree-fiókjában megadott cél e-mail-címre küldi el. Ezután megkapja az e-mailt a postaládájába. Formspree-fiókjában is van egy hely, ahol megtekintheti kapcsolatfelvételi űrlapjait.

Ha regisztrálni szeretné e-mailjét a Formspree-nél, jelentkezzen be, és adja meg az űrlap cél e-mail címét.

1. Bejelentkezni Formspree. Ha nincs fiókja, meg kell adnia e-mail címét és jelszavát. Regisztráljon azzal az e-mail címmel, amelyre a kapcsolatfelvételi űrlapot el szeretné küldeni. Előfordulhat, hogy a regisztrációs folyamat során igazolnia kell ezt az e-mail címet.
2. A regisztrációs folyamat befejezése után megnyílik az „Űrlapok” oldal. Kattintson Új űrlap.
3. Adja meg a kapcsolatfelvételi űrlap tetszőleges nevét, és hagyja meg az alapértelmezett projektbeállításokat. Írja be a cél e-mail címet az "E-mailek küldése" mezőbe. A Formspree ide küldi a kapcsolatfelvételi űrlapot. Ha elkészült, kattintson a gombra Űrlap létrehozása.
4. A Formspree egy végpontot és példákat kínál a használatára. Ezt a végpontot hozzá kell adnia a webhelyén található egyéni kapcsolatfelvételi űrlaphoz (erről később).
5. Alapértelmezés szerint a Formspree a "My First Project" nevű projektben tárolja az űrlapot. Ha módosítani szeretné ennek a nevét, lépjen vissza az "Űrlapok" oldalra. Kattintson Beállítások a projekt neve mellett.
6. Itt módosíthatja a projekt nevét valami másra. Például átnevezheti úgy, hogy ugyanaz legyen, mint a webhelye. Hozzáadhatja webhelye URL-címét is.

A Formspree által biztosított végpontot hozzá kell adnia a webhely kódjában található kapcsolatfelvételi űrlaphoz.

1. Adja hozzá a végpontot az űrlap "action" attribútumához. Ennek hatására a felhasználó böngészője elküldi az űrlapot az adott URL-re, amikor elküldi azt.

   <form action="https://formspree.io/f/xjvlaqpe" módszer="POST">
   <!-- Az űrlapod itt -->
   <gomb típusa="Beküldés" osztály="gomb"> Beküldés </button>
   </form>

2. Adjon hozzá bemeneteket az űrlaphoz. Használhatja ezt a példa űrlapot, amely a a Bootstrap CSS keretrendszer:

   <form action="https://formspree.io/f/mbjqjrdl" osztály="extra párnázás" módszer="POST">
   <div class="forma-csoport">
   <címke ="válaszolni"> Az email címed </label>
   <bemenet típusa="email" osztály="forma-szabályozás" id="válaszolni" név="_válaszolni" ngModel="válasz" aria-describedby="emailSúgó" helyőrző="[email protected]">
   <kis azonosító ="emailSúgó" osztály="forma-szöveg szöveg-néma"> E-mail-címét nem osztjuk meg senki mással. </small>
   </div>
   <div class="forma-csoport">
   <címke ="üzenet"> Az üzeneted </label>
   <szövegterület neve="üzenet" stílus="magasság: 200 képpont" osztály="forma-szabályozás" id="üzenet" helyőrző="Halihó! én'felveszem veled a kapcsolatot, mert..."></textarea>
   </div>
   <gomb típusa="Beküldés" osztály="gomb"> Beküldés </button>
   </form>
   

A Formspree működésének teszteléséhez küldjön magának üzenetet a kapcsolatfelvételi űrlapon, és nyomja meg a gombot Beküldés, és ellenőrizze e-mailje beérkező leveleit.

1. Futtassa webhelyét, és nyissa meg a kapcsolatfelvételi űrlapot tartalmazó oldalt. Írjon be egy üzenetet a kapcsolatfelvételi űrlapba, és nyomja meg a gombot Beküldés.
2. A kapcsolatfelvételi űrlap üzenetét megkapja a beérkező levelek között.
3. Ha visszatér a Formspree-hez, kattintson a gombra Beadványok lapon. Itt láthatja a kapcsolatfelvételi űrlapjáról elküldött üzeneteket is.

A Formspree egyike azon számos szolgáltatásnak, amellyel egyéni kapcsolatfelvételi űrlapot integrálhat webhelyére. Lehetővé teszi a felhasználói visszajelzések gyors elfogadását anélkül, hogy aggódnia kellene a háttérrendszer részletei miatt.

Ha még nem tud űrlapokat létrehozni HTML és JavaScript használatával, akkor többet megtudhat az ügyféloldali űrlapellenőrzésről is. Ez segít abban, hogy a kapcsolatfelvételi űrlapok minden felhasználói bevitelt ellenőrizni tudjanak.

A szerzőről

Sharlene Von Drehnen (9 cikk megjelent)

Sharlene a MUO műszaki írója, és teljes munkaidőben szoftverfejlesztéssel foglalkozik. Bachelor of IT-vel rendelkezik, és korábbi tapasztalata van a minőségbiztosítás és az egyetemi oktatás terén. Sharlene szeret játszani és zongorázni.

Továbbiak Sharlene Von Drehnentől