Form spam can be a real headache. It has been reported that slightly more than half of all Internet traffic originated with automated programs, or bots. Many masquerade as people in order to post spam comments on blogs, harvest email addresses for spammers, rig online polls, and all sorts of annoying stuff. To mitigate this problem and give websites hosting forms a way to distinguish between real people and bots, CAPTCHA was created at Carnegie Mellon University back in 2000. CAPTCHA stands for “ ompletely utomated ublic est to tell omputers and umans part”. The most well known and widely used CAPTCHA services today are called reCAPTCHA and hCAPTCHA. C A P T C H A Both of these have a client-side and a server-side component. A bunch of tutorials exist to help developers to implement these services in a variety of languages and with a number of frameworks. Adding the client-side bits for both services is reasonably straightforward, but the server side of reCAPTCHA or hCAPTCHA is not always that simple. This is why I created a free service called . reCAPTCHAme works with both reCAPTCHA as well as hCAPTCHA. Either of these can be implemented on any website or webapp regardless of programming language, framework or development environment and without writing a single line of server-side code. reCAPTCHAme All that is needed to secure a form is to add the client-side code below, point the form at the reCAPTCHAme service and include the final form processing page in a hidden tag. reCAPTCHAme will verify the token and pass the form on to the processing page in the hidden tag if it passes the test. Failed form submissions are stored in the reCAPTCHAme app and can be downloaded there. Here are the steps to follow to implement reCAPTCHAme with reCAPTCHA and with hCAPTCHA reCAPTCHA Signup to reCAPTCHA and get a key for your site Include the reCAPTCHA js file on the form page <script src=" "></script> https://www.google.com/recaptcha/api.js Add a callback function for submitting the form like so function onSubmit(token) { document.getElementById("demo-form").submit(); } Add this submit button html and make sure you add your site key to the data-sitekey attribute <button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button> https://developers.google.com/recaptcha/docs/v3 hCAPTCHA Signup with hCAPTCHA and get a key for your site Include the hCAPTCHA js file on the form page <script src=" " async defer></script> https://js.hcaptcha.com/1/api.js Include this html tag (add your key into the data-sitekey attribute) <div class="h-captcha" data-sitekey="your_site_key"></div> https://docs.hcaptcha.com/ reCAPTCHAme Then head over to reCAPTCHAme and follow these three steps: Signup and get a reCAPTCHAme API key for your form Point your form at the reCAPTCHAme verification service <form action=" [YOUR reCaptchaMe API KEY]" method="POST"> https://reCAPTCHAme.com/?apikey= Include a hidden tag with the final form destination page <input type="hidden" name="recaptchame-destination" value="[YOUR FULL FORM PROCESSING URL]"/> https://recaptchame.com/docs.html Check out the reCAPTCHAme contact page to see an example of how to implement the hCAPTCHA service. For an example of the reCAPTCHA service, head over to our partner site . Form2Channel.com When you are done, test your form submissions. If you are human - and I am guessing you are - they should arrive on your form processing page and in your system. You can also find them in your account in the reCAPTCHAme app.

BUNCH

Google

How to Add a Porn Filter to Your Home Network

First-Hand Experience of Applying Nielsen's Usability Heuritics in Design

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Psychology

Too Long; Didn't Read

How to add reCAPTCHA or hCAPTCHA to any web application

How to add reCAPTCHA or hCAPTCHA to any web application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

8 Things Developers Don't Like About Low-Code and No-Code

Adding the Google reCAPTCHA v3 to an Angular application

Create Slider Or Puzzle Captcha Service with Node.js

Google is Using You

How to Make a Captcha in Python

How to Set up ReCAPTCHA in Your React Application

8 Things Developers Don't Like About Low-Code and No-Code

Adding the Google reCAPTCHA v3 to an Angular application

Create Slider Or Puzzle Captcha Service with Node.js

Google is Using You

How to Make a Captcha in Python

How to Set up ReCAPTCHA in Your React Application

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps