Google reCAPTCHAn lisääminen tilauslomakkeelle

Lisäämme kaikkiin LianaMailerin 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'>

• Lähetä tukeemme reCAPTCHA-avainkoodit asennusta varten.

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">

• google-recaptcha_1.9.2020_fi.pdf300 kt
• google_recaptcha_september_2_2020_en-.pdf300 kt
• reCAPTCHA-profiilin luominen.pdf100 kt
• Creating a Google reCAPTCHA profile.pdf100 kt