Űrlapok, gombok és widgetek

Modul 4: Oldalak, megjelenés és funkciók · Olvasási idő: 8 perc

Tanulási cél: A lecke végére be tudja állítani a kapcsolatfelvételi űrlapot (címzett, visszaigazolás, köszönőoldal, spamszűrés, hírlevél és küldési mód), el tud helyezni lebegő gombokat a WhatsApphoz és a kapcsolatfelvételhez, be tud ágyazni egy másik szolgáltatás widgetjét, és tudja, mikor érdemes az Egyéni kódot és az Egyéni HTML-t használni.

Kulcsfogalmak: kapcsolatfelvételi űrlap, címzett, visszaigazoló e-mail, köszönőoldal, captcha, kettős feliratkozás, küldési mód, lebegő gomb, widget, beágyazási kód, hozzájárulás, Egyéni kód, Egyéni HTML

A kapcsolatfelvételi űrlap: két helyen

A weboldalán lévő űrlap két részből áll. Maga az űrlap, a látogató által kitöltött mezőkkel, egy oldalon található. A Kapcsolat szakasszal helyezi el (a Szakaszok vagy a Szakasz hozzáadása menüponton keresztül), vagy a csevegőben kéri. Azt pedig, hogy mi történjen, amikor valaki a küldésre kattint, a Beállítások > Űrlapok részben állítja be. Ezt a panelt mindig Önnek kell beállítania; a csevegő ezt nem végzi el.

Az űrlapon mindig szerepel a név, az e-mail-cím és az üzenet mező. A csevegőben legfeljebb nyolc további mezőt adhat hozzá: szövegmezőt, legördülő listát (például „Belső vagy külső munka?”), e-mail-címet, telefonszámot, hosszú szövegmezőt, dátumot vagy számot. Fájl vagy fénykép küldésére szolgáló mező nincs. Ha a Schildersbedrijf Example fényképeket szeretne kapni a munkáról, ezt írja a köszönőszövegbe: „Nyugodtan küldjön fényképeket az e-mail-címünkre.”

Fontos: a csomag nélküli ingyenes weboldalon az űrlap látható, de szürkén jelenik meg, és nem küld e-mailt. Az űrlapok csak akkor küldenek valóban üzenetet, ha a weboldal AI Builder-csomagban van. Az alábbi beállításokat azonban már most előkészítheti; ezek aztán azonnal érvénybe lépnek.

Beállítások > Űrlapok

A panel öt részből áll.

Üzenetek fogadása. Az Üzenetek küldése ide mezőbe azt az e-mail-címet írja, ahová a kitöltött űrlapok érkezzenek. Ha üresen hagyja, az üzenetek a WebOké-fiókjához tartozó e-mail-címre mennek. Töltse ki tudatosan. Az Az e-mail tárgya mezőben a tárgyat adja meg (üresen hagyva: „Új üzenet a weboldaláról”). A Küldés után résznél választhatja a Köszönőüzenet megjelenítése lehetőséget saját szöveggel, vagy az Átirányítás egy oldalra lehetőséget: ez egy Ön által készített köszönőoldal, amelyet kihagy a menüből (4.1. lecke). Így később mérheti, milyen gyakran küldik el az űrlapot.

Küldés ezen keresztül. Ez határozza meg, hogyan megy ki az e-mail. A A WebOké szervere azonnal működik, a feladó ekkor noreply@weboke.site. A Saját e-mail-cím (SMTP) az ajánlott: az e-mail ekkor a saját domainjéről érkezik, és kisebb eséllyel kerül a spam közé. Az Intézzék el helyettem lehetőséggel a szerkesztő létrehozza ezt a címet az Ön domainjén. A saját e-mail-cím alatt levelezőszolgáltatást is választhat, például Postmark, Brevo, Mailgun vagy SendGrid szolgáltatást. Hogy miért számít ennyit a feladó, azt az 5.3. leckében olvashatja.

Visszaigazolás a látogatónak. Kapcsolja be a Másolat küldése a látogatónak lehetőséget, és a látogató visszaigazoló e-mailt kap. Gyakran ez az első üzenet, amelyet valaki Öntől kap. Megadja a tárgyat, a Az Ön szövege mezőt (a {naam} helyére a látogató neve kerül), az Aláírás mezőt, és azt, hogy a kitöltött üzenet is bekerüljön-e. A szerkesztő a szöveget a weboldala megjelenésével és a logójával formázza. Az Írja meg ezt a szöveget az AI gombbal javaslatot kap.

Spam kiszűrése. Minden űrlapon mindig van egy láthatatlan ellenőrzés: egy rejtett mező és egy időkorlát. Ez a spam nagy részét kiszűri, anélkül hogy a látogatók bármit észrevennének belőle. Ha mégis sok spamet kap, válasszon egy további ellenőrzést, egy captchát: a Cloudflare Turnstile vagy a hCaptcha szolgáltatást. Ehhez ingyenes fiókot hoz létre az adott szolgáltatásnál, és megadja a Site key és a Secret key értékét. Captchát csak akkor kapcsoljon be, ha szükséges: minden további lépés látogatókba kerül.

Hírlevél. Elhelyezhet az űrlapon egy jelölőnégyzetet, amellyel a látogatók feliratkozhatnak a Mailchimp, a Laposta, a Brevo vagy a MailerLite listájára. Csak az kerül fel a listára, aki maga jelöli be a négyzetet. Mindig kettős feliratkozással: a látogató előbb e-mailben megerősíti a feliratkozást. A Laposta és a MailerLite esetében ezt Önnek kell bekapcsolnia az adott szolgáltatásban; a szerkesztő megmutatja, hol. Kettős feliratkozás nélkül bárki idegen címeket tehet fel az Ön listájára.

Továbbá: egy látogató óránként legfeljebb 5 üzenetet küldhet. Ha van adatkezelési tájékoztatója, az űrlap alatt megjelenik egy hivatkozás rá. Az űrlap személyes adatokat gyűjt; hogy ehhez mit kell rendeznie, azt a 7.1. lecke tárgyalja.

Buktató: minden módosítás után tesztelje az űrlapot saját maga, a fogadó címtől eltérő címről. Nézze meg a spam mappát is, és ellenőrizze, hogy a visszaigazolás megérkezik-e a „látogatóhoz”.

Lebegő gombok

A Beállítások > Gombok részben olyan gombokat helyezhet el, amelyek minden oldalon alul, a képernyőn maradnak, jobb vagy bal oldalon (Sarok: Jobb alsó sarok vagy Bal alsó sarok).

• WhatsApp-szám: nemzetközi formátumban, országhívószámmal (például holland számnál +31) és a kezdő 0 nélkül. Ha üresen hagyja, nem lesz WhatsApp-gomb. Megadhat egy Előre kitöltött üzenetet is, például: „Árajánlatot szeretnék kérni festési munkára.” A gomb beszélgetést nyit az Ön számával.
• Lebegő kapcsolatfelvételi gomb: egy ablakban megnyitja a kapcsolatfelvételi űrlapot. Az üzenet ugyanarra a címre érkezik, mint az űrlapé. Megadja a A gomb felirata szöveget.

Az előnézetben a gombok kicsit magasabban vannak, mint az élő weboldalon, hogy ne takarja el őket a szerkesztő súgógombja.

Figyelem: a WhatsApp-gomb gyors választ ígér. Ha csak esténként nézi a WhatsAppot, inkább a kapcsolatfelvételi gombot válassza.

Más szolgáltatások widgetjei

A widget egy másik szolgáltatás egy darabja az Ön oldalán: egy YouTube-videó, egy Google Maps térkép, egy Calendly időpontfoglaló, az Instagram-fiókja, egy Spotify-lejátszási lista. Sok szolgáltatásnál elég a hivatkozás; a lejátszót vagy az űrlapot a szerkesztő maga készíti el. Példák: YouTube, Vimeo, Spotify, Calendly, Google Maps (elég a cím), Google Naptár, Instagram és TikTok (elég a @felhasználónév) és Google Űrlapok. Más szolgáltatásoknál, például a Salonized, a Trustpilot vagy a Bandcamp esetében a beágyazási kódot illeszti be: azt a kódrészletet, amelyet az adott szolgáltatástól kap, hogy egy weboldalon elhelyezze.

Így csinálja: írja meg a csevegőben a hivatkozással együtt („tegye az útvonaltérképünket a kapcsolatfelvételi blokk alá, cím: Fő utca 1”), illessze be a kódot a csevegőbe, vagy válassza a Szakaszok között a Widget szakaszt. A szerkesztő felismeri a szolgáltatást, javaslatot tesz a magasságra és a címre, és figyelmeztet, ha valami nem fog működni. Ha az AI-jal helyezteti el, az utasításnak számít, és szerkesztésekbe kerül; előre látja, mennyibe. Az elhelyezett widgetet az előnézetben a blokkon lévő Kód szerkesztése gombbal módosíthatja.

Három dolog, amit érdemes tudni:

1. A widget csak hozzájárulás után töltődik be. Más szolgáltatások gyakran sütiket helyeznek el vagy követik a látogatókat. Bekapcsolt sütibannernél a widget csak akkor töltődik be, ha a látogató hozzájárul az adott típusú sütikhez. A szolgáltatás automatikusan megjelenik a sütibannerben az „Ami most a weboldalán fut” résznél. Ezután ellenőrizze az adatkezelési tájékoztatóját is (7.1. és 7.2. lecke).
2. A Google Naptárnak nyilvánosnak kell lennie. Egy privát naptárat senki más nem láthat. A Google Naptárban csak egy külön naptárat tegyen nyilvánossá, abban azzal, amit a látogatók láthatnak, soha ne a személyes naptárát.
3. Nem biztonságos kód nem kerül fel. Olyan kódot, amely továbbíthatja a látogatók adatait, elrejti, mit csinál, vagy ismeretlen weboldalról tölt be valamit, az AI nem helyez el a weboldalán. Ilyenkor elmagyarázza, miért.

Egyéni kód és Egyéni HTML, nagy vonalakban

A haladó felhasználóknak két lehetőség áll rendelkezésre.

Az Egyéni kód a Beállítások > Integrációk rész alján található: olyan kód, amelynek minden oldalon szerepelnie kell, a Minden oldal head részében vagy a Minden oldal alján. Például egy csevegőszolgáltatás vagy egy értékelési widget betöltő szkriptje. Ezt a kódot a szerkesztő nem ellenőrzi („Ezt a kódot nem ellenőrizzük”). Az ismert szolgáltatásokat a sütibanner a hozzájárulásig visszatartja. Az Ez a kód szükséges jelölőnégyzetet csak olyan kódnál jelölje be, amely nem követi a látogatókat, mert az ilyen kód azonnal betöltődik. A szerkesztő előnézetében az egyéni kód nem fut, az élő weboldalon igen. Az ingyenes weboldalon az egyéni kód nem működik. Egy mérőazonosítóhoz, például a Google Analyticshez nem az Egyéni kódot használja, hanem az Integrációk rész erre szolgáló mezőjét (7.2. lecke).

Az Egyéni HTML egy szakasz a Szakaszok között. Saját HTML-t és szükség esetén CSS-t illeszthet be, amelyet később a HTML szerkesztése gombbal módosíthat. A színek és a betűtípusok az Ön arculatát követik. Szkriptek, iframe-ek és űrlapok itt nem működnek; ezekhez widgetet használjon.

Mindkettőt csak akkor használja, ha nincs más megoldás: a mások által írt kód kockázatot jelent a sebességre, a biztonságra és az adatvédelemre.

A szerkesztőben: így csinálja

1. Helyezze el a Kapcsolat szakaszt űrlappal a kapcsolati oldalán.
2. Nyissa meg a Beállítások > Űrlapok részt. Töltse ki az Üzenetek küldése ide mezőt.
3. A Küldés ezen keresztül résznél válassza a saját e-mail-címét, vagy hagyja a WebOké szerverén, amíg a domainje elkészül (5.3. lecke).
4. Kapcsolja be a Másolat küldése a látogatónak lehetőséget, és írja meg a saját szövegét.
5. A Küldés után résznél válasszon köszönőüzenetet vagy köszönőoldalt.
6. Szükség esetén helyezzen el WhatsApp- vagy kapcsolatfelvételi gombot a Beállítások > Gombok részben.
7. Tegye közzé a weboldalt, és küldjön egy tesztüzenetet.

Összefoglalás

• Az űrlap egy oldalon van; hogy mi történik vele, azt a Beállítások > Űrlapok részben rendezi.
• Az Üzenetek küldése ide mezőt töltse ki tudatosan; feladóként lehetőleg a saját e-mail-címét válassza.
• Az ingyenes weboldalon az űrlap nem küld e-mailt; fájlt csatolni soha nem lehet.
• A WhatsApphoz és a kapcsolatfelvételhez tartozó lebegő gombok a Beállítások > Gombok részben vannak.
• A widgetek csak hozzájárulás után töltődnek be; az Egyéni kód és az Egyéni HTML haladó felhasználóknak való.

Kvíz

Feladat

D4.3. feladat: Az Ön kapcsolatfelvételi űrlapja és egy widget. Állítsa be teljesen az űrlapját, és helyezzen el egy olyan widgetet, amely valóban hozzáad valamit az oldalhoz.

Ellenőrzőlista:

• [ ] Kapcsolat szakasz űrlappal a kapcsolati oldalon;
• [ ] az Üzenetek küldése ide mező kitöltve egy olyan címmel, amelyet naponta olvas;
• [ ] küldési mód kiválasztva, és érti, miért ezt választotta;
• [ ] visszaigazolás a látogatónak saját szöveggel;
• [ ] köszönőüzenet vagy köszönőoldal beállítva;
• [ ] egy widget elhelyezve (például térkép vagy időpontfoglaló), és ellenőrizve, hogy megjelenik a sütibannerben;
• [ ] a weboldal közzétéve, és tesztüzenet elküldve (csak csomaggal; az ingyenes oldalon a beállításokat ellenőrzi).

Kérdések:

1. Melyik címre érkeznek az űrlapüzenetei, és milyen küldési móddal?
2. Melyik widgetet választotta, mit ad a látogatóinak, és mit lát az a látogató, aki nem járul hozzá?
3. Megérkezett a tesztüzenete, és a visszaigazolás megérkezett a „látogatóhoz”, vagy a spam közé került?

A „kész” után mintaválaszt lát: a Schildersbedrijf Example az info@example.com címre küldeti az üzeneteket a domainjén lévő saját e-mail-címen keresztül; a widget egy Google Maps térkép a címmel, amely csak hozzájárulás után töltődik be, addig pedig egy felületet mutat egy gombbal a hozzájáruláshoz; a tesztüzenet megérkezett, a visszaigazolás is, és nem a spam közé.

További olvasnivaló

• Kapcsolatfelvételi űrlap a weboldalán: a mezők elküldése e-mailben és a spam megelőzése
• Ingyenes tanfolyam: E-mail rendben: beállítás és megfelelő kézbesítés 7.3: Levelek a weboldaláról és az űrlapokról
• Ingyenes tanfolyam: E-mail rendben: beállítás és megfelelő kézbesítés 7.2: Hozzájárulás, leiratkozás és egy tiszta lista
• A kattintással indítható csevegés használata (WhatsApp Súgóközpont): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Google Naptár súgó, angol nyelvű): https://support.google.com/calendar/answer/37083