When operating a website, spam comments and malicious messages are always a headache, as they not only affect user experience but may also damage the professional image of the website. 幸运的是，the Anqi CMS provides a simple and effective way to solve this problem - that is, to add a captcha to the comment or message form. This can greatly enhance the security of the website, filtering out most automated spam information.

Below, let's take a detailed look at how to add a captcha to your comment and message form in Anqi CMS. This process can be divided into two steps, which are very intuitive and easy to operate.

Step 1: Enable captcha functionality in the background

Firstly, we need to inform the Anqi CMS system that we want to enable captcha on some forms.

  1. Enter the back-end management interface: Log in to your Anqi CMS backend.
  2. Navigate to the feature settings: Find and click the 'Function Management' module in the left navigation bar.
  3. Select form type: According to the form type you need to add captcha, click "Website Message Management" or "Content Comment Management" to enter the corresponding setting page.
  4. Enable captchaIn this settings page, you will see an option to enable captcha.Just check it and save, and you've completed the backend configuration. It's like turning on a switch in the background to tell the system: 'Alright, I need a captcha!'

After completing this step, the Anqi CMS backend service is ready to generate and verify the captcha.

Step 2: Integrate the captcha display into the template.

Although the captcha feature has already been enabled on the backend, in order for users to actually see and input the captcha on the frontend, we still need to make some minor adjustments to the website template files.

Our company's AnQi CMS uses Django template engine syntax, which makes modifying templates very flexible. Typically, the comment form may be locatedtemplate/你的模板目录名/comment/list.html, and the message form is located intemplate/你的模板目录名/guestbook/index.htmlYou need to edit the corresponding file.<form>Inside the tag.

Please fill in the comment or message form.<form>Within the tag, find the position where you want to display the captcha and insert the following code snippet:

Use native JavaScript (recommended)

<div style="display: flex; clear: both; align-items: center; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id" value="">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="你的表单样式类" style="flex: 1; height: 50px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px;">
  <img src="" id="get-captcha" style="width: 150px; height: 50px; cursor: pointer; margin-left: 10px; border: 1px solid #ccc; border-radius: 4px;" alt="验证码" title="点击刷新验证码"/>
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                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);
                }
              })
              .catch(err => {
                console.error('请求验证码出错:', err);
              });
    });
    // 页面加载时自动获取一次验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

If your website uses the jQuery library, you can also use the following simpler syntax:

<div style="display: flex; clear: both; align-items: center; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id" value="">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="你的表单样式类" style="flex: 1; height: 50px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px;">
  <img src="" id="get-captcha" style="width: 150px; height: 50px; cursor: pointer; margin-left: 10px; border: 1px solid #ccc; border-radius: 4px;" alt="验证码" title="点击刷新验证码"/>
  <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);
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
        console.error('请求验证码出错:', textStatus, errorThrown);
      });
    });
    // 页面加载时自动获取一次验证码
    $('#get-captcha').click();
  </script>
</div>

Code explanation:

  • Hide the input box (captcha_id): Used to store the unique ID generated for each captcha request, which will be submitted along with the form to the backend for verification.
  • Text input box (captcha): Enter the captcha characters displayed in the image.
  • Image label (<img>): Used to display the captcha image.
  • JavaScript code:
    • Byfetchor$.getTo/api/captchaInitiate a request to the interface to obtain a new verification code image URL and the correspondingcaptcha_id.
    • When the user clicks the captcha image, this JS code will be triggered to refresh the captcha.
    • document.getElementById('get-captcha').click();(or)$('#get-captcha').click();This line is very crucial, it ensures that the first captcha is fetched and displayed immediately after the page loads, so that the user does not have to click to see it.
    • The style part (style="..."To better integrate the captcha input box and image into your form, you can adjust these styles according to the actual situation of your website.
    • altandtitleThe addition of properties has improved user experience and accessibility.

Integration points:

  • Make sure this code is placed in your comment or message form.<form>Inside the tag.
  • class="你的表单样式类"This section, please replace it with the CSS class name of the actual form input box on your website to unify the style.
  • Must be retained.name="captcha_id"andname="captcha"These fields are the necessary parameters for the backend captcha function.

Save the modified template file and refresh the front-end page, you should now see a captcha image and the corresponding input box in the comment or message form.

By following these two simple steps, your secure CMS website can effectively resist most automated spam, providing users with a cleaner and safer communication environment.

Frequently Asked Questions (FAQ)

Q1: Why did the captcha image not display even though I followed the steps?

A1: There may be several reasons. First, please make sure that you have checked and saved the option to enable captcha in the "Function Management" section for "Website Message Management" or "Content Comment Management".Second, check the browser console (usually opened by pressing F12 key) for any JavaScript errors or failed network request prompts, which may indicate/api/captchaThe interface did not respond correctly, or there is a syntax error in your template code. Finally, confirm that the template file you have modified has been saved and uploaded to the server, and the cache has been updated.

Q2: Can I customize the captcha image style?

A2: Of course. Verification