1.5.2 Yhteydenottolomake
Yhteydenottolomake
Miltei jokaiselle kotisivulle luodaan jonkinlainen yhteydenottolomake, jolla selaaja voi halutessaan lähettää viestin sivuston omistajalle. Harvoilla sivustoilla on ainoana vaihtoehtona lähettää sähköpostia perinteiseen tapaan käyttämällä sähköpostiohjelmaa tai ainoastaan puhelimitse. Yhteydenottolomake voidaan toteuttaa WordPressissä helpoimmin lisäosan avulla, joita onkin tarjolla kirjava valikoima.
Lisäosia lomakkeille
Jos toteutat vain yhteydenottolomakkeen sivustolle lisäosan avulla, kannattaa valita lisäosista kevyt versio. Kannattaa myös tarkistaa onko omassa sivustoeditorissa olemassa valmis työkalu lomakkeiden tekemiselle. Joissain edistyneemmissä teemoissa on myös olemassa toiminto lomakkeen tekemiseen.
Sähköpostilisäosana Contact Form 7
Tarkastellaan yhteydenottolomakkeen luomista Contact Form 7 -lisäosan avulla, joka on yksi suosituimmista lisäosista lomakkeiden toteuttamiseen. Se on myös mukavan kompakti (kevyt) lisäosa, joka ei sisällä suuremmin ylimääräistä vaan perustoiminnot lomakkeen luomiseen. Asenna Contact Form 7 lisäosaksi omaan WordPress-asennukseen ohjauspaneelin lisäosat/Lisää uusi toiminnosta hakemalla lisäosaa hakusanalla Contact. Ota lisäosa käyttöön ja siirry hallintapaneelissa lisäosan valikkoon Contact ja valitse alavalinnoista Contact Forms.
Yhteydenottolomakkeen luominen
Opetellaan yksinkertaisen yhteydenottolomakkeen luominen Contact Form 7-lisäosan avulla. Asenna ja ota käyttöön lisäosa WordPressissä ja siirry lisäosan osioon hallintapaneelissa valintaan Yhteydenotto/Yhteydenottolomakkeet (Contact/Contact Forms).
Lisäosa muodostaa valmiiksi yksinkertaisen esimerkkilomakkeen yhteydenottolomakkeeksi ja avataan kyseinen lomake muokattavaksi (Edit). Nimeä aluksi lomake uudelleen suomen kielellä, jos haluat vaikka ”Yhteydenotto” tai jotain muuta vastaavaa.
Form-välilehti
Form-välilehdellä rakennetaan sivulla näkyvä lomake ja sen kentät. Kentät ovat näkymässä (1) HTML-merkkauskielellä ja niitä voidaan lisätä klikkaamalla kohdassa 2 olevista kenttien painikkeista, joista avautuu kentän luonti-ikkuna.
- Lomakkeen koodaus näkymä
- Lomakkeelle lisättävien kenttien painikkeet
- Contact Form 7 lisäosan välilehdet lomakkeelle
- Lomakkeen kopioitava lyhytkoodi (Short code).
- Lomakkeen nimi
- Lomakkeen tallennus, poisto ja kloonauspainikkeet
Kentän lisääminen
Aloitetaan rakentamaan lomaketta sivustolle lisäämällä Etunimelle tarkoitettu kenttä. Olemassa olevat kentät ovat englanninkielisiä, joten luodaan harjoituksen ja esimerkin vuoksi manuaalisesti uusi etunimelle varattu tekstikenttä. Klikkaa Text-painiketta lisättävien kenttien painikkeista (2), joka avaa kentän luonti-ikkunan.
- Kentän tyypin valinta ja mahdollisuus asettaa kenttä pakolliseksi täyttää.
- Kentän nimi ja mahdollisuus asettaa kentän nimeksi asetettu arvo automaattisen täytön määritteeksi.
- CSS-luokan voit määrittää myös, jolloin kenttään voidaan kohdistaa CSS-muotoiluja helpommin.
- Kannattaa asettaa myös minimi- ja maksimipituus kentälle vaikka vain tietoturvallisuudenkin takia.
- Kentän oletusarvo tarkoittaa, että määritetty arvo tulee oletuksena kentän arvoksi, jollei selaaja kirjoita kenttään mitään.
- Koodin esikatselu ja Tagin lisäämispainike.
Luodaan siis Etunimelle kenttä lomakkeelle ja asetetaan arvoiksi kentälle kuvanmukaiset arvot. Käytetään myös CSS-luokkaa ”nimi” asetuksena. Tulemme asettamaan joitain muotoiluja lomakkeelle myöhemmin.
Label?
Kuten huomaat kentästä selaajaa informoiva Label jäi puuttumaan ja sitä ei luotu automaattisesti, joten se on lisättävä käsin kentän luomisen jälkeen.
Täydennä siis label koodiin:
<label> Etunimi
[text* etunimi autocomplete:name class:nimi minlength:2 maxlength:20] </label>
Tee vielä sukunimelle oma kenttänsä esimerkiksi kopioimalla etunimen kenttä ja muuttamalla siihen tiedot: Sukunimi, sukunimi, autocomplete arvoksi family-name, CSS-luokaksi sukunimi ja maksimipituudeksi vaikka 30 merkkiä.
Postitustoiminto ja viesti (Mail)
Siirrytään Mail-välilehdelle, jossa luodaan sähköpostiin lähtevä viesti.
To-kenttä – Vastaanottaja (1.) eli sähköposti, johon lomakkeelta halutaan viestin lähtevän on oletuksena sivuston pääkäyttäjän sähköposti [_site_admin_email]. Jos jostain syystä halutaan sen lähtevät johonkin toiseen sähköpostiin, voit vain korvata lyhytkoodin haluamallasi sähköpostiosoitteella (esim. Etunimi Sukunimi
From-kenttä – Lähettäjä (2.) edustaa tietoa mistä sähköposti on lähetetty. Kentän oletustietoa ei tule muuttaa sillä muuten lomake ei toimi. Sähköpostiosoitteen on kuuluttava sivuston verkkotunnukseen turvallisuussyistä.
Miksi Lähettäjä-kentässä olevan sähköpostiosoitteen on kuuluttava sivuston verkkotunnukseen?
Jos esimerkiksi sähköpostin Lähettäjä -kentässä oli ”nimesi@yahoo.com” , mutta se lähetettiin verkkopalvelimeltasi (se ei ole yahoo.com), on erittäin todennäköistä, että välittävät sähköpostipalvelimet pitävät sitä väärennettynä osoitteena. Jos käytät sähköpostiosoitetta samassa verkkotunnuksessa kuin sivusto, voit vähentää riskiä joutua sellaiseen kohteluun. Lomaketta käyttävän sähköpostiosoite asetetaan Additional headers – Muut otsaketiedot (4.) -kentässä From – Lähettäjä (2.) kentän sijaan.
Subject – Aihe (3.) kenttä edustaa sähköpostin aihe kenttää, jonka lomakkeen täyttäjä täyttää.
Additional headers – Muut otsaketiedot (4.) kentässä voidaan asettaa esimerkiksi oletuksena oleva Reply-to -kenttä, jossa on selaajan sähköpostiosoite ja se tulostuu viestiin vastaanottajaksi, kun aiot vastata lomakkeen täyttäneelle selaajalle. Kentässä voidaan käyttää myös sähköpostin toimintoja Cc– ja Bcc-koodia samassa muodossa, kuin oletuksena oleva Reply-to.
Message body – Viestin runko (5.) kentässä rakennetaan varsinaisen viestin sisältö, joka lähtee sähköpostiisi. Tekstin seassa voit käyttää myös välilehden yläosassa olevia Sähköpostielementtejä – Mail Tags (6.), jotka määritettiin Lomake-välilehdellä.
HTML-muoto
HTML-muotoinen viesti tarkoittaa, että viestissä käytetään HTML-merkkausta ja sitä saatetaan myös muotoilla CSS-muotoilukielellä. Esimerkkejä HTML-viesteistä ovat erilaiset mainosviestit, jotka sisältävät kuvia, värillisiä taustoja ja muotoja sekä fontteja. HTML-muotoista viestiä voidaan käyttää myös Contact Form 7-lisäosassa täppäämällä kohdassa 7 toiminto Use HTML content type – Käytä HTML:ää aktiiviseksi.
Jos aiot muotoilla viestin sisältöä ja käyttää html-muotoista viestiä, kannattaa testata viestin perilletulo huolella muotoilemisen jälkeen. Jotkin muotoilut eivät välttämättä toimi oikein vastaanotetun viestin ulkomuodossa.
File attachments – liitetiedostot (8.) on kohta, jossa voidaan ottaa käyttöön toiminto, jonka avulla lomekkaan täyttäjä voi liittää viestiinsä liitetiedostoja. Toiminnon ottaminen käyttöön edellyttää luonnollisesti myös, että asianmukainen tiedostojen lataamiskenttä on asetettu lomakkeeseen. Tarkemmat ohjeet toiminnon ottamisesta käyttöön löydät Contact Form 7 ohjeista.
Use Mail 2 – Käytä sähköpostia 2 (9.) -toiminnon avulla voit lähettää duplikaatin viestistä samaan aikaan toiseen osoitteseen. Toimintoa käytetään tavallisimmin, kun halutaan, että lomakkeen käyttäjälle (selaajalle, joka lähettää lomakkeella viestin) lähtee kuittausviesti viestin lähettämisestä.
Lomakkeen turvallisuus
Yhteydenottolomake on otollinen toiminto roskapostittamiseen ja on erittäin suotavaa ja käytännössä välttämätöntä suojata lomake ”spammilta”. Otetaan siis lomakkeelle käyttöön Google Re-Captcha toiminto.
Klikkaa aloitussivulta painike ”Get started with Google Enterprise” ja nimeä sivustollesi oma projekti. Klikkaa Get Started-painiketta ja nelivaiheinen projektin luomistoiminto alkaa. Luomisvaiheen aikana sinun ei tarvitse tehdä mitään.
Kun lataaminen päättyy voit klikata painiketta Cloud Console ja siirryt Google Cloud Console -ohjauspaneelin sivulle.
Ohjauspaneelissa täydennetään avoimien kenttien tiedot. Huomioi että toimintoon asetetaan myös domain, joten paikalliselle palvelimelle ReCaptchan asentaminen on vaikea tai se ei toimi käytännössä. Yhteydenottolomakkeen reCaptcha:n käyttöönotto kannattaakin tehdä vasta sitten, kun sivustot on siirretty webhotellin palvelintilaan omalle domainille. Jos olet siirtänyt sivustosi alidomainille domain-asetuskenttään asetetaan päädomainin osoite (ei siis ali.omadomain.fi vaan pelkästään omadomain.fi). Valitse myös ReCaptchan käyttötarkoitukseksi Webpage kuten kuvassa.
Klikkaa seuraavaksi luomispainiketta näytön alalaidassa, jolloin ReCaptcha-toiminto luodaan.
Avautuu ikkuna, joka sisältää koodit, joilla voidaan lisätä ReCapcha toimintaan erilaisissa sivuston toiminnoissa. Koska ollaan lisäämässä ReCaptcha Contact Form 7 WordPress lisäosaan, klikataan sivun yläosassa olevaa painiketta Integrate with third party service or plugin
Site code
Painike avaa sivun päälle ”lightboxiin” tunnuskoodin, joka on ReCaptcha-toiminnon salainen koodi (Secret Code). Avaa jokin tekstieditori tietokoneestasi ja kopioi koodi talteen tekstitiedostoon. Tarvitsemme koodia hetken päästä.
Voit nyt sulkea ”lightboxin”.
Public code
Julkinen avain (Public code) löytyy asetussivun ylälaidassa ja näyttää samanlaiselta sarjalta merkkejä, kuin Secret code mutta on kuitenkin eri koodi. Kopioi myös se leikepöydälle ja liitä se myös juuri avaamaasi tekstieditorin tiedostoon talteen. Tarvitsemme koodia hetken päästä.
Aktivointi – Contact Form 7
Otetaan seuraavaksi Google ReCaptcha käyttöön Contact Form 7 -lisäosassa. Siirry WordPressin ohjauspaneelissa Contact Form 7 asetuksissa kohtaan Contact/Integration ja avaa vaihtoehdoista reCAPTCHA-valinta.
Lisää kenttiin kopioi ja liitä Site Key sekä Secret Key niille varattuihin kenttiin tekstieditoristasi, johon kopioit koodit reCAPTCHA:a luodessa. Jos olet jo luonut yhteydenottolomakkeen, voit testata toimiiko reCAPTCHA odotetusti. Lähtevätkö siis postit lomakkeelta.
