Adding Simple Math Captcha to WordPress Login

Sinan IslerJune 18, 20242 comments

this code adds a simple math captcha to wordpress login and you can make the math harder I set the rand numbers to between 1,6 but you can make 1,99 too 🙂

as always add this code to your functions.php or codesnippet plugin. 

// === Settings ===
const MATH_CAPTCHA_MIN = 2; // Minimum number for math captcha
const MATH_CAPTCHA_MAX = 9; // Maximum number for math captcha

// Function to generate random numbers and update captcha
function generateCaptcha(form) {
    const num1 = Math.floor(Math.random() * (MATH_CAPTCHA_MAX - MATH_CAPTCHA_MIN + 1)) + MATH_CAPTCHA_MIN;
    const num2 = Math.floor(Math.random() * (MATH_CAPTCHA_MAX - MATH_CAPTCHA_MIN + 1)) + MATH_CAPTCHA_MIN;
    const captchaSum = num1 + num2;

    form.querySelector('.math-captcha-sum').value = captchaSum;
    form.querySelector('.math-captcha-label').textContent = `${num1} + ${num2} = ?`;
}

// Function to inject captcha into form
function injectCaptcha(form) {
    if (form.querySelector('.math-captcha-wrap')) return;

    const wrap = document.createElement('p');
    wrap.className = 'math-captcha-wrap';

    const label = document.createElement('label');
    label.className = 'math-captcha-label';
    label.setAttribute('for', 'math_captcha');
    label.style.display = 'block';

    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'input math-captcha-input';
    input.name = 'math_captcha';
    input.id = 'math_captcha';
    input.size = 10;
    input.autocomplete = 'off';
    input.required = true;

    const hidden = document.createElement('input');
    hidden.type = 'hidden';
    hidden.className = 'math-captcha-sum';

    wrap.appendChild(label);
    wrap.appendChild(input);
    wrap.appendChild(hidden);

    const submitBtn = form.querySelector('input[type="submit"], button[type="submit"]');
    form.insertBefore(wrap, submitBtn);

    generateCaptcha(form);

    submitBtn.disabled = true;

    input.addEventListener('input', function () {
        const userValue = parseInt(input.value.trim());
        const correctValue = parseInt(hidden.value);
        if (!isNaN(userValue) && userValue === correctValue) {
            submitBtn.disabled = false;
        } else {
            submitBtn.disabled = true;
        }
    });

    form.addEventListener('submit', function (e) {
        const userValue = parseInt(input.value.trim());
        const correctValue = parseInt(hidden.value);
        if (isNaN(userValue) || userValue !== correctValue) {
            e.preventDefault();
            input.value = '';
            submitBtn.disabled = true;
            generateCaptcha(form);
            alert('Incorrect math captcha. Please try again.');
        }
    });
}

function setupMathCaptchaWP() {
    const loginForm = document.getElementById('loginform');
    if (loginForm) injectCaptcha(loginForm);

    const registerForm = document.getElementById('registerform');
    if (registerForm) injectCaptcha(registerForm);
}

document.addEventListener('DOMContentLoaded', setupMathCaptchaWP);