We will be adding Google reCAPTCHA to all subscription forms in LianaMailer to prevent unsolicited robot-generated newsletter subscriptions. ReCAPTCHA enables telling apart a robot and a real user without the need to ask the subscriber checkup questions that are often found irritating.
For adding ReCAPTCHA, we need the keys from our LianaMailer customers. The keys can be retrieved by creating a reCAPTCHA profile on a specific Google site. Read the instructions on how to create a reCAPTCHA profile and retrieving the keys here.
Adding reCAPTCHA keys to embedded subscription forms
If a newsletter subscription form has been embedded on your site, follow these instructions to add the keys to the site's settings:
- Add scripts in the <head> section of the subscription page. This will include necessary scripts to run reCAPTCHA on your site:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
- Add this script in the <head> section of the page. This script will confirm and match the given keys:
<script> function onSubmit(token) { document.getElementById("lianamailer").submit(); } </script> - Edit the Submit button to have the necessary classes to call reCAPTCHA. Edit data-sitekey to contain your public site key:
<input value="Tilaa" type="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>
- Send the reCAPTCHA keys to our support for installation.
Adding reCAPTCHA keys to AJAX forms
If you are using the embed code on the Embedded forms tab found in the settings, the form will be done as an Ajax form. In this case, the script required for the reCAPTCHA check on your website differs in the required script library as well as in the check itself. However, the invitation required for the Submit button is no different.
- Modify the embed code you get from LianaMailer by adding id="lianamailer" on the first row.
<form class="lianamailer" id="lianamailer" data-lianamailer="form" method="post" action="">
- Add the needed library to the head section of the site.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
- If you want to support the use of your site with the outdated Internet Explorer 11 browser, also add polyfill library to the head section of your site. This library adds support for the code syntax that is not supported by this browser version.
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
- Add the check code to the head section of the site. This checks the keys when sending the form and transmits the data to the ajax delivery.
<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("formfield").dispatchEvent(submit_event);
}
</script>
- Add the needed scripts to the form's Submit button for the invitation of the check. Remember to enter your reCAPTCHA profile's site key to data-sitekey script:
<input value="Tilaa" type="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit' data-lianamailer="submit">
Comments
0 comments
Article is closed for comments.