WordPress-julkaisujärjestelmään on tarjolla lukuisia erilaisia tapoja lisätä sivustolle lomake. Toiminnallisuus löytyy niin sivuston rakentamiseen tarkoitetuista lisäosista (page builder) kuin teemoistakin, mutta yleensä nämä vaihtoehdot ovat muokkausten suhteen jäykkiä ja oman kokemukseni mukaan niiden toimivuus on ajoittain epävarmaa. Lomakkeen voi myös luoda ulkopuoliseen palveluun kuten Google Forms ja upottaa sen sitten koodin avulla WordPress-sivulle. Suosituin tapa on kuitenkin lomakkeen lisääminen WordPress-lisäosan avulla.
Tässä kirjoituksessa tutustumme kolmeen suosittuun WordPress-lisäosaan, joiden avulla lomakkeiden teko onnistuu. Listasimme mielestämme mukaan parhaat WordPress lisäosat lomakkeiden tekoon.
Mihin lomakkeita tarvitaan?
Yleisin versio lomakkeesta on tietenkin asiakkaiden yhteydenottoa ja yhteystietojen keräämistä varten laadittu lomake. Lomakelisäosista löytyy kuitenkin laaja valikoima toiminnallisuuksia, joten vain mielikuvitus on rajana niiden hyödyntämisessä. Erilaiset kyselyt, tarjouspyyntölomakkeet, hinnoittelutyökalut, ilmoittautumislomakkeet ja varaustoiminnot ovat helposti toteutettavissa ja lisäosista löytyy myös vaihtoehtoja kortti- ja PayPal-maksujen vastaanottamiseen lomakkeen täyttämisen yhteydessä.
Contact Form 7
Contact Form 7 (tunnetaan myös lyhenteellä CF7) on lomakelisäosista suosituin. Se on ollut tarjolla useita vuosia ja se on säilyttänyt asemansa hämmästyttävän hyvin. Erityistä tämän lisäosan suosiossa on se, että sen laajempi käyttö edellyttää osaamista niin lyhytkoodien, CSS:n kuin html-tagienkin osalta, kun käytännössä kaikki muut lisäosat ovat päivittyneet ei-ammattilaisen näkökulmasta käyttäjäystävällisempään ja visuaalisempaan suuntaan.
Lisäosan suosion huomaa konkreettisesti esimerkiksi Zonerin WordPress -tutkimuksesta, jossa peräti 38,66% kaikista WordPress-asennuksista sisälsi kyseisen lomaketyökalun. CF7 on lomakkeena varmatoiminen ja kevyt ja suosiota selittää tietysti myös se, että lisäosa on ilmainen. Ulkoasun muokkaaminen CSS:n avulla on helppoa ja lisäosalla on hyvä (englanninkielinen) dokumentaatio.
Helppo lomakkeen käyttöönotto
Contact Form 7 oletuslomake on käyttökelpoinen sellaisenaan perinteiseksi yhteydenottolomakkeeksi. Oletuslomake sisältää kentät: nimi, sähköpostiosoite, aihe ja viesti sekä lähetä-nappulan.
Voit lisätä lomakkeeseen erilaisia kenttiä kuten pudotusvalikon, valintanappuloita, tietovisaa, tiedoston latauksen ja päivämäärän. Muista, että jokainen lisätty kenttä pitää lisätä myös lähetettävään sähköpostiviestiin.
Lisää oma sähköpostiosoitteesi Mail-välilehdelle kohtaan Vastaanottaja ja muokkaa halutessasi viestin otsikkoa.
Lomake saadaan näkyviin kopioimalla lomakkeen lyhytkoodi leikepöydälle ja lisäämällä se haluamaasi paikkaan sivustollasi. Koodi lisätään sivustolle tekstieditoriin tai sivurakentajan koodi- tai lyhytkoodi-palikan avulla. Ala-/sivupalkkiin koodin saa lisättyä esim. HTML-vimpaimella.
Lomakkeen ulkoasua voi halutessaan muokata CSS:n avulla, sillä kaikki teeman muotoilut eivät välttämättä välity lomakkeeseen.
CF7:n ympärille on rakennettu laaja valikoima lisäosia, joilla lomakkeen toiminnallisuuksia saa laajennettua. Contact Form 7 ei kerää lomakkeella lähetettyjä vastauksia sivustollesi, mutta myös sitä varten löytyy lisäosia, esimerkiksi Contact Form Submissions.
Gravity Forms
Gravity Forms on maksullinen lisäosa, hinta alkaen $59/vuosi. Gravity Forms sisältää valtavasti ominaisuuksia ja jos ne eivät riitä, löytyy WordPressin kirjastosta varmasti lisäosa, jolla täydennät Gravity Formsia tarpeidesi mukaan. Gravity Formsin perusominaisuuksiin kuuluvat mm. ehdolliset kentät, lomakelaskurit ja lomakkeiden ajastaminen. Voit myös kerätä esim. ilmoittautumismaksuja lomakkeen yhteydessä. Lisäksi lisäosa sisältää valmiiksi integraatiot esim. suosituimpiin uutiskirjeohjelmistoihin.
Lomaketyökalun käyttöliittymä
Gravity Formsin käyttöliittymä on visuaalisesti selkeä ja yksinkertainen käyttää. Vedät vain haluamasi elementit paikoilleen lomakkeeseen ja muokkaat niitä haluamallasi tavalla. Löydät muokkausmahdollisuuksia klikkaamalla elementtiä ja vielä lisää klikkaamalla elementin otsikkorivillä näkyvää alaspäin osoittavaa nuolta.
Oikean reunan valikoista löytyy useita erilaisia elementtejä osioita avaamalla ja lomakkeen vakiotekstejä ja ilmoituksia voit hallita Settings-valikon kautta. Sähköpostiviestien asetukset löytyvät kohdasta Notifications. Yläreunan valikoista löytyvät myös integraatioasetukset ja lomakkeen kautta lähetetyt vastaukset. Voit myös katsoa, miltä luomasi lomake näyttää esikatselun avulla.
Lomakkeen lisääminen sivulle
Lomake lisätään sivustolle vimpaimen avulla.
Gutenberg-editorista lomake löytyy osiosta Upotukset (Embeds)
Perinteisestä muokkaimesta lomake löytyy tekstieditorin yläpuolelta
Ala-/sivupalkkiin lomakkeen voi lisätä Forms-vimpaimen avulla
Lomakkeen ulkoasu
Lomakkeen ulkoasu mukautuu teeman asetusten mukaiseksi, mutta voit halutessasi tehdä muutoksia myös CSS:n avulla.
Voit testata lomakelisäosan demoa maksutta täällä:
www.gravityforms.com/demo/
Ninja Forms
Ninja Forms on maksuton lomakelisäosa, joka tarjoaa selkeän ja visuaalisen hallintaliittymän lomakkeiden rakentamiseen. Erilaisia elementtejä ja perustoimintoja on ilmaisversiossa tarjolla mukavasti ja kohtuuhintainen premium-lisenssi (alk. $29/vuosi) tuo mukanaan runsaan valikoiman ominaisuuksia ja tehokkaan ja kiitetyn tukifoorumin.
Lomakkeen luominen
Ninja Formsin hallintaliittymä aukeaa koko ruudun kokoisena, jolloin työskentelytila voidaan käyttää täysin. Hallintapuolella ei ole mitään ylimääräistä ja näkymä on selkeä. Yksittäisen elementin muokkausvaihtoehdot aukeavat ruudun oikeaan reunaan ja uusia elementtejä löytyy oikean alakulman +-merkin kautta.
Voit muokata sähköpostin asetuksia Sähköposti-välilehden kautta kohdasta Email Notifications. Lisää lomakekentät lähetettävään sähköpostiin mediakuvakkeen vierestä.
Lomakkeen lisäys sivustolle
Lomake lisätään sivustolle vimpaimen tai lyhytkoodin avulla.
Gutenberg-muokkaimesta lomake löytyy lohkona nimellä Ninja Forms.
Perinteiseen muokkaimeen lomakkeen saa esim. lyhytkoodin avulla
Ala-/sivupalkkiin lomakkeen voi lisätä Ninja Forms Widget -vimpaimen avulla
Lomakkeen ulkoasu
Lomakkeen ulkoasu mukautuu teeman asetusten mukaiseksi, mutta voit halutessasi tehdä muutoksia esim. CSS:n avulla. Ninja Forms tarjoaa ulkoasun muokkaukseen myös erillisen, maksullisen lisäosan.
Myös Ninja Formsin ympäriltä löytyy suuri määrä lisäosia, joiden avulla sen ominaisuuksia voi venyttää mieleiseensä suuntaan.
Etsitkö WordPress hostingia?
Jos etsit kattavaa WordPress hostingia, niin tutustu WP.one-paketteihin. Ne sisältävät nopean, WordPress-optimoidun, palvelimen lisäksi myös automaattiset WP-päivitykset (myös lisäosien osalta) ja toimivuustestauksen päivitysten jälkeen.
Vieraskirjoittaja
Annika Pulkkinen on Sivutaikuri ja ongelmanratkaisija. Verkkosivustojen suunnittelun ja rakentamisen lisäksi hän nauttii suunnattomasti siitä, että voi opastaa sinua WordPress-maailman sokkeloissa, joissa hän on itse pyörinyt aktiivisesti vuodesta 2014 lähtien.
