top of page


Protect your form with reCAPTCHA





January 1, 2020

Girl Enjoying her Drink


Anchor 1
Hire a Developer

Example Description

In this example, we protect a beta app signup form from spammers and hackers with Google reCAPTCHA.

Example Code

Tab 1


Tab 2


Tab 3


This code solution can be complicated.

How We Built It

We created a simple signup form with input elements, a reCAPTCHA element, and a signup button. 


The signup button is disabled until the site visitor completes the CAPTCHA challenge and the reCAPTCHA is verified. Clicking the signup button triggers backend authorization. If authorization is successful, the input data is inserted into the collection. A text element displays the current number of applicants.

Database Collection

We added the following collection to our site:

  • BetaApplications: Stores the details of site visitors who sign up for the app.


Page Elements

Then we added the following page elements:

  • numberOfUsers text: Displays the number of people who signed up.

  • Input elements: Form elements for site visitors to enter their details. 

  • reCAPTCHA element: Site visitors must complete the CAPTCHA challenge before submitting the form.

  • Signup button: Visitors click to submit the form.

  • Submission status text: Displays success and error messages. 

  • BetaApplication dataset: Connects the number of applicants in the BetaApplications collection with the numberOfUsers text.



Then we added code to the Home page:

  1. Import: We imported the processSubmissionRequest function from the backend for authorizing the CAPTCHA token and performing the data insertion.

  2. onReady event handlers: We added code to handle 3 potential CAPTCHA events:

  • onTimeout: If backend authorization does not occur within 120 seconds of token generation, the token expires. The reCAPTCHA automatically resets and displays a message asking the site visitor to redo the challenge. If the token times out, we disable the signup button.

  • onError: If an error occurs while the site visitor completes the CAPTCHA challenge, the reCAPTCHA automatically resets, and we display an error message and disable the signup button.

  • onVerified: Following successful completion of the CAPTCHA challenge, we enable the signup button. Note that when the reCAPTCHA is verified, a CAPTCHA token used later for authorization is automatically generated.

  1. Signup button event handler: We connected an onClick event handler via the Properties panel to the signup button. When a site visitor clicks the button the following happens:

  2. Hide previous text message.

  3. Prepare the submission request from the generated CAPTCHA token and the input data.

  4. Call the backend authorization function with the submission request. 

  5. If authorization succeeds and the data is inserted into the collection, disable the signup button and reset the reCAPTCHA for the next submit, display a success message, refresh the BetaApplication counter dataset, and display the new number of applicants.

  6. If authorization fails, reset the reCAPTCHA and display an error message requesting that the site visitor redo the challenge.

  7. Dataset onReady event handler: When the dataset has loaded (when the page loads or after a refresh), get the total number of applicants from the BetaApplications collection and display it in the numberOfUsers text.

Note: We used temperate literals to display dynamic content in our text messages.


We also added code to our captchaModule backend web module:

  1. Import: Import the modules needed to work with the Wix Data and Wix Captcha Backend libraries. 

  2. processSubmissionRequest() function: This function is called when a site visitor clicks the signup button. Authorize the generated CAPTCHA token, and if authorization is successful, insert the data from the submission request into the BetaApplications collection.
    For error handling, add different error messages for each catch() to indicate whether authorization or the data insert failed.

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?




Thanks for your feedback!

Customized Form

Customized Form

Customize a form with conditional logic



Signature Input

Signature Input

Create a custom form that includes a Signature Input element



Custom Validations

Custom Validations

Validate a form using regular expressions and code validations.



Anchor 2
bottom of page