Tämä on yleinen ilmoitus. Sivuston ilmoitukset näkyvät sivuston jokaisella sivulla. Voit muokata sivuston ilmoituksia sivuston ohjausnäkymän kohdasta Ulkoasu > Mukauta > Ilmoitukset.

Lomakkeet (Contact Form 7)

Contact Form 7 -lisäosan avulla voi luoda yksinkertaisia lomakkeita sivustolle.

WordPress.hel.fi -alustan kautta perustetuille sivustoille voidaan toteuttaa yksinkertaisia lomakkeita tarpeen mukaan. Lomakkeella voidaan esimerkiksi kerätä suoraa palautetta kävijältä tietystä asiasta tai toteuttaa uutiskirjeen liittymislomake. Myös monimutkaisten ja älykkäiden lomakkeiden (esim. erilaiset laskurit) toteuttaminen on teknisesti mahdollista.

Palautelomake

Jokaisen Helsinki-teemaa käyttävän sivun ylälaidassa on linkki kaupungin yhteiselle palautelomakkeelle (palautteet.hel.fi). Tämän tyyppistä palautelomaketta ei ole siis tarvetta erikseen toteuttaa.

Kuvakaappaus sivuston ylätunnisteesta, jossa linkki palautelomakkeelle.

Ohjeita lomakkeiden rakentamiseen

Helsinki Design Systems (HDS) tarjoaa ohjeita ja parhaita käytänteitä lomakkeiden rakentamiseen.

Contact Form 7 -lomakkeet

Kaikilla wordpress.hel.fi -alustan kautta luoduilla sivustoilla on automaattisesti käytössä Contact Form 7 -lisäosa. Tällä lisäosalla on mahdollista toteuttaa yksinkertaisia lomakkeita esim. palautteen keräämistä tai yhteydenottoa varten.

Alta löydät lyhyet ohjeet Contact Form 7 -lisäosan käyttöön. Yksityiskohtaisemmat ohjeet löydät lisäosan omalta sivulta: https://contactform7.com/docs/

Lomakkeiden luonti

Lomakkeita voit luoda sivuston ylläpitonäkymän kohdassa “Yhteydenotto” (eng. “Contact”). Mikäli kyseistä kohtaa ei näy, ota lisäosa käyttöön sivulla “Lisäosat”. Voit luoda kokonaan uuden lomakkeen valitsemalla “Lisää uusi” tai muokata automaattisesti luotua lomakkeen.

Lomakkeen nimi

Lomakkeelle on annettava kuvaava nimi. Kuvaava nimi voi olla esimerkiksi “Palautelomake” tai “Yhteydenottolomake”.

Tämä on tärkeää siksi, että lomakkeen nimeä käytetään lomakkeen html-koodin title-attribuuttina. Ruudunlukijat käyttävät tätä attribuuttia lomakkeen otsikkotietona, joten lomakkeen kuvaava nimi on myös saavutettavuusvaatimus.

Lomakkeen muokkaus

Lomakkeen sisältöä muokataan kentässä “Lomake”. Lomake ei näy tässä näkymässä sellaisen, kuin se näkyy valmiilla sivulla, vaan lomaketta muokataan yksinkertaisella koodikielellä. Muokkauskentässä voi käyttää html-koodia sekä Contact Form 7:n omia merkintöjä.

Hakasulkeissa olevat merkinnät ovat Contact Form 7:n lomakekenttiä ja painikkeita. Merkinnät “<label>” ja “</label>” tarkoittavat, että elementti on nimiöity elementti, jonka ruudunlukija osaa havaita. Jokainen elementti pitää olla nimiöity, jotta lomake toimii saavutettavasti.

Uusia kenttiä voit luoda klikkaamalla haluamasi kenttää vastaavaa nappia muokkaimen ylälaidassa. Jos esimerkiksi haluat luoda kentän katuosoitteelle, klikkaa kohtaa “Teksti”. Avautuvassa lomake-elementtigeneraattorissa voit määrittää tekstikentälle asetukset.

Jos jokin lomakkeen kenttä on pakollinen, niin se tulee kertoa käyttäjälle kentän yhteydessä. Pakollisen kentän voi kertoa käyttäjille *-symbolilla tai (pakollinen) -tekstillä kentän nimiön yhteydessä. Jos kenttien yhteydessä käytetään *-symbolia, niin ennen lomaketta käyttäjälle tulee kertoa siitä seuraavasti “Kaikki *-merkityt kentät ovat pakollisia”.

Mikäli lomakkeella on tekstikenttiä, niin lomakkeen yhteyteen on hyvä lisätä ohjeistusta käyttäjälle olemaan lisäämättä lomakkeelle arkaluonteisia henkilötietoja esim. ”Ethän kirjoita lomakkeelle arkaluonteisia tietoja kuten terveystietoja, henkilötunnusta, pankkitilin numeroa tai tietoa varallisuudesta.”

Honeypot-kenttä eli “hunajapurkki”

Verkkosivuilla olevien lomakkeiden kautta pyritään usein myös lähettämään roskapostia. Tämä tapahtuu siten, että automattiset botit käyvät läpi verkkosivustoja, ja pyrkivät lähettämään löytämiensä lomakkeiden kautta viestejä lomakkeiden vastaanottajille.

Näitä automaattisia viestejä voidaan vähentää hämäämällä botteja “hunajapurkin” avulla. Kyseistä kenttää ei näytetä tavalliselle käyttäjälle, mutta botti ei tätä tiedä, vaan erehtyy täyttämään kentän. Näin voidaan automaattisesti erottaa oikeat käyttäjät roskapostia lähettävistä boteista.

Honeypot-kentän lisäys lomakkeelle tapahtuu samoin kuin muidenkin kenttien lisäys, eli klikkaamalla Honeypot-nappia muokkaimen yläreunassa. Avautuvassa ikkunassa kentän nimen “honeypot” joksikin muuksi, kuten “message” tai “email”. Tämä voi auttaa bottien hämäämisessä. Muihin asetuksiin ei tarvitse koskea.

Sähköpostin asetukset

Lomakkeella annetut vastaukset lähetetään sivustolta sähköpostilla haluamaasi osoitteeseen tai osoitteisiin. Vastauksia ei tallenneta lainkaan itse sivustolle, joten on erittäin tärkeää, että sähköpostiasetukset ovat oikein ja ne toimivat. Sähköpostin asetuslomakkeen kentissä voi käyttää sekä tekstiä, että Contact Form 7:n omia merkintöjä.

  • Lomakkeen lähettämän sähköpostin vastaanottaja määritetään kohdassa “Vastaanottaja”. Vastaanottajan osoite voi olla esimerkiksi oma sähköpostiosoitteesi tai merkintä “[_site_admin_email]”, jolloin sähköposti lähetetään sivuston ylläpitäjälle.
  • Sähköpostin lähettäjä merkitään kohtaan “Lähettäjä”.
  • Sivuston lähettämän sähköpostiviestin osoitekentän sisällön voit määrittää kohdassa “Aihe”.
  • Kohdassa “Additional headers” voit määrittää sähköpostin cc- ja bcc-vastaanottajat, eli kopiot ja piilokopiot.

On tärkeää, että jokaisen lomakkeella olevan kentän koodi löytyy myös sähköpostiasetusten “Message Body” -kentästä. Muussa tapauksessa osa tiedoista menetettäisiin, koska tiedot eivät näkyisi sähköpostiviesteissä. Lomakkeen kenttien koodit löydät asetuslomakkeen yläreunasta (esim. “[text-katuosoite]”).

Voit myös tarvittaessa lisätä toisen automaattisen sähköpostiviestin asetukset kohdasta “Sähköposti (2)”. Tätä voidaan käyttää esimerkiksi automaattisen vastausviestin lähettämiseen.

Voit muokata lomakkeen näyttämiä kuittaus- ja virheviestejä välilehdellä “Viestit”. Tämä on tarpeen erityisesti silloin, kun teet lomakkeesta useita kieliversioita. Jokainen kieliversio lomakkeesta vaatii oman lomakkeen rakentamisen.

Lomakkeen lisäys sivulle

Contact Form 7 -lomake voidaan lisätä sivustolle lohkoeditorin avulla.

Kun lisäät uutta lohkoa, voit etsiä Contact Form 7 -lohkon esimerkiksi hakusanalla “contact”.

Lohkon lisäyksen jälkeen valitse pudotusvalikosta haluamasi lomake.

Päätyvätkö viestit roskapostiin?

On tärkeää, että lähettäjäkentässä määritellyn sähköpostiosoitteen domain (eli @-merkin jälkeen tuleva palvelimen osoite) on sama kuin itse sivuston osoite. Jos siis sivustosi osoite on esim. “helsinki-sivu.hel.fi”, niin lähettäjän osoitteen tulisi olla esim. “info@helsinki-sivu.hel.fi”. Muussa tapauksessa on erittäin suuri riski, että viestit päätyvät roskapostiin.

Henkilötietojen kerääminen lomakkeella

Tietosuoja täytyy huomioida jos lomakkeella kerätään henkilötietoja. Tietosuoja tarkoittaa henkilötietojen suojaamista. Henkilötietoja ovat tiedot, joiden perusteella henkilö voidaan tunnistaa joko suoraan tai välillisesti yhdistämällä yksittäinen tieto johonkin muuhun tietoon. Henkilötietoja ovat esimerkiksi nimi, sähköpostiosoite, puhelinnumero, paikannustiedot, henkilötunnus ja IP-osoite.

Jos sivustolla on lomake, jonka avulla kerätään henkilötietoja eri käyttötarkoituksiin, tulee tehdä tietosuojan vaikutustenarviointi tai käyttää tietosuojan tarkistuslistaa, jolla selvitetään mm., mikä on kerättyjen henkilötietojen lainmukainen peruste, mihin kaupungin rekisteriin tiedot kuuluvat tai syntyykö kerätyistä henkilötiedoista uusi rekisteri, miten kerätyt tiedot suojataan, miten rekisteröidyt voivat toteuttaa oikeuksiaan ja millaisia mahdollisia riskejä aiotusta henkilötietojen käsittelystä voi aiheutua. Tietosuojan vaikutustenarvioinnin tekemisessä tai tietosuojan tarkistuslistan käyttämisessä neuvoo kyseisen organisaation tietosuojan vastuuhenkilö.

Ohjeita henkilötietoja keräävän lomakkeen muodostamiseen:

  • Lisää lomakkeen yhteyteen linkki osoitteeseen hel.fi/rekisteriseloste sekä tieto, mihin kyseisellä sivulla julkaistuun rekisteriin lomakkeella kerätyt tiedot kuuluvat, jos lomakkeella kerätään henkilötietoja. Vaihtoehtoisesti voi myös lisätä suoran linkin sen rekisterin rekisteriselosteeseen, johon lomakkeella kerätyt tiedot kerätään (Huom! Jos rekisteriselostetta päivitetään eli vaihdetaan vanhan tilalle uusi rekisteriseloste, niin silloin linkki hajoaa).
  • Lomakkeelle voi lisätä valintaruudun siinä tapauksessa, jos henkilötietojen käsittely perustuu käyttäjän suostumukseen (Esim. Sähköpostiosoitteiden keräämisestä uutiskirjettä varten). Käsittelyperuste selvitetään tietosuojan vaikutustenarvioinnilla tai käyttämällä tietosuojan tarkistuslistaa.
  • Lomakkeen yhteyteen voi lisätä linkin Rekisteröidyn oikeudet ja niiden toteuttaminen -sivulle, jolla ohjeistetaan, miten rekisteröity voi toteuttaa oikeuksiaan.

Esimerkkilomakkeet

Huom! Lomakkeiden tietoja ei lähetetä.

Pikapalaute (esimerkkilomake)

    Löysitko tiedon mitä kaipasit? Voit jättää palautetta palvelun toiminnallisuuksista tai kertoa, jos jokin asia ei mielestäsi toiminut tai mennyt aivan nappiin.

    Aihe

    Kopio pikapalaute-lomakkeen koodi Contact Form 7 -lisäosan lomakkeen muokkauskenttään alapuolelta.

    <fieldset>
        <legend>Aihe</legend>
        [checkbox checkbox use_label_element "Jokin ei toimi" "Parannusehdotus" "Kiitokset ja kehut"] </fieldset>
    
    <label> Otsikko
        [text your-text] </label>
    
    <label> Viesti
        [textarea your-message] </label>
    
    [honeypot email-hunajapurkki]
    
    [submit "Lähetä"]

    Yhteydenotto (esimerkkilomake)

      Kaikki *-symbolilla merkityt kentät ovat pakollisia.

      Lisätietoa henkilötietojesi käsittelystä on (palvelun xxx) rekisteriselosteessa (linkki avautuu uuteen välilehteen), jossa kerrotaan muun muassa tarkemmin henkilötietojesi käsittelyn oikeusperusteista ja tietojesi säilytysajoista.

      Kopio yhteydenotto-lomakkeen koodi Contact Form 7 -lisäosan lomakkeen muokkauskenttään alapuolelta.

      Kaikki *-symbolilla merkityt kentät ovat pakollisia.
      
      <label> Nimi
          [text your-name] </label>
      
      <label> Sähköpostiosoite
          [email your-email] </label>
      
      <label> Aihe
          [text your-subject] </label>
      
      <label> Viesti *
          [textarea* your-message] </label>
      
      [acceptance your-acceptance]Annan suostumukseni edellä lueteltujen henkilötietojeni käsittelyyn (palvelun xxx) tuottamiseksi. * [/acceptance]
      
      Lisätietoa henkilötietojesi käsittelystä on <a href="https://hel.fi/rekisteriseloste" target="_blank">(palvelun xxx) rekisteriselosteessa (linkki avautuu uuteen välilehteen)</a>, jossa kerrotaan muun muassa tarkemmin henkilötietojesi käsittelyn oikeusperusteista ja tietojesi säilytysajoista.
      
      [honeypot email-hunajapurkki]
      
      [submit "Lähetä"]