3.1. 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.

Sähköpostilisäosana Contact Form 7

Contact Form 7 -lisäosa on yksi suosituimmista lisäosista lomakkeiden toteuttamiseen. Luultavasti syynä suosioon on sen keveys. Lisäosa ei sisällä suuremmin ylimääräistä vaan perustoiminnot lomakkeen luomiseen. Contact Form 7-lisäosassa ei ole liioin erityisen graafinen käyttöliittymä vaan lomakkeet luodaan html-koodeilla. Vaikka html-merkkausta täytyy harrastaa, lisättävät merkinnät ovat perin yksinkertaisia ja vaativat vain vähän opettelemista. Itse toiminnallisuus hoituu luonnollisestikin lisäosan toimesta.

Yhteydenottolomakkeen luominen

Asenna ja ota käyttöön lisäosa WordPressissä ja siirry lisäosan osioon hallintapaneelissa valintaan Yhteydenotto/Yhteydenottolomakkeet (Contact/Contact Forms). Jo ennen lomakkeen luomista voit luoda itse yhteydenottosivun, johon lomake tulee.

Kun olet asentanut lisäosan, huomaat, että 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.

1. Lomakkeen koodaus näkymä
2. Lomakkeelle lisättävien kenttien painikkeet
3. Contact Form 7 lisäosan välilehdet lomakkeelle
4. Lomakkeen kopioitava lyhytkoodi (Short code).
5. Lomakkeen nimi
6. 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.

1. Kentän tyypin valinta ja mahdollisuus asettaa kenttä pakolliseksi täyttää.
2. Kentän nimi ja mahdollisuus asettaa kentän nimeksi asetettu arvo automaattisen täytön määritteeksi.
3. CSS-luokan voit määrittää myös, jolloin kenttään voidaan kohdistaa CSS-muotoiluja helpommin.
4. Kannattaa asettaa myös minimi- ja maksimipituus kentälle vaikka vain tietoturvallisuudenkin takia.
5. Kentän oletusarvo tarkoittaa, että määritetty arvo tulee oletuksena kentän arvoksi, jollei selaaja kirjoita kenttään mitään.
6. 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 tai vain etunimi.sukunimi@domain.com).

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ä.