Lomakkeet, painikkeet ja widgetit

Moduuli 4: Sivut, ulkoasu ja toiminnot · Lukuaika: 8 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat asettaa yhteydenottolomakkeen (vastaanottaja, vahvistus, kiitossivu, roskapostin torjunta, uutiskirje ja lähetystapa), lisätä kelluvat painikkeet WhatsAppia ja yhteydenottoa varten ja upottaa toisen palvelun widgetin. Tiedät myös, milloin Oma koodi ja Oma HTML sopivat.

Keskeiset käsitteet: yhteydenottolomake, vastaanottaja, vahvistussähköposti, kiitossivu, captcha, kaksivaiheinen tilausvahvistus, lähetystapa, kelluva painike, widget, upotuskoodi, suostumus, Oma koodi, Oma HTML

Yhteydenottolomake: kaksi paikkaa

Sivustosi lomake koostuu kahdesta osasta. Itse lomake, eli kentät, jotka kävijä täyttää, on sivulla. Lisäät sen osiolla Yhteystiedot (kohdasta Osiot tai Lisää osio) tai chatin kautta. Sen, mitä tapahtuu, kun joku painaa lähetyspainiketta, asetat kohdassa Asetukset > Lomakkeet. Tämän paneelin asetat aina itse; chat ei tee sitä.

Lomakkeessa on aina kentät nimi, sähköposti ja viesti. Chatin kautta voit lisätä enintään kahdeksan lisäkenttää: tekstikentän, valintalistan (esimerkiksi "Sisällä vai ulkona?"), sähköpostin, puhelinnumeron, pitkän tekstikentän, päivämäärän tai numeron. Kenttää tiedoston tai kuvan lähettämiseen ei ole. Jos Schildersbedrijf Example haluaa kuvia työkohteesta, se kirjoittaa kiitostekstiin: "Voit lähettää kuvia sähköpostiosoitteeseemme."

Tärkeää: ilmaisella sivustolla ilman pakettia lomake näkyy, mutta se on harmaana eikä lähetä sähköpostia. Lomakkeet lähettävät viestejä vasta, kun sivustosi on AI Builder -paketissa. Voit kuitenkin tehdä alla olevat asetukset valmiiksi; ne otetaan silloin heti käyttöön.

Asetukset > Lomakkeet

Paneelissa on viisi osaa.

Viestien vastaanotto. Kohtaan Lähetä viestit osoitteeseen kirjoitat sähköpostiosoitteen, johon täytetyt lomakkeet menevät. Jos jätät sen tyhjäksi, ne menevät WebOkén tilisi sähköpostiosoitteeseen. Täytä kohta harkiten. Kohdassa Sähköpostin aihe valitset aiheen (tyhjänä: "Uusi viesti verkkosivustosi kautta"). Kohdassa Lähetyksen jälkeen valitset Näytä kiitosviesti omalla tekstilläsi tai Ohjaa sivulle: kiitossivulle, jonka teet itse ja jätät pois valikosta (oppitunti 4.1). Sen avulla voit myöhemmin mitata, kuinka usein lomake lähetetään.

Lähetystapa. Miten sähköposti lähetetään. WebOkén palvelin toimii heti, ja lähettäjänä on noreply@weboke.site. Oma sähköpostiosoitteesi (SMTP) on suositeltava: viesti tulee silloin omasta verkkotunnuksestasi ja päätyy harvemmin roskapostiin. Valinnalla Hoida se puolestani sivustoeditori luo osoitteen verkkotunnukseesi. Oman sähköpostiosoitteen alla voit valita myös sähköpostipalvelun, kuten Postmark, Brevo, Mailgun tai SendGrid. Miksi lähettäjällä on niin suuri merkitys, kerrotaan oppitunnilla 5.3.

Vahvistus kävijälle. Kun otat käyttöön valinnan Lähetä kävijälle kopio, kävijä saa vahvistussähköpostin. Se on usein ensimmäinen viesti, jonka joku saa sinulta. Valitset aiheen, kohdan Oma tekstisi (jossa {naam} tarkoittaa kävijän nimeä), Allekirjoituksen ja sen, liitetäänkö täytetty viesti mukaan. Sivustoeditori muotoilee tekstisi sivustosi tyyliin ja lisää logosi. Valinnalla Anna tekoälyn kirjoittaa tämä teksti saat ehdotuksen.

Roskapostin torjunta. Jokaisessa lomakkeessa on aina näkymätön tarkistus: piilotettu kenttä ja aikaraja. Se pysäyttää suurimman osan roskapostista ilman, että kävijät huomaavat mitään. Jos saat silti paljon roskapostia, valitse lisätarkistus eli captcha: Cloudflare Turnstile tai hCaptcha. Luot sitä varten ilmaisen tilin kyseiseen palveluun ja syötät Site key- ja Secret key -avaimet. Ota captcha käyttöön vasta, kun sitä tarvitaan: jokainen ylimääräinen vaihe karkottaa kävijöitä.

Uutiskirje. Voit lisätä lomakkeeseen valintaruudun, jolla kävijät tilaavat uutiskirjeen Mailchimpissä, Lapostassa, Brevossa tai MailerLitessä. Vain ne, jotka itse rastittavat ruudun, lisätään listalle. Aina kaksivaiheisella tilausvahvistuksella: kävijä vahvistaa tilauksen ensin sähköpostilla. Lapostassa ja MailerLitessä otat sen itse käyttöön kyseisessä palvelussa; sivustoeditori kertoo, mistä. Ilman kaksivaiheista vahvistusta kuka tahansa voi lisätä listallesi vieraita osoitteita.

Lisäksi: kävijä voi lähettää enintään 5 viestiä tunnissa. Jos sinulla on tietosuojaseloste, lomakkeen alla on linkki siihen. Lomake kerää henkilötietoja; mitä sinun pitää sen vuoksi hoitaa, kerrotaan oppitunnilla 7.1.

Sudenkuoppa: testaa lomake itse jokaisen muutoksen jälkeen jostain muusta kuin vastaanotto-osoitteesta. Katso myös roskapostikansiosi ja tarkista, että vahvistus tulee "kävijälle" perille.

Kelluvat painikkeet

Kohdassa Asetukset > Painikkeet lisäät painikkeet, jotka pysyvät näkyvissä jokaisen sivun alareunassa oikealla tai vasemmalla (Kulma: Oikea alakulma tai Vasen alakulma).

• WhatsApp-numero: kansainvälisessä muodossa, esimerkiksi +358 suomalaiselle numerolle, ilman alun nollaa. Jos jätät sen tyhjäksi, WhatsApp-painiketta ei ole. Voit lisätä Esitäytetyn viestin, esimerkiksi "Haluaisin tarjouksen maalaustöistä." Painike avaa keskustelun numerosi kanssa.
• Kelluva yhteydenottopainike: avaa yhteydenottolomakkeesi ikkunaan. Viesti tulee samaan osoitteeseen kuin lomakkeesi viestit. Valitset Painikkeen tekstin.

Esikatselussa painikkeet ovat hieman korkeammalla kuin oikealla sivustollasi, jotta ne eivät jää sivustoeditorin ohjepainikkeen taakse.

Huomaa: WhatsApp-painike lupaa nopean vastauksen. Jos luet WhatsAppia vain iltaisin, valitse mieluummin yhteydenottopainike.

Muiden palvelujen widgetit

Widget on toisen palvelun osa sivullasi: YouTube-video, Google Maps -kartta, Calendlyn ajanvarauskalenteri, Instagramisi tai Spotify-soittolista. Monesta palvelusta pelkkä linkki riittää; sivustoeditori tekee soittimen tai lomakkeen itse. Esimerkkejä: YouTube, Vimeo, Spotify, Calendly, Google Maps (osoite riittää), Google Kalenteri, Instagram ja TikTok (@nimesi riittää) sekä Google Forms. Muista palveluista, kuten Salonized, Trustpilot tai Bandcamp, liität upotuskoodin: koodinpätkän, jonka saat palvelulta verkkosivulle lisäämistä varten.

Näin teet sen: kerro chatissa ja lisää linkki ("lisää reittikarttamme yhteystieto-osion alle, osoite Kyläkatu 1"), liitä koodi chattiin tai valitse kohdasta Osiot osio Widget. Sivustoeditori tunnistaa palvelun, ehdottaa korkeutta ja otsikkoa ja varoittaa, jos jokin ei tule toimimaan. Jos annat tekoälyn lisätä widgetin, se on ohje ja kuluttaa muokkauksia; näet etukäteen, kuinka monta. Lisättyä widgetiä muokkaat esikatselussa osion valinnalla Muokkaa koodia.

Kolme asiaa, jotka kannattaa tietää:

1. Widget latautuu vasta suostumuksen jälkeen. Muiden palvelut asettavat usein evästeitä tai seuraavat kävijöitä. Kun evästebanneri on käytössä, widget latautuu vasta, kun kävijä antaa suostumuksen kyseisille evästeille. Palvelu lisätään automaattisesti evästebanneriisi kohtaan "Mitä sivustollasi on nyt käytössä". Tarkista sen jälkeen myös tietosuojaselosteesi (oppitunnit 7.1 ja 7.2).
2. Google Kalenterin pitää olla julkinen. Yksityistä kalenteria ei näe kukaan muu. Tee Google Kalenterissa julkiseksi vain erillinen kalenteri, jossa on se, mitä kävijät saavat nähdä, älä koskaan henkilökohtaista kalenteriasi.
3. Turvatonta koodia ei lisätä. Koodia, joka voi lähettää kävijöiden tietoja eteenpäin, peittää toimintansa tai lataa jotain tuntemattomalta sivustolta, tekoäly ei lisää sivustollesi. Se kertoo, miksi.

Oma koodi ja Oma HTML pääpiirteittäin

Kokeneemmille käyttäjille on kaksi paikkaa.

Oma koodi löytyy alhaalta kohdasta Asetukset > Integraatiot: koodi, jonka pitää olla jokaisella sivulla, Jokaisen sivun head-osaan tai Jokaisen sivun alaosaan. Esimerkiksi chat-palvelun tai arvostelu-widgetin latausskripti. Sivustoeditori ei tarkista tätä koodia ("Emme tarkista tätä koodia"). Tunnetut palvelut evästebanneri pysäyttää, kunnes suostumus on annettu. Rastita Tämä koodi on välttämätön vain koodille, joka ei seuraa kävijöitä, koska silloin se latautuu heti. Sivustoeditorin esikatselussa omaa koodia ei suoriteta, oikealla sivustollasi kyllä. Ilmaisella sivustolla oma koodi ei toimi. Mittaustunnukselle, kuten Google Analyticsin tunnukselle, et käytä Omaa koodia vaan kohdan Integraatiot omaa kenttää (oppitunti 7.2).

Oma HTML on osio kohdassa Osiot. Liität siihen omaa HTML:ää ja tarvittaessa CSS:ää ja muokkaat sitä myöhemmin valinnalla Muokkaa HTML:ää. Värit ja fontit noudattavat ilmettäsi. Skriptit, iframet ja lomakkeet eivät toimi tässä; niihin käytät widgetiä.

Käytä kumpaakin vain, jos muuta keinoa ei ole: toisen tekemä koodi on riski nopeudelle, turvallisuudelle ja yksityisyydelle.

Sivustoeditorissa: näin teet sen

1. Lisää yhteystietosivullesi osio Yhteystiedot lomakkeen kanssa.
2. Avaa Asetukset > Lomakkeet. Täytä kohta Lähetä viestit osoitteeseen.
3. Valitse kohdassa Lähetystapa oma sähköpostiosoitteesi tai jätä valinnaksi WebOkén palvelin, kunnes verkkotunnuksesi on valmis (oppitunti 5.3).
4. Ota käyttöön Lähetä kävijälle kopio ja kirjoita oma tekstisi.
5. Valitse kohdassa Lähetyksen jälkeen kiitosviesti tai kiitossivu.
6. Lisää tarvittaessa kohdassa Asetukset > Painikkeet WhatsApp- tai yhteydenottopainike.
7. Julkaise sivustosi ja lähetä testiviesti.

Yhteenveto

• Lomake on sivulla; mitä sille tapahtuu, asetat kohdassa Asetukset > Lomakkeet.
• Täytä Lähetä viestit osoitteeseen harkiten; valitse lähettäjäksi mieluiten oma sähköpostiosoitteesi.
• Ilmaisella sivustolla lomake ei lähetä sähköpostia; tiedostoa ei voi koskaan liittää.
• Kelluvat WhatsApp- ja yhteydenottopainikkeet löytyvät kohdasta Asetukset > Painikkeet.
• Widgetit latautuvat vasta suostumuksen jälkeen; Oma koodi ja Oma HTML ovat kokeneemmille.

Tietovisa

Tehtävä

Tehtävä D4.3: Yhteydenottolomake ja widget. Määritä lomakkeesi kokonaan ja lisää yksi widget, joka tuo oikeasti jotain lisää.

Tarkistuslista:

• [ ] osio Yhteystiedot lomakkeen kanssa yhteystietosivullasi;
• [ ] Lähetä viestit osoitteeseen täytetty osoitteella, jota luet päivittäin;
• [ ] lähetystapa valittu ja ymmärretty, miksi;
• [ ] vahvistus kävijälle omalla tekstilläsi;
• [ ] kiitosviesti tai kiitossivu asetettu;
• [ ] yksi widget lisätty (esimerkiksi kartta tai ajanvarauskalenteri) ja tarkistettu, että se näkyy evästebannerissa;
• [ ] sivusto julkaistu ja testiviesti lähetetty (vain paketin kanssa; ilmaisella sivustolla tarkistat asetukset).

Kysymykset:

1. Mihin osoitteeseen lomakeviestisi tulevat ja millä lähetystavalla?
2. Minkä widgetin valitsit, mitä se tuo kävijällesi ja mitä näkee kävijä, joka ei anna suostumusta?
3. Tuliko testiviestisi perille, ja tuliko vahvistus "kävijälle" perille vai roskapostiin?

Kun merkitset tehtävän tehdyksi, näet esimerkkivastauksen: Schildersbedrijf Example lähettää viestit osoitteeseen info@example.com oman verkkotunnuksen sähköpostiosoitteen kautta; widget on Google Maps -kartta osoitteineen, joka latautuu vasta suostumuksen jälkeen ja näyttää muuten alueen, jossa on painike suostumuksen antamiseen; testiviesti tuli perille, samoin vahvistus, eikä roskapostiin.

Lisälukemista

• Yhteydenottolomake verkkosivustollesi: lähetä kenttien tiedot sähköpostiin ja estä roskaposti
• Ilmainen kurssi Sähköposti kuntoon: asennus ja toimiva perillemeno 7.3: Sähköposti verkkosivustoltasi ja lomakkeista
• Ilmainen kurssi Sähköposti kuntoon: asennus ja toimiva perillemeno 7.2: Suostumus, peruuttaminen ja puhdas osoitelista
• Click to Chat -toiminnon käyttö (WhatsAppin ohjekeskus): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Google Kalenterin ohje, englanniksi): https://support.google.com/calendar/answer/37083