How to add captcha functionality to the AnQiCMS comment form to reduce the display of spam comments?

No doubt, spam comments are a headache problem in website operation.They not only affect the user experience of the website, dilute high-quality discussion content, but may also damage the website's SEO performance in an invisible way, even occupying valuable server resources.Facing increasingly intelligent spam comment robots, we need more effective defensive measures.Fortunately, AnQiCMS provides a simple and powerful solution - adding a captcha function to the comment form, which can significantly reduce the intrusion of spam comments.

This article will guide you in detail on how to integrate captcha into the AnQiCMS comment form, bringing peace and order back to your comment section.

Why does the comment section need captcha?

Imagine, your website content is carefully planned, and visitors interact enthusiastically.Suddenly, a large number of advertisements, unrelated links, and garbled characters flooded into the comment section.This confuses users who really want to communicate, and it may also raise doubts about the quality of your website's search engine optimization.Manually deleting these spam comments is time-consuming and labor-intensive, and it's often the case that by pressing the gourd, the calabash floats up.A captcha, as an effective tool to distinguish between human users and automated programs, can greatly increase the threshold for posting spam comments, thereby freeing up your operational efforts, allowing the comment section to return to positive interaction.

AnQiCMS deeply understands the pain points of content operators, therefore it has built-in comment captcha functions to make it easy for us to meet challenges.

Add captcha functionality to the AnQiCMS comment form

To enable comment captcha in AnQiCMS, there are mainly two core steps: first, turn on the captcha function in the background, and then integrate the captcha display and interaction code in the front-end template.

Step 1: Enable captcha feature on the backend

Firstly, we need to activate the comment captcha option in the AnQiCMS backend management interface.

1. Log in to your AnQiCMS backend.
2. Find and click on 'Global Settings' in the left navigation bar.
3. Go to the 'Content Settings' page.
4. On this page, you will see an option called '留言评论验证码功能'. Please switch it to the enabled state.
5. Click the "Save" button at the bottom of the page to ensure the settings take effect.

Complete this step, the AnQiCMS system is ready to handle the captcha verification logic on the server side. Next, we need to allow users to see and enter the captcha on the front end.

Step two: Integrate the captcha into the comment form template

Next, we need to modify the website template file and add the display and interactive elements of the captcha to the comment form.AnQiCMS uses syntax similar to the Django template engine, making template modifications very intuitive.

The comment form is usually located at the bottom of your article or product details page, as well as any existing dedicated comment list page. The specific file path may vary depending on the template you are using, but it is usually intemplate/你的模板目录/belowcomment/list.htmlOr article detail pagearchive/detail.htmlFind the comment form code in the files.

Find your comment form (usually a<form>tag), and add the following code snippet inside it:

Using the native JavaScript way:

<div style="display: flex; clear: both">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                return 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.log(err)})
    });
    document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
  </script>
</div>

If your website uses jQuery, you can use a more concise way:

<div style="display: flex; clear: both">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
  <script>
    // jQuery 调用方式
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        $('#captcha_id').attr("value", res.data.captcha_id)
        $('#get-captcha').attr("src", res.data.captcha)
      }, 'json')
    })
    $('#get-captcha').click(); // 页面加载时自动获取一次验证码
  </script>
</div>

The purpose of this code is:

• captcha_id(hidden input): This is a hidden field used to store the unique identifier for each generated captcha.When you submit a comment, this ID will be sent to the server along with the user input captcha for verification.
• captcha(text input)：This is the place where the user enters the captcha code.
• get-captcha(img tag)：This<img>tag is used to display the captcha image.
• <script>Part: This JavaScript code is responsible for communicating with the AnQiCMS backend./api/captchaInterface communication.
  • When the page loads, it will automatically request a new captcha image and display it.
  • When the user clicks the captcha image, it will request a new captcha again to refresh the captcha function.

Insert this code into your commentformThe appropriate position, such as after the comment content input box and before the submit button.After saving the template file, refresh your website page, you should be able to see the captcha image and input box on the comment form.

Test and verify

After completing the above steps, be sure to test to ensure that the captcha function runs normally:

1. Refresh the page:Check if the captcha image and input box are displayed in the comment form.
2. Click the image:Try clicking on the captcha image to see if a new captcha will refresh.
3. Submit comment:
   • First, try entering the correct captcha and submit the comment. Check if the comment was successfully published.
   • Next, try entering an incorrect captcha and submit a comment. The system should prompt a captcha error and prevent the comment from being published.
   • Finally, do not enter a captcha (if one is set)requiredThe property cannot be submitted), or submit it empty and see how the system reacts.

By passing these tests, you can confirm whether the captcha effectively prevents spam comments.

Conclusion

Adding a captcha feature to the AnQiCMS comment form is a simple and effective website maintenance measure.It can not only help you clean up the comment environment, improve the user experience, but also reduce the time you spend on content review, allowing you to have more energy to focus on the creation and operation of website content.AnQiCMS flexible template system and powerful backend features, making everything accessible.

Frequently Asked Questions (FAQ)

1. After enabling the "comment captcha" function in the background, why doesn't the captcha still show up on the front-end comment form?Answer: Enabling the background feature only activates the server-side verification logic, you still need to manually add the display code for the captcha (including<input type="hidden">/<input type="text">and<img>Add the corresponding JavaScript code and tag to your website's comment form template.Please refer to the "second step: integrate the captcha into the comment form template" in the article for operation.

2. Does AnQiCMS support Google reCAPTCHA or other third-party captcha services?Answer: According to the current document information, the built-in captcha function of AnQiCMS is a simple captcha based on image recognition.If you need to integrate Google reCAPTCHA or other more complex third-party captcha services, you may need to do further development or look for plugin solutions provided by the community.

Will adding a captcha affect my website's performance?Answer: AnQiCMS is developed based on Go language, with high performance and high concurrency features.The built-in image captcha generation and verification process is very lightweight, with almost no impact on the overall performance of the website.In most cases, you don't need to worry that the captcha will slow down the website loading speed or response time.