Velo Tutorial: Using reCAPTCHA to Protect Data Submission

The reCAPTCHA element helps verify that site visitors are human before allowing actions like submitting data, logging in, or accessing private content. By adding it to your site, you can protect it from spam and automated abuse.

This tutorial demonstrates how to add CAPTCHA to secure custom form submissions and database entries by performing the following steps:

  1. Create a custom mailing list form where visitors provide their name and email.
  2. Use the reCAPTCHA element to require visitors to complete a CAPTCHA challenge before submitting their information.
  3. When the challenge is successfully completed and the CAPTCHA is first verified on the frontend, authorize the CAPTCHA token in the backend to ensure the form was completed by a human.
  4. Insert the validated data into a database collection if the token is valid. If the token fails validation or expires, reset the CAPTCHA and display an error message.

Notes:

  • You can add CAPTCHA to Wix Forms and Wix Signup & Login forms without code.
  • To use CAPTCHA for data submission via a dataset, you must implement the submission using code. For example, use Wix Data APIs like insert() or save() to handle the data operation and integrate CAPTCHA for protection.
  • In addition to adding CAPTCHA for security purposes, you may want to validate visitor inputs to make sure the data is in the correct format.

Step 1 | Add elements to the page

Add the following elements to the Home page:

  • Input elements for visitors to provide their name and email.
  • reCAPTCHA element to protect the data submission.
  • A button to submit the data upon successful CAPTCHA verification.
  • Text for displaying success and error messages.

Step 2 | Create a database collection

Create a database collection called MailingList to store the visitor's name and email after the CAPTCHA verification is successful. Add 2 text fields, name and email.

Step 3 | Write the backend code

While frontend CAPTCHA verification ensures the site visitor successfully completes the challenge, backend validation prevents site visitors from spoofing or bypassing CAPTCHA. To ensure complete protection, you must implement backend authorization to validate the CAPTCHA token securely:

  1. Add a web module named submitHandler.web.js to your backend code.

  2. Use the following code to validate the CAPTCHA token and insert the data into the MailingList collection if the token is valid:

    Copy

    Lines 1-3: Import the Permissions enum and webMethod function from wix-web-module. Then import the modules you need to work with CAPTCHA in the backend and with data.
    Lines 5-6: Create a web method with permissions for anyone to call it from the frontend. Lines 7-8: Pass the web method a function that checks the token's authorization. Line 9: Insert the data into the MailingList collection if the token is authorized.

Step 4 | Write the page code

In your Home page, write the code for verifying the CAPTCHA in the frontend:

  1. Import the backend function from your web module:

    Copy

  2. Set initial element states:

    Copy

    Lines 1-4: To make sure site visitors complete a CAPTCHA challenge before being able to submit their entries, set the initial element states in the onReady function. Hide the text for displaying success and error messages upon submission, and disable the submit button.

  3. Add the following code to enable the submit button when CAPTCHA verification is successful:

    Copy

    Line 1: Add an onVerified event handler that runs when the CAPTCHA challenge is successfully completed and the CAPTCHA is verified.
    Line 2: Hide any previous success or error messages.
    Line 3: Enable the previously disabled submit button so the site visitor can complete the submission.

    Note When the CAPTCHA is verified, a CAPTCHA token is automatically generated. This token is used for authorization.

  4. Write code to handle data submission and reset the CAPTCHA element if the process fails:

    Copy

    Line 1: Add an event handler that runs when a site visitor clicks the submit button.
    Lines 2-7: Prepare the submit request data. The request data includes the CAPTCHA token generated when the captcha was verified, and the data entered in the input elements.
    Line 10: Call the processSubmission backend function with the prepared submit request data. The processSubmission function validates the token and inserts the data into the MailingList collection.
    Lines 12-24: If authorization and data insertion are successful, display a success message and restart the CAPTCHA lifecycle for future submissions by resetting the reCAPTCHA element and disabling the submit button. If authorization or data insertion fail in the backend, restart the CAPTCHA lifecycle by resetting the reCAPTCHA element, disable the submit button, and display an error message instructing the site visitor to try again.

  5. Show an error message if the CAPTCHA element loses connection with the provider:

    Copy

    Lines 2-3: If the reCAPTCHA element loses connection with the provider when the site visitor attempts to complete the CAPTCHA challenge, the reCAPTCHA element automatically resets. Set the message text to an error message asking the site visitor to try again later.
    Lines 4-5: Show the message.
    Lines 6-8: Hide the message after 10 seconds.

  6. Disable the submit button if the CAPTCHA token expires:

    Copy

    Lines 1-3: If the submit does not occur within 120 seconds of completing the CAPTCHA challenge, the generated token expires. When the token expires, the reCAPTCHA element automatically resets and displays a message asking the site visitor to redo the challenge. In this case, disable the submit button in the onTimeout event handler.

Example code

Here is the complete code for this example:

Page code

Copy

Backend code

Copy

See also

Did this help?