Kuinka lisäät lomakkeita sivuillesi?

Haluaisitko lisätä sivuillesi yhteydenottolomakkeen tai vaikkapa kyselylomakkeen? Ei hätää, tällä kertaa katsomme, miten lomakkeiden lisäys sivuille onnistuu. Käytämme lomakkeiden lisäykseen ilmaista Contact Form 7 lisäosaa.

Contact Form 7 tarjoaa tavan luoda monipuolisia lomakkeita sivustolle. Lomakkeeseen voi lisätä yli 15 eri tyyppistä kenttää. Kentille pystyy asettamaan kaikki perusjutut, kuten sen onko kenttä pakollinen vai ei. Lisäosa on suurimmaksi osaksi käännetty myös suomeksi. Kaikki lomakkeen lähetykseen liittyvät ilmoitusviestit pystyy tarpeen vaatiessa myös itse määrittämään lomakekohtaisesti.

Lomakkeiden määrällä ei ole mitään ylärajaa. Lomakkeet liitetään sivuille käyttämällä shortcodeja. Lomakkeen lähetyksestä lähetetään aina määritettyihin sähköposteihin ilmoitus. Lisäosa ei tallenna siis lomakkeita tietokantaan. Myös WP-Oppaan palautelomake on tehty Contact Form lisäosan avulla.

Tsekkaa alta video siitä, miten lomakkeiden lisäys onnistuu.

Videolla mainitut cc ja bcc vastaanottajat saa lisättyä ”Muita otsikoita” kohtaan seuraavalla syntaksilla:

[gist id=”5861560″]

Jos haluat, että lomakkeen lähetyksen jälkeen käyttäjä ohjataan kokonaan toiselle sivulle, tämä onnistuu lisäämällä lisäasetukset kohtaan seuraavanlainen rimpsu:

[gist id=”5861604″]

wpopas.fi tulee tietysti korvata omalla osoitteella.

Videon käsikirjoitus

Tervetuloa WordPress-oppaan pariin. Tällä kertaa käymme läpi, kuinka lisätä lomakkeita sivuille. Lomakkeiden avulla on helppo kysyä sivuston kävijöiltä esimerkiksi parannusehdotuksia. Lähes jokaisella sivustolla on myös vähintään yksi yhteydenottolomake. Käytämme lomakkeiden tekoon Contact Form 7 lisäosaa.

Asennetaan ensin lisäosa.

Kun asennus on valmis ja lisäosa on otettu käyttöön, sivupalkkiin ilmestyy kohta Yhteydenotto.

Lisäosa luo automaattisesti yhden lomakkeen, jota voi käyttää pohjana ensimmäiselle lomakkeelle. Lomaketaulukon voi järjestää sarakkeiden mukaan ja lomakkeita voi myös hakea vapaasanahaulla.

Siirrytään lomakkeen muokkaukseen.

Ensimmäisenä on lomakkeen nimi. Klikkaamalla nimeä, voimme vaihtaa sen halutessamme. Nimen alla on lomakkeen shortcode. Tämän avulla tulemme liittämään lomakkeen haluamallemme sivulle. Kopioi linkistä koko lomakkeen voi kopioida uuden lomakkeen pohjaksi. Poista linkistä lomakkeen voi tietysti poistaa. Kannattaa huomioida, että lomakkeen poisto ei poista lomakkeen shortcodea niiltä sivuilta joihin se on asetettu vaan shortcode pitää erikseen poistaa itse.

Lomake kohdan vasemmalla puolella on lomakkeen koodi. Lomakkeen luontia varten pitää hieman osata HTML:ää, mutta valmiilla mallilla saa jo aikaiseksi hyvän lomakkeen. p-tagi tarkoittaa kappaletta, ja br tagi rivinvaihtoa.

Oletuslomakkeessa on jo valmiiksi nimi, sähköposti, aihe ja viesti kentät sekä lähetä nappi. Voimme kuitenkin lisätä lomakkeelle paljon muitakin elementtejä luo tagi kohdasta.

Kuten näkyy, vaihtoehtoja on varsin runsaasti. Neljä ensimmäistä vaihtoehtoa ovat kaikki tekstialueita, mutta kenttien validointi eroaa toisistaan. Lomakkeeseen voi myös lisätä kahdenlaisia numerokenttiä. Päivämääräkenttä näyttää syöttämisen yhteydessä käyttäjälle kalenterin, josta päivämäärä on helppo valita.

Tekstikenttä on isompi tekstialue, joka voi sisältää useita rivejä tekstiä. Alasvetovalikkoon voi syöttää vaihtoehtoja, joista lomakkeen täyttäjä voi valita yhden tai useamman. Valintaruudukko listaa useita vaihtoehtoja, joista käyttäjä voi ruksittaa haluamansa vaihtoehdot.

Valintanapit listaavat monta vaihtoehtoa, mutta käyttäjä voi valita näistä ainoastaan yhden vaihtoehdon. Hyväksyntä kenttä pakottaa käyttäjän ruksittamaan kyseisen kentän. Jos kenttää ei ole ruksitettu, lomaketta ei lähetetä.

Kysymys kenttään voi määrittää omia kysymyksiä ja niille vastauksia. Jos vastaus on väärin, lomaketta ei saa lähetettyä. Tällä tavoin voi estää turhaa spämmiä.

CAPTCHA on myös kysely, jonka avulla spämmiä pyritään estämään. Suosittelen kuitenkin välttämään captchaa niin kauan kuin mahdollista. Harva tykkää tarkisteiden kirjoittamisesta. Kannattaa muutenkin muistaa, että mitä vähemmän lomakkeessa on kenttiä sitä todennäköisemmin käyttäjä sen täyttää ja lähettää.

Lomakkeeseen on myös mahdollista lisätä kenttä, johon voi omalta koneeltaan liittää tiedostoja. Kannattaa kuitenkin miettiä tarkkaan, haluaako julkiseen lomakkeeseen liittää tiedoston tallennusta, sillä tiedoston sisällöstä ei voi olla varma ennen kuin sen avaa. Viimeisenä on vielä Lähetä napin lisäys.

Lisätään lomakkeeseen alasvetovalikko. Kentän lisäyksen yhteydessä on mahdollista määrittää useita tietoja. Nämä tiedot saattavat vaihdella hieman sen mukaan minkätyyppistä kenttää ollaan lisäämässä.

Ensimmäiseksi voimme valita, onko kentän täyttö pakollista. Jos kenttä on pakollinen, lomaketta ei voi lähettää ennen kuin kenttä on täytetty.

Seuraavana on kentän nimi. Tämän voi muuttaa jos haluaa, mutta se ei ole pakollista. Id ja class arvot lisäävät kentän HTML-koodiin id ja class attribuutit. Kentät voi jättää tyhjiksi.

Valinnat kohtaan tulisi lisätä riveittäin kaikki halutut vaihtoehdot, jotka alasvetovalikossa näkyvät. Voimme myös sallia monivalinnan ja laittaa tyhjän valinnan ensimmäiseksi vaihtoehdoksi.

Kun kentän määritykset ovat valmiit se pitää lisätä vasemmalla olevaan lomakkeeseen. Tämä tapahtuu kopioimalla ruskealla pohjalla olevat koodi.

Seuraavana ovat sähköpostiin liittyvät asetukset. Lomakkeen lähetykset lähetetään aina määritettyihin sähköpostiosoitteisiin. Osoitteita voi olla useita, tällöin ne pitää erottaa pilkulla.

Sähköpostille voi määrittää myös lähettäjän ja aiheen. Näihin kenttiin voi kirjoittaa vapaasti mitä haluaa, tai sitten niihin voi laittaa lomakekenttien arvot kuten tässä esimerkissä. Viesti kenttään kannattaa tietysti laittaa kaikki lomakkeen kentät tai muuten osa tiedosta jää saamatta. Sähköposti kohtaan lisättävä kentän koodi löytyy vihreältä pohjalta.

Muita otsikoita kohtaan voi määrittää sähköpostin mahdolliset cc ja bcc vastaanottajat. Jos lomakkeelle oli määritetty tiedostokenttä, tällöin kenttä tulisi määrittää myös Liitetiedostot kohtaan, jotta liitetiedosto liitetään lähetettävään sähköpostiin.

Tämän jälkeen voi vielä määrittää lähetetäänkö sähköposti HTML-muodossa vai ei. Itse en yleensä ota HTML:ää käyttöön.

Seuraavaksi on toinen sähköposti kohta. Tässä kohdassa on identtiset kentät ylläolevaan verrattuna. Tämä sähköposti lähetetään lomakkeen lähettäjälle sen jälkeen kun hän on lomakkeen lähettänyt. Jos siis lomakkeen lähettäjälle haluaa lähettää vielä jonkinlaisen vahvistusviestin sähköpostitse, silloin tätä toiminnallisuutta kannattaa käyttää.

Viestit kohdassa on lomakkeen toimintaan liittyvät ilmoitusviestit. Ilmoituksia voi vapaasti muokata. Huomaa, että ihan kaikkia ilmoituksia ei nykyisessä versiossa ole suomennettu.

Lisäasetukset kohtaan voi laittaa edistyksellisempiä asetuksia, joita emme tällä kertaa käy läpi.

Nyt lomakkeemme on valmis. Tämän jälkeen Tallennamme lomakkeen. Lisätäksemme lomakkeen halutulle sivulle, kopioimme lomakkeen shortcoden. Tämän jälkeen siirrymme muokkaamaan haluttua sivua ja liitämme shortcoden haluttuun kohtaan. Esikatselu näyttää että lomakkeemme on tosiaan sivulla.

Jos yritämme lähettää lomakkeen heti, se herjaa virheistä, koska pakollisia kenttiä ei ole täytetty. Jos täytämme kaikki kohdat ja lähetämme lomakkeen, tästä pitäisi tulla sähköpostiin viesti.