In website operation, the message board and comment area are often important channels for interaction with users.However, the garbage information and malicious submissions that come with it are also a headache.To effectively filter out this noise, integrating captcha functionality is an effective method.Today, let's talk about how to easily embed and display a message captcha in the frontend form of AnQiCMS (AnQiCMS) to build a barrier for your website.

The entire process can be divided into three main steps: first is the backend settings, then the front-end template HTML structure, and finally the JavaScript dynamic loading logic.

Step 1: Enable captcha function in AnQi CMS backend

Before starting to modify the front-end template, we need to make sure that the captcha feature has already been enabled in the Anqi CMS backend management system.

  1. Log in to your Anqi CMS backend management interface.
  2. Navigate to the 'Function Management' menu, where you can usually find the settings for 'Website Messages' or 'Content Comments'.
  3. Find and enable the "留言评论验证码 function". This step is very critical, only when the background function is enabled, can the front-end normally call the captcha service.

After completing this step, your website is ready to display the captcha on the front end.

Step 2: Modify the front-end template to embed the captcha element.

Next, we need to edit the website's frontend template file, adding the display area for the captcha and the related logic code. This is usually in your comment form (for exampleguestbook/index.htmltemplate) or comment form (for example, a template that includes a comment form on the document detail page).

In the location where you want to display the captcha, such as below the 'Leave a message' input box or above the 'Submit' button, insert the following HTML structure:

<div style="display: flex; clear: both; align-items: center; margin-top: 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; height: 56px;">
  <img src="" id="get-captcha" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #ccc; background-color: #f5f5f5;" alt="验证码" title="点击刷新验证码" />
</div>

This code contains three core parts:

  • A hidden input box(captcha_id
  • A text input box(captcha): The user enters the verification code characters they see. It is recommended to addrequiredAttribute, to ensure that the user does not omit it.
  • An image label(img): The captcha image will be displayed here. We give it aid="get-captcha"It is convenient to control the loading and refreshing of images through JavaScript. At the same time, in order to improve the user experience, we addedaltandtitleProperty, let the user know that this is a captcha image and can click to refresh.

To make the form layout more aesthetically pleasing, you can adjust it according to your own CSS framework (such as Bootstrap or others)classandstyleProperty. Here is a simple Flex layout example, you can modify it according to your actual situation.

Step 3: Add JavaScript logic, dynamically load and refresh the captcha

There is not enough HTML structure, we still need some JavaScript code to interact with the Anqi CMS backend captcha service to load and refresh the captcha image.

Place the following JavaScript code snippet in your template file.<script>Within a tag, or at the place where an external JS file is introduced. To ensure that the code is executed after the page DOM is loaded, it is placed in theDOMContentLoadedin the event listener.

`javascript"