In today's content operation world, the website comment section is not only an important place for user interaction, but also often becomes a hotbed of spam and malicious attacks.These annoying comment spam not only affect user experience and reduce the quality of website content, but may also have a negative impact on search engine optimization (SEO).As an experienced website operations expert, I am well aware of the importance of defending against these automated scripts and malicious behaviors.幸运的是，AnQiCMS（安企CMS）为我们提供了一套简洁高效的解决方案——通过集成验证码（CAPTCHA）功能，我们可以有效地为评论提交表单筑起一道坚实的防线。

AnQiCMS as an enterprise-level content management system developed based on the Go language, has always regarded efficiency and security as one of its core advantages since its inception.It not only supports multi-site management, flexible content models, and powerful SEO tools, but also incorporates a variety of security mechanisms at the system level, with preventing malicious submissions being an important part.Integration of captcha, taking advantage of the strength of AnQiCMS, helps us maintain a healthy and pure comment environment.

Why do comment sections require captcha?

Imagine if your website's comment section is filled with thousands of spam ads and virus links, what would users think? How would search engines evaluate your website?

  1. User experience deteriorates:Redundant spam information makes it difficult to find truly valuable comments, resulting in a straight drop in users' reading and interaction experience.
  2. Content quality has been damaged:Spam comments dilute the original content of the website, which may lead to the website's overall quality being judged as poor by search engines.
  3. SEO risk:A large number of comments containing malicious links or keyword stuffing may trigger the penalty mechanism of search engines, affecting the website ranking.
  4. Resource wastage:The server needs to handle these invalid requests, consuming bandwidth and computing resources; manually reviewing and cleaning up spam comments also consumes a lot of time and effort.

The CAPTCHA (CAPTCHA) was born precisely to address these issues.It distinguishes legitimate users from automated robots by designing challenges that only humans can recognize (or are difficult to recognize), effectively intercepting most spam comments.

In AnQiCMS comment submission form, integrate the captcha step

AnQiCMS integrates the captcha feature into its template system and API interface, making the integration process flexible and direct.Below, we will detail how to add captcha functionality step by step to the form for submitting your comments.

Step 1: Enable captcha function in AnQiCMS background

This is the basic integration of captcha, you need to make simple configuration in the AnQiCMS backend management interface.

  1. Login to your AnQiCMS backend.
  2. Navigate to the "Function Management" menu, where you will find configuration options for all the features of the website.
  3. In 'Function Management', find 'Content Comment Management' or 'Website Message Management' (the specific name may vary depending on the AnQiCMS version or your custom settings, but it will usually be related to comments or messages).
  4. After entering the corresponding management page, you will see an option of 'Content Settings' or 'Message Settings', which includes the toggle for the 'Message Comment Verification Code Feature'.You need to enable this feature.Generally, this would be a checkbox or a toggle button, which can be clicked or ticked.

Enable the background setting, and the AnQiCMS system will have the ability to generate and verify captcha.Next, we need to add the captcha display and input box to the front-end user submission form.

第二步：Modify the comment submission form template file

Now, we need to delve into the template files of AnQiCMS and embed the captcha element into your comment or message form.AnQiCMS's template system adopts syntax similar to Django template engine, making this part of the work intuitive and easy to understand.

  1. Confirm the location of the template file:According to the template conventions of AnQiCMS (refer todesign-director.md), the template for the comment list page is usually namedcomment/list.html, and the guestbook page may beguestbook/index.html。You need to find the actual template file used for rendering the comment or message submission form. This form usually containsuser_name/contact/contentand other fields.

  2. Locate the form elements:Open the found template file and locate to<form method="post" action="/comment/publish">English<form method="post" action="/guestbook.html">English

  3. EnglishAnQiCMS provides clear code examples for captcha integration.You can insert the following HTML and JavaScript code at the appropriate position in the form.Here I provide two common JavaScript implementation methods: pure JavaScript and jQuery version, you can choose one according to the JS library used in your template.

    Pure JavaScript version:

    {# 评论表单中的验证码部分 #}
<div style="display: flex; align-items: center; 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; margin-right: 10px;">
    <img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; border: 1px solid #ddd; vertical-align: middle;" alt="验证码" title="点击刷新验证码"/>
    <script>
        // 获取验证码图片的函数
        function refreshCaptcha() {
            fetch('/api/captcha')
                .then(response => response.json())
                .then(res => {
                    document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                    document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                })
                .catch(err => console.error('Failed to load CAPTCHA:', err));
        }


        // 页面加载时立即刷新一次验证码
        document.addEventListener('DOMContentLoaded', refreshCaptcha);
        // 点击图片时刷新验证码
        document.getElementById('get-captcha').addEventListener("click", refreshCaptcha);
    </script>
</div>

    jQuery version (if your template has included jQuery):

    {# 评论表单中的验证码部分 #}
<div style="display: flex; align-items: center; 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; margin-right: 10px;">
    <img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; border: 1px solid #ddd; vertical-align: middle;" alt="验证码" title="点击刷新验证码"/>
    <script>
        // 获取验证码图片的函数
        function refreshCaptcha_jQuery() {
            $.get('/api/captcha', function(res) {
                $('#captcha_id').val(res.data.captcha_id);
                $('#get-captcha').attr("src", res.data.captcha);
            }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
                console.error('Failed to load CAPTCHA:', textStatus, errorThrown);
            });
        }


        // 页面加载时立即刷新一次验证码
        $(document).ready(refreshCaptcha_jQuery);
        // 点击图片时刷新验证码
        $('#get-captcha').on("click", refreshCaptcha_jQuery);
    </script>
</div>

    Code analysis:

    • <input type="hidden" name="captcha_id" id="captcha_id">This is a hidden field used to store the unique identifier for the captcha.Each time a new verification code is requested, this ID will be updated and sent to the server for verification along with the form submission.
    • <input type="text" name="captcha" required placeholder="请输入验证码" ...>: This is the text box for user input of the verification code.name="captcha"It is a critical field that the server receives user input captcha validation.
    • <img src="" id="get-captcha" ...>This is the place where the verification code image is displayed.srcThe property will be dynamically updated through JavaScript.cursor: pointer;andtitle="点击刷新验证码"Enhanced user experience, hints to the user that the image is clickable and can be refreshed.
    • <script>Block: This piece of JavaScript code is responsible for:
      • On page load, send an immediate request to/api/captchathe interface to fetch and display a new captcha image and its ID.
      • Add a click event listener to the captcha image, so that the captcha can be refreshed when the user clicks on the image.

  4. Save and update the cache:Be sure to save the template file after modification. If AnQiCMS