How to add captcha function to留言or comment form?

During the operation of the website, the message and comment features are important channels for enhancing user interaction and collecting feedback.However, the junk comments and malicious submissions that follow often disturb website administrators.In order to effectively prevent these unexpected guests, it is particularly important to add a captcha function to the message or comment form.The AutoCMS is a comprehensive content management system that provides a convenient way to integrate this security mechanism, helping you maintain a clean and efficient interactive platform.

Preparation Work

Before adding a captcha to your comment or message form, make sure you are familiar with the backend operations of Anqi CMS and know how to edit the website template files. Typically, the comment form is located in the template of the document detail page, while the message form may be located in a separate message page template (such asguestbook/index.html或扁平化模式下的Englishguestbook.html）in it.

第一步：后台功能开启

首先，我们需要在English CMS的后台启用验证码功能。登录您的English CMS后台，导航到Global Settings -> Content SettingsHere, you will find an option named "留言评论验证码 verification code". Please set it toenableStatus, and save your changes. This step is to ensure that the system backend can generate and verify the captcha.

Step 2: Modify the template file

The next step is to add the captcha display and input area in the frontend template file. Depending on your specific needs, this may be in the comment form template (such asguestbook/index.htmlorguestbook.html）in the middle, or in the comment form on the document detail page. Find the location where you need to add the captcha and add it.<form>within the tag, usually before the submit button, paste the following code snippet:

<div style="display: flex; clear: both; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; height: 56px; border-right: none; border-radius: 4px 0 0 4px;">
  <img src="" id="get-captcha" alt="验证码" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #ced4da; border-left: none; border-radius: 0 4px 4px 0;" />
  <script>
    // 使用原生JavaScript获取验证码
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                if (!response.ok) {
                  throw new Error('网络请求失败');
                }
                return response.json();
              })
              .then(res => {
                if (res.code === 0 && res.data) {
                  document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                  document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                } else {
                  console.error('获取验证码失败:', res.msg);
                  alert('获取验证码失败，请重试！');
                }
              }).catch(err => {
                console.error('请求验证码时发生错误:', err);
                alert('请求验证码时发生错误，请检查网络！');
              });
    });
    // 页面加载时自动获取并显示验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

If your website template has already included the jQuery library, you can choose to use jQuery syntax to simplify the JavaScript part:

<div style="display: flex; clear: both; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; height: 56px; border-right: none; border-radius: 4px 0 0 4px;">
  <img src="" id="get-captcha" alt="验证码" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #ced4da; border-left: none; border-radius: 0 4px 4px 0;" />
  <script>
    // 使用jQuery获取验证码
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        if (res.code === 0 && res.data) {
          $('#captcha_id').attr("value", res.data.captcha_id);
          $('#get-captcha').attr("src", res.data.captcha);
        } else {
          console.error('获取验证码失败:', res.msg);
          alert('获取验证码失败，请重试！');
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
          console.error('请求验证码时发生错误:', textStatus, errorThrown);
          alert('请求验证码时发生错误，请检查网络！');
      });
    });
    // 页面加载时自动获取并显示验证码
    $('#get-captcha').click();
  </script>
</div>

This code contains a hiddencaptcha_idfield (used for passing the unique identifier of the captcha), a