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:

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:

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.

Kirjoittaja WP-opas ja WPWoofi yhteisö

Me ollaan Suomen suurin WordPressiin ja WooCommerceen erikoistunut Facebook-ryhmä joka käyttää WordPressiä ja WooCommercea bisnekseen päivittäin. Tule mukaan WPWoofin - Facebook-ryhmään. Ylläpidämme ja päivitämme myös WP-oppaan hyödyllisiä artikkeleita.

Keskustele ja kysy

  • Jaana Rusi sanoo:

    Hei Timo,

    kiitos niin monesta hyvästä vinkistä, joita olen sivuiltasi löytänyt.

    Kysymys yhteydenottolomakkeen Checkboxista: olen lisännyt yhteydenottolomakkeen loppuun mahdollisuuden tilata uutiskirje, jottei asiakkaiden tarvitse täyttää kahta lomaketta – yhteydenottolomake, jossa pyytävät lisätietoa tai yhteydenottoa, sekä uutiskirjeentilauslomaketta.
    Nyt en kuitenkaan saa sähköpostiini tulevaan viestiin näytille, haluaako yhteydenottolomakeen lähettäjä tilata myös uutiskirjeen. Mitä minun pitää Viesti-osioon lisätä? Tai mitä sieltä puuttuu?

    Kiitos suuri,
    Jaana

    • Timo Leiniö sanoo:

      Viesti osioon pitää laittaa kentän nimi hakasulkeiden sisälle. Eli jos kentän nimi olisi vaikka tilaauutiskirje niin viesti osioon pitäisi sijoittaa [tilaauutiskirje] siihen kohtaan viestiä johon sen arvon haluat näkyville.

  • Jari sanoo:

    Hei Timo.
    Olen kiinnostunut avaamaan verkkokaupan, ja
    kysyisin yhtä yksityiskohtaa:

    Painotuotteista, joita toimitamme, käyntikortti tarvitsisi
    oman simppelin lomakkeen, johon voisi käyntikorttipohjaan lyödä
    tilaajan muuttuvat tiedot, kuten nimi, puhelin, s-posti.
    sitten tilaajan pitäisi saada palvelun generoima näköisvedos katsottavakseen, ja toimitus automaattiseti myös meille.

    Onnistuuko tällainen jollakin lisäosalla?

    Kiitos kovasti,

    terv. Jari

  • Tapio sanoo:

    Tuossa pieni virhe. Blogisivustolla WordPress.com-palvelu.

  • Tapio sanoo:

    Laadin minäkin opasteen WordPress & bbPress asentamiseksi: https://wp.me/p9LZMc-2k6

    Olen kymmenisen vuotta sitten pystyttänyt www-sivustoja ja uusi pystytys onnistui melko hyvin. Muutamia todella ärsyttäviä juttuja koin, joista voisin kanssasi keskustella.
    * WordPress.org kautta saadussa versiossa ei pysty käyttämään staattista etusivua. Jos sellaisen määrittää sivun sisältö toistuu useaan otteeseen ja mukaan tulee toisten sivujen sisältöä. Pitäisi joskus tehdä asiasta bugi-ilmoitus
    * bbPress kommentointia ei saa ennakkosensuurimoodiin

    Sain nyt kyllä artikkelisivua käyttäen ihan ok etusivun: http://www.sanaristikkofoorumi.net/wordpress/

    Yritän saada WordPress & bbPress toimivaa kokonaisuutta. Ihan alkuun sain niskaan robottipommituksen ja piti lisätä ihan pakosta Captha rekisteröitymiseen.

    Tulin tälle sivulle kun etsin lomakkeiden luomista. Oletuksena ei ole lomakegeneraattoria. Olen toki joskus luonut niitä ihan koodieditorilla, mutta en enää muista miten homma meni, joten apuneuvosta olisi apua. Täytyy kokeilla suosittamaasi ohjelmaa.

    • Timo Leiniö sanoo:

      Asetukset > Lukeminen osiossa ylläpidossa pystyy määrittämään mikä sivu toimii etusivuna. Tuolla tavalla pitäisi pystyä tekemään staattinen etusivu. Mikäli tuon kanssa on ongelmia, voi olla että joku lisäosa tai käytössä oleva teema aiheuttaa jotakin minkä takia etusivu ei toimi oikein.

      bbPress on tosiaan varsin kevyt ja yksinkertainen foorumilisäosa, jossa on selvät omat puutteensa. Saisikohan tällä lisäosalla https://wordpress.org/plugins/moderation-tools-for-bbpress/ moderointiin lisää vaihtoehtoja?

      • Tapio sanoo:

        Etusivuongelma on ymmärtääkseni versiokohtainen. Minulla on kaksi eri versiota WordPressistä.

        Blogisivustolla on WordPress.org-palvelun kautta WordPress, jossa staattinen etusivu toimii ongelmitta ja minulla on siellä staattinen etusivu.

        Foorumisivustolla on puolestaan WordPress.org kautta haettu asennuspaketti, jonka itse asensin palvelimelle (blogisivustolla on erittäin tarkat ohjeet, miten asennus tapahtuu). Sen kanssa staattinen etusivu ei mainitsemistani syistä toimi. Valitsee minkä tahansa sivun staattiseksi etusivuksi, etusivu näkyy aina väärin. Joskus enemmän, joskus vähemmän, mutta asetusta ei voi käyttää.

        Robottihyökkäyksen jälkeen asensin lisäosan NoMoreCaptchas – aivan FANTASTINEN. Yksinkertaisempi kuin alkuperäinen ja miljoona kertaa miellyttävämpi kuin Captcha, joka on joskus sietämättömän ärsyttävä. Tavallaan robottipommitus oli hyvä, sillä sain alkuperäistä paremman rekisteröintitavan.

        Minusta moderointimahdollisuudet ovat kohtalaiset. Säikeitä voi siirtää ja poistaa. Käyttäjän voi asettaa kirjoituskieltoon asettamalla rooliksi ”Katsoja”. Riittää minulle.

        Keskustelin kirjautumisista eräässä teknisessä foorumissa. Foorumin aktiivijäsen kehotti, että rekisteröidyille käyttäjille pitää antaa mahdollisuus aina kirjoittaa. Ajattelin, että joskus vaadittaisiin ennakkotarkistus, mitä bbPressissä ei ole (WordPressin muiden sivujen osalta on mahdollisuus määrittää, että kommentit pitää hyväksyä käsin).

      • Tapio sanoo:

        Asensin tuon ehdotuksen mukaisen lisäosan. Kiitos vinkistä. En jaksa tänään tarkastella sen toimintaa.

        PS. Sekoilin vähän näiden sisäkkäisten kommenttien kanssa ja
        Tapio sanoo:
        4.11.2018 22.13
        Tuossa pieni virhe. Blogisivustolla WordPress.com-palvelu.
        tuli väärään paikkaan.

        Pahoittelut.

        Nyt käsitellään kyllä aiheen vierestä. Onkohan tällä sivustolla oikeaa paikkaa bbPress liittyen.

      • Timo Leiniö sanoo:

        bbPressiä on kevyesti käsitelty täällä https://wpopas.fi/kuinka-lisaat-keskustelupalstan-wordpress-sivustolle/

Lisää uusi kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *