How to Add a Math Challenge to Elementor Pro Forms

Spam form submissions are a common issue for website owners. While Google reCAPTCHA and honeypots help reduce spam, they can sometimes frustrate users or be ineffective against advanced bots. A great alternative is adding a simple math challenge to your Elementor Pro form. This method is easy to implement and ensures only real users can submit forms.

In this guide, I’ll show you how to add a math challenge to your Elementor Pro forms using JavaScript and PHP.

Step 1: Install the WPCode Plugin (Recommended)

To make adding custom PHP code easier, we will use the WPCode plugin. If you prefer, you can also edit your theme’s functions.php file.

1. Go to WordPress Dashboard > Plugins > Add New
2. Search for WPCode
3. Install and activate the plugin

Now, we’re ready to implement the math challenge.

Step 2: Add the Math Challenge Fields in Elementor Pro

1. Open Elementor and add a Form Widget to your page.
2. Add a Number Field:
   • Label: Solve this math question
   • Field ID: math_challenge
   • Set it as required.

3. Add a Hidden Field:
   • Field ID: math_challenge_answer
   • Leave the value empty (it will be filled dynamically).

This will store the math question and its correct answer for validation.

Step 3: Add JavaScript to Generate the Math Challenge

We need JavaScript to generate a random math question and populate the hidden field. To ensure the math challenge appears on all relevant forms across your website, we will add the JavaScript code to the footer.

Adding JavaScript to Footer Using WPCode

1. Go to WPCode > Footers
2. Paste the following JavaScript code:

<script> 
document.addEventListener("DOMContentLoaded", function () {
    let num1 = Math.floor(Math.random() * 10) + 1;
    let num2 = Math.floor(Math.random() * 10) + 1;
    let correctAnswer = num1 + num2;

    let mathField = document.querySelector('[name="form_fields[math_challenge]"]');
    let hiddenField = document.querySelector('[name="form_fields[math_challenge_answer]"]');

    if (mathField && hiddenField) {
        mathField.placeholder = `What is ${num1} + ${num2}?`;
        hiddenField.value = correctAnswer;
    }
 });
</script>

How This Works:

• Generates a random math question (e.g., What is 4 + 6?).
• Populates the question as a placeholder in the input field.
• Stores the correct answer in the hidden field for later validation.

Step 4: Add PHP Validation to Prevent Spam

Now, let’s ensure users enter the correct answer before submitting the form.

1. Go to Code Snippets > Add Snippet (or edit functions.php).
2. Name the snippet Elementor Math Challenge Validation.
3. Paste this PHP code:

add_filter('elementor_pro/forms/validation', function ($record, $ajax_handler) {
    $form_data = $record->get('fields');

    $user_answer = isset($form_data['math_challenge']['value']) ? intval($form_data['math_challenge']['value']) : 0;
    $correct_answer = isset($form_data['math_challenge_answer']['value']) ? intval($form_data['math_challenge_answer']['value']) : 1;

    if ($user_answer !== $correct_answer) {
        $ajax_handler->add_error('math_challenge', 'Incorrect answer. Please try again.');
    }
}, 10, 2);

4. Save and Activate the snippet.

How This Works:

• Retrieves the user’s answer and compares it with the hidden correct answer.
• If the answer is incorrect, it prevents form submission and displays an error.

Step 5: Test Your Form

1. Open your Elementor page with the form.
2. Ensure the math challenge appears correctly.
3. Enter incorrect answers and verify the validation message appears.
4. Submit the form with the correct answer to confirm it works.

This math challenge effectively blocks spam while keeping the user experience smooth. Unlike reCAPTCHA, this method doesn’t require extra API calls, making it lightweight and fast.

If you found this guide helpful, share your thoughts in the comments or let me know if you need further customizations! 🚀