Website messages and article comments are an important bridge for interaction between the website and users. They can effectively enhance content activity and user stickiness.However, these open interactive areas are often targeted by spammers, with a large amount of meaningless or malicious information not only damaging the image of the website but also potentially affecting search engine rankings.In order to effectively curb such problems, integrating captcha functionality into the comment or message form is an effective method.

AnQi CMS is an efficient and secure website building tool that fully considers the common challenges in content operation and provides convenient solutions.In AnQi CMS, adding a captcha to the comment or review form can greatly increase the difficulty for robots and automated scripts to post spam, thereby protecting the interactive environment of your website.

Why do we need captcha?

Firstly, let's understand why CAPTCHA is so important.In the online world, spam is everywhere.Comments submitted automatically through the program are not only filled with meaningless advertisements and links, but may also contain malicious code, posing a security risk to the website.

  • Affect user experienceEnglish: Normal users may be disturbed by a large amount of spam information while browsing comments, which reduces their trust in the website and the user experience.
  • English: Damage the reputation of the websiteAn English translation of the value would be: 'A website filled with garbage information, which will appear unprofessional to visitors and thus affect the brand image.'
  • Drag on Search Engine Optimization (SEO)English search engines have a negative attitude towards low-quality content and spam links. Too much spam information may lead to a decrease in the ranking of the website.

The core function of the captcha is to distinguish between human users and automated programs. It achieves the verification purpose by requiring users to complete a task that is difficult for machines to recognize but easy for humans to recognize (such as recognizing characters in images, completing simple mathematical calculations).Although this may slightly increase the number of operational steps for users, compared to the benefits of preventing spam, this tiny bit of friction is worth it.

The method of captcha integration in Anqi CMS

The CMS provides built-in captcha functionality with a relatively straightforward integration process. You simply need to configure it in the background and add the corresponding code snippet to the front-end template.

Step 1: Enable the captcha feature in the background.

First, you need to log in to the backstage management interface of Anqi CMS.通常，这类安全功能会在“全局设置”或“内容设置”等与网站整体配置相关的区域找到。Please find the options related to "留言For example, under the "Feature Management" section, you should be able to find the setting to enable captcha in the "Website Message" or "Content Comment" module.

第二步：Modify the front-end template to display the captcha

Next, we need to add a captcha display area and input field to the comment or feedback form in your website template.The template system of Anqi CMS is flexible and powerful, allowing you to easily modify the corresponding HTML files.

For the message form, you usually modifytemplate/您的模板目录/guestbook/index.htmlthe file; while for the comment form, it may be intemplate/您的模板目录/comment/list.htmlOr related comments in the submitted part of the reference file.

In the form of<form>Within the tag, find the position where you want to display the captcha, and then add the following code:

<div style="display: flex; clear: both; 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;" alt="验证码" title="点击刷新验证码"/>
</div>
<script>
  // 使用原生JavaScript来获取和刷新验证码
  document.getElementById('get-captcha').addEventListener("click", function () {
    fetch('/api/captcha')
      .then(response => response.json())
      .then(res => {
        document.getElementById('captcha_id').value = res.data.captcha_id;
        document.getElementById('get-captcha').src = res.data.captcha;
      })
      .catch(err => console.error('获取验证码失败:', err));
  });
  // 页面加载后自动请求一次验证码
  document.getElementById('get-captcha').click();
</script>

Code Explanation:

  • <div>containerHere is andivWrapped the captcha element and laid out with some simple inline styles. You can adjust it according to your own template CSS.
  • captcha_id(Hidden field)This is a hidden input box used to store the unique identifier for the captcha.Each time a new verification code image is requested, this ID will also be updated, and the backend will verify whether the user's input verification code is correct based on this ID.
  • captcha(Text input box)This is the place where users input the verification code characters they recognize.requiredEnsure that the user must fill in the properties.
  • <img>tagsThis label is used to display the verification code image. It'ssrcThe property will be loaded dynamically through JavaScript.cursor: pointerandtitleThe property enhances the user experience, suggesting that the user can click the image to refresh.
  • <script>tags:
    • UsefetchThe API is towards/api/captchaSend a request to get the new captcha image URL andcaptcha_id.
    • When the user clicks the captcha image, it will trigger the event listener to refresh the captcha.
    • document.getElementById('get-captcha').click();Ensure that the captcha image is displayed immediately after the page has finished loading.

If your website has integrated jQuery, you can also choose to use the following more concise jQuery syntax:

<div style="display: flex; clear: both; 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;" alt="验证码" title="点击刷新验证码"/>
</div>
<script>
  // jQuery 调用方式
  $('#get-captcha').on("click", function () {
    $.get('/api/captcha', function(res) {
      $('#captcha_id').val(res.data.captcha_id);
      $('#get-captcha').attr("src", res.data.captcha);
    }, 'json');
  });
  // 页面加载后自动请求一次验证码
  $('#get-captcha').click();
</script>

Please adjust the styles in the code above according to the CSS framework and style you have in your template (such asform-control/margin-bottometc.), to ensure that the captcha elements can perfectly integrate with your website design.

After completing these steps, your message or comment form will have successfully integrated the captcha feature.Users need to enter the correct verification code before submitting information, which will effectively filter out most automated spam submissions, making your website's interactive environment cleaner.

Common Questions (FAQ)

Q1: After I configure according to the steps, the captcha image does not display, or there is no response when clicking refresh, how should I investigate?

A1:Encounter this situation, please check your browser console (usually opened by pressing F12) to see if there are any JavaScript errors or failed network request prompts. Common troubleshooting directions include:

  • Network request issueConfirm:/api/captchaCan this API path be accessed normally and return data (status 200 OK), and does the returned data structure containcaptcha_idandcaptchaField. This may be due to server configuration, network issues, or the security CMS backend not enabling the captcha function correctly.
  • JavaScript errorCheck the error messages in the console, which may be due to a misspelling of the DOM element ID (such ascaptcha_idorget-captcha）、JavaScript code conflicts with other scripts, or jQuery is used without including the jQuery library, and other reasons.
  • Cache issues：Try clearing your browser cache, or access in incognito mode. Sometimes old JS or CSS files can cause display exceptions.

Q2: Can I customize the style and display of the captcha? For example, make the captcha image larger or adjust the width of the input box.

A2：Of course, you can.The display style of the captcha is entirely dependent on the HTML structure and CSS style you add in the frontend template.style="..."），You can modify it according to your needs. For example, adjust<img>Tagswidthandheightto change the size of the picture, adjust<input type="text" ...>ofwidthorflexChange the width of the input box.**Practice is to define these styles in your website's CSS file and control them via class or ID to maintain code cleanliness and maintainability.

Q3: After integrating the captcha, will it affect the user experience of the website? Are there any 'friendlier' verification methods?

A3:Any form of captcha will have a certain impact on user experience, as it increases the number of user operation steps.However, in order to prevent the proliferation of spam, this slight friction is usually necessary.The captcha provided by Anqi CMS is a relatively traditional graphic captcha, which is easy to implement and widely accepted.Currently, there are also some more 'friendly' verification methods, such as behavioral verification (sliding puzzles, text selection, etc.) or silent verification (such as Google reCAPTCHA v3), which ensure security while trying to minimize user perception.These more advanced verification methods may require additional integration work. If your website needs a higher-level verification experience, consider exploring the extensibility of Anqi CMS, whether there are related plugins in the community or developing an integration yourself.For most small and medium-sized websites, the built-in graphic captcha is sufficient to deal with common spam attacks.