Dealing with spam comments and malicious messages is always a headache when operating a website. They not only affect user experience but may also damage the professional image of the website.It is fortunate that 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 captcha to your comment and message form in Anqi CMS. This process can be divided into two steps, which is very intuitive and easy to operate.

Step 1: Enable the captcha feature in the background.

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

  1. Enter the background management interface: Log in to your Anqi CMS backend.
  2. Navigate to the function settingsIn the left navigation bar, find and click the "Function Management" module.
  3. Select the form typeAccording to the form type you need to add a 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 regarding enabling captcha.Just check it and save, and the backend configuration is complete.This is like flipping a switch in the background, telling the system: 'Alright, I need a captcha!'}]

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

Step 2: Integrate captcha display in the template

Although the captcha feature has 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's template files.

The Anqi CMS uses Django template engine syntax, which makes modifying templates very flexible. Typically, a comment form might be located attemplate/你的模板目录名/comment/list.html, while a message form is located attemplate/你的模板目录名/guestbook/index.htmlYou need to edit the corresponding file.<form>Inside the tag.

Please enter it in your comment or message form.<form>Inside the tag, find the position where you want to display the captcha, and then 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 more concise 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)This is 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)Provide the captcha characters displayed in the image.
  • Image label (<img>): Used to display the captcha image.
  • JavaScript code:
    • Passfetchor$.getto/api/captchaInterface sends a request to obtain a new verification code image URL and correspondingcaptcha_id.
    • When the user clicks on the verification code image, this JS code will be triggered to refresh the verification code.
    • document.getElementById('get-captcha').click();(or)$('#get-captcha').click();This line is very critical, it ensures that the first captcha is fetched and displayed immediately after the page loads, so that the user can see it without having to click.
    • The style part (style="..."This is to ensure that the captcha input box and the image can be better integrated into your form, and you can adjust these styles according to the actual situation of your website.
    • altandtitleThe addition of properties enhances user experience and accessibility.

Integration Points:

  • Make sure this code is placed in your comment or message form.<form>Inside the tag.
  • class="你的表单样式类"This part, please replace it with the CSS class name of the form input box actually used on your website, in order to unify the style.
  • Please make sure to retain it.name="captcha_id"andname="captcha"These fields are necessary parameters for the backend captcha recognition feature.

Save your 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.

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

Common Questions (FAQ)

Q1: Why doesn't the captcha image display after I follow the steps?

A1: There may be several reasons.Firstly, please make sure that you have checked and saved the option to enable captcha in the "Function Management" section for either "Website Message Management" or "Content Comment Management" in the background./api/captchaThe interface did not respond correctly, or there is a syntax error in your template code. Finally, confirm that the template file you modified has been correctly saved and uploaded to the server, and the cache has been updated.

Q2: Can I customize the captcha image style?

A2: Of course. Verification