The website message board is a good place for interaction with visitors, bringing the website closer to the users.However, without proper protection, the message board will soon be flooded with various spam messages, malicious submissions, and even automated scripts, which not only affects the cleanliness of the website but may also consume server resources and even damage the reputation of the website.Luckyly, AnQiCMS provides a simple and effective solution: captcha function.

In AnQiCMS, enabling and using captcha for the message form can significantly improve the security of the website and effectively prevent most spam information from bothering.The entire process is divided into two major parts: backend activation and frontend template integration. Next, we will introduce how to implement it step by step.

The first step: Enable captcha function in AnQiCMS backend

Firstly, we need to enable the captcha function in the AnQiCMS backend management interface.This is a global setting that, once enabled, the system will provide captcha support in the background for the message form.

  1. Log in to your AnQiCMS backend.
  2. Find and click in the left navigation bar“Function Management”Option.
  3. Select in the expanded feature list“Website Message Management”.
  4. After entering the website message management page, you will see a name called“Turn on the message comment captcha function”.
  5. Check this option and then click the bottom of the page“Save”button.

After completing this step, the AnQiCMS backend has completed the preparation of the captcha function.Please note that enabling it in the background will not make the captcha appear on the website front end immediately, we still need to modify the front-end template.

Step two: Integrate captcha in the comment form (front-end template)

In order for the captcha to truly display and be put into use, we still need to add the corresponding HTML and JavaScript code to the website's front-end comment form template.

Generally, the AnQiCMS website's message form template file is locatedtemplateUnder the directory/guestbook/index.htmlor in a file with a similar name. You need to find and edit the template file you are using through FTP, SSH, or Baota panel file management features.

In the comment form's<form>Inside the tag, you need to find a suitable position to insert the captcha input box and image.Generally, we would place it below the message content input box and above the submit button to ensure that users can clearly see and enter the captcha before submitting.

The following are the HTML and JavaScript code snippets that need to be added to the template:

<div style="display: flex; clear: both; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #e6e6e6;" alt="验证码" title="点击刷新验证码" />
  <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>

Code explanation:

  • input type="hidden" name="captcha_id"This is a hidden field used to store the unique identifier of the current captcha. The system uses this ID to match whether the captcha entered by the user is correct.
  • input type="text" name="captcha": This is the text box for entering the user's captcha.
  • img src="" id="get-captcha": This is the area for displaying the captcha image.
  • scriptJavaScript code within the label:
    • It is for the captcha image (id="get-captcha"Added a click event listener. A network request is triggered when the user clicks on the image.
    • fetch('/api/captcha')This will be sent to the AnQiCMS backend./api/captchaThe interface sends a request to get a new captcha image and its correspondingcaptcha_id.
    • document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id): The obtainedcaptcha_idupdate it to the hidden field.
    • document.getElementById('get-captcha').setAttribute("src", res.data.captcha): Update the obtained captcha image path to<img>label'ssrcThe attribute is used to display a new captcha image.
    • document.getElementById('get-captcha').click()This line of code is used to immediately 'click' on the captcha image after the page is loaded, so that a captcha is automatically displayed when the page is first loaded, which is convenient for users.

If you use jQuery in your project, you can replacescriptparts with more concise jQuery syntax:

<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>

Save the modified template file.

Step 3: Verify that the captcha function is working

After completing all the above configurations, you can test on the website front-end:

  1. Open your website and visit the page that contains the message form.
  2. Refresh the page, you should see a dynamically generated captcha image and a text box for entering the captcha.
  3. Try clicking the captcha image, the captcha should refresh and display a new image.
  4. Enter the comment content and the correct captcha, then submit. The comment should be successfully submitted.
  5. Try submitting the message again, but this time, deliberately enter an incorrect captcha. The system should prompt that the captcha is incorrect and prevent the message from being submitted.

If everything runs as expected, then congratulations, your AnQiCMS message form captcha function has been successfully enabled and put into use!This adds an important layer of security to the website and greatly improves the content operation environment.

Frequently Asked Questions (FAQ)

1. I have enabled the captcha feature on the backend, but the front-end page does not display. What is the problem?

The captcha is enabled only at the system level, but the display and interaction of the captcha require the cooperation of the front-end template code. Please make sure to check your message form template file (usuallyguestbook/index.html），Confirm that you have correctly added the inclusion according to the second step of the articlecaptcha_id/captchainput boxes and<img>The HTML code for the captcha image and the JavaScript code used for dynamically retrieving and refreshing the captcha.

2. How to solve the problem of not displaying the verification code image or unable to refresh after clicking?

This is usually due to front-end JavaScript code or network request issues. You can try the following troubleshooting steps:

  • Check the browser console:Press F12 to open the browser developer tools and view the "Console" (console) and "Network" (network) tabs.
    • If there is an error in the JavaScript code, the Console will display an error message.
    • In the Network tab, after clicking the captcha image, you should see a link to/api/captchaThe request, check the status code (should be 200 OK) and the response content, to confirm whether it was successfully returned.captcha_idandcaptchaImage path.
  • Check the path:Make sure the path in JavaScript is/api/captchacorrect, without extra slashes or spelling errors.
  • Network issue: Occasionally, it may also be due to slow server response or network connection issues, causing the captcha image to load in a timely manner.

3. What types of captcha are supported by AnQiCMS? Can I change the captcha style?

AnQiCMS built-in captcha function usually provides a common image captcha, which is an interference image composed of numbers and letters.The document does not mention the support for multiple captcha types or the ability to change the built-in captcha style.If you need a more advanced or customized captcha type (such as sliding captcha or point-to-select captcha), it may require secondary development or integration with a third-party captcha service.For most websites, the default picture captcha provided by AnQiCMS is enough to deal with common spam submissions.