How to add captcha functionality to a message or comment form?

During the operation of the website, the message and comment functions are important channels for enhancing user interaction and collecting feedback.However, the spam comments and malicious submissions that follow often trouble website administrators.To effectively prevent these unwelcome guests, it is particularly important to add a captcha function to the comment or message form.AnQi CMS as a comprehensive content management system provides a convenient way to integrate this security mechanism, helping you maintain a clean and efficient interactive platform.

Preparation

Before you start adding a captcha to your comment or message form, make sure you are familiar with the admin 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 on a separate message page template (such asguestbook/index.htmlOr in flat modeguestbook.html).

The first step: enable background functions

Firstly, we need to enable the captcha function in the Anqi CMS backend. Log in to your Anqi CMS backend, navigate toGlobal settings -> Content settingsHere, you will find an option named "Comment captcha". Please set it toOnStatus, and save your changes. This step is to ensure that the system backend can generate and verify the captcha.

Step two: Modify the template file

Next, we need to add the display and input area for the captcha in the front-end template file. Depending on your specific needs, this may be in the message form template (such asguestbook/index.htmlorguestbook.htmlIn it, or in the comment form of the document details page. Find the captcha you need to add<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 to pass the unique identifier of the captcha), a