表单提交成功后重置ReCaptcha2或保留成功提示的实现方案

我来帮你搞定这个表单提交后的ReCaptcha状态问题，下面是两个方案的具体实现步骤，你可以根据需求选择：

方案1：提交成功后自动重置ReCaptcha勾选框 #

这个方案会在表单提交成功后，不仅清空输入字段，还重置ReCaptcha的勾选状态，让用户可以再次提交表单（如果需要的话）。

1. 后端PHP代码完善 #

首先，确保你的PHP处理脚本最后正确返回JSON格式的状态和消息（你的代码片段没写完这部分）：

// 接你现有代码的末尾
$status_array = array(
    'message' => $message,
    'status' => $status
);
echo json_encode($status_array);
exit;

同时，你可以更新Captcha错误提示，去掉刷新页面的建议（因为现在能自动重置了）：

$message = '<p align="justify"><strong>Captcha Error!</strong> You did not check the box, a bot was detected or you have already sent this form. Please check the box and try again.</p>';

2. 前端JavaScript修改 #

假设你是用AJAX提交表单（因为字段能清空说明是无刷新提交），在成功回调里添加ReCaptcha重置方法：

// 替换你现有的AJAX成功回调逻辑
$.ajax({
    url: '你的表单处理PHP文件路径',
    type: 'POST',
    data: $('#contact-form').serialize(),
    dataType: 'json',
    success: function(response) {
        if (response.status === 'true') {
            // 清空表单输入字段
            $('#form_name').val('');
            $('#form_email').val('');
            $('#form_message').val('');
            // 重置ReCaptcha（关键代码）
            grecaptcha.reset();
            // 显示成功消息（可以保留现有淡入效果，若要几秒后消失就加delay().fadeOut()）
            $('.form-message-container').html(response.message).fadeIn();
        } else {
            // 错误消息保持原有的淡入淡出效果
            $('.form-message-container').html(response.message).fadeIn().delay(5000).fadeOut();
        }
    }
});

方案2：提交成功后隐藏表单，永久显示成功消息 #

这个方案会在提交成功后直接隐藏整个表单，只显示成功消息，消息会一直保留到用户刷新页面。

1. 后端PHP代码完善 #

和方案1一样，确保返回正确的JSON格式（代码同方案1的后端部分），也可以更新Captcha错误提示去掉刷新建议。

2. 前端JavaScript修改 #

修改AJAX成功回调，隐藏表单并显示永久成功消息：

$.ajax({
    url: '你的表单处理PHP文件路径',
    type: 'POST',
    data: $('#contact-form').serialize(),
    dataType: 'json',
    success: function(response) {
        if (response.status === 'true') {
            // 隐藏整个表单容器
            $('#contact-form').hide();
            // 显示成功消息，不设置自动淡出（永久保留）
            $('.form-message-container').html(response.message).fadeIn();
        } else {
            // 错误消息保持原有的淡入淡出效果
            $('.form-message-container').html(response.message).fadeIn().delay(5000).fadeOut();
        }
    }
});

额外提示 #

• 确保你的页面已经正确加载了ReCaptcha的API脚本，否则grecaptcha.reset()会报错：

  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  

• 替换代码中的选择器（比如#contact-form、.form-message-container）为你页面实际的元素ID或类名。

内容的提问来源于stack exchange，提问作者user2764806