Kategoria: Forms

WordPress ja Elementor

WordPress-sivuston rakentaminen erillisellä pagebuilderilla on paljon helpompaa. Mikäli et ole aikaisemmin käyttänyt esim. Gutenberg-työkalua, yksi vaihtoiehto on ottaa käyttöön Elementor. Elementorin voit ladata ilmaiseksi WordPressin lisäosakirjastosta. Elementorin avulla sisällön rakentaminen onnistuu hyvin ilman ohjelmointitaitoja vedä-ja-pudota -lohkojen avulla. Näet samalla sivusi lähes samanlaisena kuin se olisi julkaistaessa.

Elementorin perusversio ei sisällä lomakegeneraattoria (Form Builder). Lomakegeneraattori on Elementor Pro:n ominaisuus. Elementor Pro:ssa on reilusti enemmän toiminnallisuuksia ja usein sivustoille asennetaankin Elementorin sijasta Elementor Pro. Yksi hyvä syy hankkia Elementor Pro on nimenomaan sen helppokäyttöinen lomakkeiden rakentamiseen tehty elementti. Tämän elementin avulla lisäät sivustollesi esimerkiksi yhteydenottolomakkeen todella nopeasti ja helposti. Lomakkeen kenttiä ja ulkoasua on myös helppo muuttaa.

Elementorin käytön aloittamiseen löytyy runsaasti materiaalia heidän tukisivultaan: Elementor help.

Alla kerron, miten lisäät lomakkeen sivullesi. Lomakkeen toimintojen lisäämiseen ja lomakkeen ulkoasun muokkaamiseen löytyy myös runsaasti tietoa samaisilta Elementorin tukisivuilta.

Samalla on tärkeää ottaa huomioon lomakkeen turvallisuus. Roskapostitukseen käytettävät botit löytävät lomakkeesi hyvin nopeasti, joten se kannattaa samalla suojata bottien roskapostitukselta.

Elementor-lomakkeen asentaminen

1. Avaa muokattava sivu “Muokkaa Elementorilla”-valinnalla.
2. Näkymän vasemman laidan sivupalkista löytyvät sivulle pudotettavia elementtejä. Mikäli käytössäsi on Pro-versio, “Pro”-elementit löytyvät heti “Perus”-elementtien alapuolelta. Helpoiten voit kirjoittaa yläreunan hakuvimpaimeen sanan “form”.

   

3. Vedä ja pudota “Form”-elementti sivullasi kohtaan “Vedä vimpain tähän”. Pudotettaessa elementti muuntuu luonnosmuotoiseksi lomakkeeksi.

   

4. Voit valita lisää kenttiä ja muuttaa nykyisiä kenttiä vasemman laidan sivupalkin “Form Fields”-kohdasta. Lisää kenttä painamalla “+ Lisää kohde”.

   

5. Suojaa ehdottomasti lomakkeesi. Tästä enemmän alla.

Voit katsoa lisää esimerkkejä lomakkeen muokkaamisesta videolta: How to Use Elementor’s Form Builder.

Elementor-lomakkeen vakiona löytyvät suojauskeinot

Voit suojata Elementor Pro:n lomakkeen Pro:sta löytyvillä standardisuojauskeinoilla.

1. 1. Klikkaa “Form Fields”-osiosta “+ Lisää kohde”. Tämän jälkeen valitse alasvetovalikon pohjalta “Honeypot”.

      

   2. Itse lomakkeella kenttä muuttuu näkymättömäksi. Muista tallentaa sivu painamalla sivun alareunasta “Päivitä”. Muuta ei tarvita.

Honeypot on yleensä kohtalaisen hyvä suojauskeino. Tämän sivuston lomakkeen testaamiseen kehitetty botti lähetti kuitenkin postia helposti honeypot-toiminnalla suojatun Elementor Pro -lomakkeen kautta. Elementor Pro -lomakkeen standardisuojauskeinoista löytyy lisäksi Googlen Captcha. Sen asentamista ei käsitellä tässä artikkelissa, koska se vaatii rekisteröitymisen Googlen palveluun. Googlella on myös omat vaatimuksensa Captchan käytöstä sekä joissain tapauksissa erillisiä herkkyysasetuksia.

Elementor-lomakkeen suojaaminen tehokkaammin lisäosalla

Helpoin ja tehokkain tapa suojata Elementor Pro:n lomake on käyttää Bot Spam Block -lisäosaa. Lisäosa on kehitetty erityisesti estämään bottien lähettämä roskaposti. Ainoa asetus lisäosalle on lisenssiavain. Muutoin lisäosa toimii kevyesti, tehokkaasti ja automaattisesti ilman turhia asetuksia. Se ei myöskään haittaa lomakkeen varsinaista käyttäjää, koska käyttäjän ei tarvitse ratkoa ylimääräisiä tehtäviä tai arvoituksia.

Elementor ja dxw3 tarjoavat nyt paketin, missä Elementor Pro:n ostaja saa dxw3 Bot Spam Block -lisäosan kaupanpäälle.

Tämä edellyttää, että 1) tilaat Elementor Pro -lisäosan klikkaamalla alla olevaa kuvaa.

2) Pyydä tämän jälkeen 100% kuponkikoodi joko sähköpostitse info@dx-w3.com tai yhteydenottolomakkeella.

Ja 3) palaa tänne kauppaan lunastamaan lisäosa kuponkikoodilla.

Näin asennat Contact Form 7 -yhteydenottolomakkeen sivustosi esimerkkisivulle

1. Avaa WordPress admin-näkymä kohdasta Lisäosat – Asennetut lisäosat. Klikkaa “Lisää uusi”.
2. Kirjoita oikean ylänurkan hakulaatikkoon “Contact Form 7” ja klikkaa Contact Form 7 – “Asenna nyt”. Sen jälkeen klikkaa samasta napista “Ota käyttöön”.
   
3. Tämän jälkeen klikkaa admin-valikon “Yhteydenotto”. Näet vain yhden lomakkeen tällä hetkellä. Lomake toimii yleensä oletusasetuksillaan, mutta voit muokata asetuksia klikkaamalla yhteydenottolomakkeen nimeä. Oletuksena lomakelähetykset saapuvat sivuston ylläpitäjän sähköpostilaatikkoon. Näet myös lomakkeen oletuskentät klikkaamalla lomakkeen nimeä “Yhteydenottolomake 1”.
4. Klikkaa hakasulkeissa olevaa koodia “Lyhytkoodi”. Kopioi koodi hakasulkeineen päivineen leikepöydälle esim. Ctrl+C/Command-C.
5. Tämän jälkeen lyhytkoodi pitää asettaa haluamaasi paikkaan, mihin lomake on tarkoitus asettaa. Jos haluat asettaa lomakkeen tietylle sivulle, klikkaa admin-valikosta “Sivut”.
6. Seuraavaksi joko lisää uusi sivu tai klikkaa valmiin sivun otsikkoa. Sivun muokkaustilassa klikkaa vasemman yläkulman plus-merkkiä lohkon lisäämiseksi. Kirjoita hakuruutuun “lyhyt”.
7. Vedä lohko haluamaasi paikkaan sivulla. Aseta leikepöydällesi kopioitu koodi lohkon arvoksi. Sen jälkeen tallenna sivu oikeasta yläkulmasta “Päivitä”.

Kaikki on valmista. Yhteydenottolomakkeesi lähettää nyt sinulle sivustosi kautta syötetyt yhteydenotot. Sivustosi sähköpostituksen tulee tietenkin olla asetettu oikein. Kokeile lomakettasi ja mikäli et saa ylläpidon sähköpostiisi lomakkeen kautta syötettyä viestiä, sähköpostiasetuksissa saattaa olla ongelma. Tällöin kannattaa kokeilla sivustosi salasanan palautusta. Mikäli et saa viestiä pyytämästäsi salasanan palautuksestakaan, sähköpostiasetuksesi kaipaavat korjausta. Mikäli saat kuitenkin salasanan palautusviestin, lomakkeellasi on jokin ongelma.

Lisäasetukset roskapostille

Kun lomakkeesi on asetettu oikein, saat kokeilemasi viestit sähköpostiisi. Tämän jälkeen ei kuitenkaan kulu kauaa, kun roskapostia lähettävät botit löytävät lomakkeesi. Kannattaa heti estää spämmipostin vastaanotto lisäasetuksin. Contact Form 7:n on mahdollista liittää Googlen CAPTCHA/reCAPTCHA, minkä tarkoitus on estää roskaposti. CAPTCHA voi olla kuitenkin hankala asettaa. Se saattaa lisätä ylimääräisiä tehtäviä kävijöillesi, ennen kuin he voivat lähettää viestinsä. Lisäksi uusi CAPTCHA vaatii jonkin verran asetuksia, ja on mahdollista, että estät osan lähetyksistä turhaan tai päästät botteja läpi.

Pääset helpoimmalla asettamalla sivustollesi Bot Spam Block -lisäosan. Lisäosa toimii aktivoinnin jälkeen automaattisesti. Joudut ainoastaan asettamaan lisenssikoodin lisäosalle. Kävijäsi eivät huomaa lisäosan toimintaa, eikä heidän tarvitse suorittaa ylimääräisiä kuvatehtäviä tai ratkaista yhtälöitä. Lisäosa estää silti bottispämmin lähettämisen.