Google reCAPTCHAn lisääminen tilauslomakkeelle

  • Päivitetty

Lisäämme kaikkiin LianaMailerin (ent. Postiviidakko) tilauslomakkeisiin Googlen reCAPTCHAn käyttöön estääksemme robottien tekemät ei-toivotut uutiskirjetilaukset. reCAPTCHA mahdollistaa robotin ja oikean käyttäjän erottamisen toisistaan ilman tarvetta kysyä uutiskirjeen tilauslomakkeen täyttäjältä usein ärsyttäviksikin koettuja tarkistuskysymyksiä.

ReCAPTCHAn lisäämistä varten tarvitsemme LianaMailer-asiakkailtamme avainkoodit, jotka voit noutaa luomalla reCAPTCHA-profiilin Googlen sivustolla. Lue ohjeet reCAPTCHA-profiilin luomiseen ja avainkoodien hakemiseen täältä.

reCAPTCHA-avainkoodien lisääminen ulkoiselle tilauslomakkeelle

Mikäli uutiskirjeiden tilauslomake on upotettu verkkosivuillenne, toimi seuraavalla tavalla lisätäksesi avainkoodit sivuston asetuksiin:

  • Lisää tarvittava koodikirjasto reCAPTCHAn käytön mahdollistamiseksi sivun head-osioon:
     
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  • Lisää seuraava scripti sivun head-osioon. Scripti tarkastaa avainkoodit keskenään lomaketta lähettäessä:
     
    <script> function onSubmit(token) { document.getElementById("lianamailer").submit(); } </script>
    
  • Lisää lomakkeen Lähetä-nappiin tarvittavat tietueet tarkistuksen kutsua varten. Muista syöttää data-sitekey-tietueeseen oman reCAPTCHA-profiilisi site key:
<input value="Tilaa" type="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>

reCAPTCHA-avainkoodien lisääminen AJAX-lomakkeelle

Mikäli käytät asetuksista löytyvää Upotetut lomakkeet-välilehden upotuskoodia lomake toteutetaan ns. Ajax-lomakkeena. Tällöin verkkosivullenne tuleva reCAPTCHA-tarkistukseen vaadittu scripti poikkeaa tarvittavan scriptikirjaston sekä itse tarkistuksen osalta. Lähetä-nappiin tarvittava kutsu ei kuitenkaan poikkea.

  • Muokkaa LianaMailer-palvelusta saatavaa upotuskoodia lisäämällä id="lianamailer" ensimmäiselle riville.
<form class="lianamailer" id="lianamailer" data-lianamailer="form" method="post" action="">
  • Lisää tarvittava kirjasto sivuston head-osioon.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
  • Mikäli haluatte tukea sivustonne käyttöä myös vanhentuneella Internet Explorer 11-internetselaimella, lisätkää myös polyfill-kirjasto sivustonne head-osioon. Tämä kirjasto lisää tuen koodisyntakseille jota tämä selainversio ei tue.
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
  • Lisää tarkistuskoodi sivuston head-osioon. Tämä tarkastaa avaimet lomaketta lähettäessä ja välittää tiedot ajax-lähetykseen.
<script>
function onSubmit(token) {
var submit_event = null;

try {
submit_event = new Event("submit", {"bubbles": false, "cancelable":
true});
}

catch (error) {
submit_event = document.createEvent("Event");

var bubbles = false;
var cancelable = true;

toggle_event.initEvent("submit", bubbles, cancelable);
}

document.getElementById("lianamailer").dispatchEvent(submit_event);
}
</script>
  • Lisää lomakkeen Lähetä-nappiin tarvittavat tietueet tarkistuksen kutsua varten. Muista syöttää data-sitekey-tietueeseen oman reCAPTCHA-profiilisi site key:
<input value="Tilaa" type="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit' data-lianamailer="submit">

Oliko tämä artikkeli hyödyllinen?

0/0 koki tästä olevan apua

Kommentit

0 kommenttia

Kommentointi on poistettu käytöstä.