Build contact us page using serverless function (reCaptcha) — Part3

2 min readJul 17, 2020

Learn how to host your own website using OpenFaaS serverless function. Also learn how to use serverless function to receive user/customer feedback from contact us page.

In previous articles we learned how to deploy a serverless function on OpenFaaS host our contact us page and receive user/customer feedback via email . In this article we learn how avoid spam on contact us page. There is nothing worse than to find that your contact us form(or any form for that matter) received a lot of those spam submissions.

By verifying that a human is submitting a form, all automated spam attempts are blocked. The added security can also make users feel that the form is secure.

Ingredients🍲🍜

You read and implemented the first and the second parts!
reCaptcha site key and secret key (Follow link below to get required keys).

Qolzam/telar-cli

Google reCAPTCHA prompts visitors to check a box to prove that they're not a robot before they submit their…

github.com

Get Started🏃🏻

To apply on reCaptcha on email serverless function…

Install node-fetch package.

$ cd $HOME/openfaas-contactus/email-fn
$ npm install --save node-fetch

2. Edit handler.js file as below.

3. Add reCaptcha in index.html file. Edit ui/index.html file as below. Replace {recaptcha_site_key} with your reCaptcha site key.

<html>...<head>...<!-- Add script below --><script src="https://www.google.com/recaptcha/api.js" async defer></script>...</head>
<body>...<form><!-- Add bellow recaptcha div in form tag -->             
<div class="g-recaptcha" data-sitekey="{recaptcha_site_key}"></div>                    
              
<button type="submit" name="action">Submit </button>
           
 </form>...</body>...</html>

3. Create reCaptcha secrets in your K8S cluster. Replace variable {your_recaptcha_secret_key} with your reCaptcha secret key and add the secret name in stack.yml file.

$ $ faas-cli secret create secret-key --from-literal "{your_recaptcha_secret_key}"

Push functions to OpenFaaS

To deploy email function, run command below.

$ git add .
$ git commit -sm 'Add reCaptcha.'$ faas up --tag=sha

After less than one minute your OpenFaaS API should be ready.

Let’s try with contact us page

From your browser, navigate to http://127.0.0.1:31112/function/contactus-fn. Try to post a message. Now you should receive that message in your email inbox.