Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

What Was Covered (Link provided if you want to skip to that part): - Quick Set-Up of Website - Set-Up Form - Create a Back-end Module - http://bit.ly/2Rw0wqn - reCAPTCHA can be found in the User Input Section of Add Elements - http://bit.ly/2G1SIHq - Import the processSubmission Function from Backend to Frontend code - http://bit.ly/2sBIVoz - Create a Verified Event Handler - http://bit.ly/2RqXmUF - Create submission function when the submit button is clicked - http://bit.ly/2R5eSiz - Create the CAPTCHA Error Event Handler - http://bit.ly/38hEI8v - Create the CAPTCHA Timeout Event Handler - http://bit.ly/2u6LoI3 - Create the Submission Function in the Backend - http://bit.ly/2twNcd8

---

Code Snippet to follow along with the video:

Client-Side Code

import {processSubmissionRequest} from 'backend/captchaModule'; 

$w.onReady(function () {
	//TODO: write your page related code here...

	$w("#captcha").onTimeout(() => {
		$w("#submit").disable();
	})

	$w("#captcha").onError((error) => {
		showError(error);
		$w("#captcha").reset();
		$w("#submit").disable();
	})

	$w("#captcha").onVerified(() => {
		$w("#submit").enable();
	})

});

export function submit_click(event) {
	//Add your code for this event here: 
	$w("#status").hide()
	let submissionRequest = {
		token: $w("#captcha").token,
		form: {
			name: $w("#name").value,
			title: $w("#email").value,
			businessType: $w("#businessType").value
		}
	}
	processSubmissionRequest(submissionRequest).then((item) => {

		$w("#submit").disable()
		$w("#status").html = `<span-style='color: green; font-size: 1.5em; text-align:'center''> Event Application submitted successfully!</span>`;
		$w("#status").show();
		$w("#dataset1").refresh().then(countAndDisplayNum);
		$w("#captcha").reset();
	}).catch((error) => {
		$w("#captcha").reset();
		showError(error);
	})
	
}

export function dataset1_ready() {
	//Add your code for this event here: 
	countAndDisplayNum()
}

function countAndDisplayNum () {
	let num = $w("#dataset1").getTotalCount();
	if (num < 0) {
		$w("#peopleSignUp").text = `You are the first person to sign up for our event!`;
	} else {
		$w("#peopleSignUp").text = `${num} people have already signed up for our event!`;
	}
	
}

function showError (error) {
	let errorMessage = "";
	if (error.type === 'authorization error') {
		errorMessage = 'Something went wrong with the CAPTCHA Authorization process, please try again.';
	}
	if (error.type === 'insert error') {
		errorMessage = 'Something went wrong with the submission process, please try again.';
	}
	$w("#status").html = `<span style='color: red; font-size: 1.5em; text-align: center'${errorMessage}</span>`;
	$w("#status").show();
}

Backend Code

// Filename: backend/captchaModule.jsw (web modules need to have a .jsw extension)

import wixData from 'wix-data';
import wixCaptchaBackend from 'wix-captcha-backend';

export function processSubmissionRequest(request) {
	let errorResponse = {};
	return wixCaptchaBackend.authorize(request.token).then(() => {
		return wixData.insert('eventSubmissions', request.form).catch(error => {
			errorResponse.status = 'error';
			errorResponse.type = 'insert error';
			errorResponse.message = `Error: database collection that failed: ${error}`;
			throw errorResponse
		})
	}).catch(error => {
		if (error.type === 'insert error') {
			throw error
		}
		errorResponse.status = 'error';
		errorResponse.type = 'authorization error';
		errorResponse.message = `Error: reCAPTCHA authorization failed: ${error}`;
		throw errorResponse
	})
}