As an experienced website operations expert, I am happy to elaborate on how to correctly add captcha functionality to the AnQiCMS comment form.This feature is crucial for maintaining the healthy ecosystem of the website, resisting spam intrusion, and effectively improving user experience, ensuring that the messages you receive are real and valid.AnQiCMS as an efficient and flexible content management system provides a concise and clear path for the integration of captcha functions.
Add captcha to your AnQiCMS message form: Say goodbye to spam, enhance user experience
In today's online environment, interactive areas such as website comment sections and contact forms often become targets for spammers.These automated programs (or so-called "robots") will submit meaningless and even harmful content in bulk, not only affecting the normal operation of the website and data cleanliness, but also reducing the user experience of real users.Lucky for AnQiCMS (AnQiCMS) to know this pain point, it provides built-in captcha functionality for website administrators, helping you easily build a solid defense for the comment form.
To correctly add captcha to the AnQiCMS comment form, we mainly have two core steps: first isEnable captcha function in the background, then isIntegrate captcha elements in the frontend template file.
Step 1: Enable captcha function in AnQiCMS backend
This is the basis for enabling the captcha function, if this switch is not turned on, even if you add code in the front-end template, the captcha will not work normally.
- Log in to the AnQiCMS management backend: Log in with your administrator account.
- Navigate to feature management: Find and click "Feature Management" in the left menu.
- Locate website message managementIn the sub-menu of "Function Management", you will see the option "Website Message Management", click to enter.
- Enable message comment captchaIn the "Website Message ManagementSet to enabled statusAfter enabling, the system will prepare the generation and verification logic on the server side.
After completing this step, the AnQiCMS backend is ready to handle captcha requests.Next, we need to present the visual elements and interactive logic of the captcha to the user in the website's front-end template.
Step 2: Integrate the captcha element into the front-end template file.
The captcha needs to be enabled in the background and then it needs to be placed in the template file that carries the message form (usuallyguestbook/index.htmlOr you can add specific HTML and JavaScript code to your custom feedback form template.This code is responsible for requesting the captcha image from the server and passing the captcha ID and the user's input value when the user submits.
The following needs to be added to the message form<form>The code segment inside the tag. Please choose the corresponding JavaScript implementation method based on whether your project uses jQuery:
<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; height: 56px; border-right: none;">
<img src="" id="get-captcha" alt="验证码" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #e6e6e6; border-left: none;" />
<script>
// 原生JavaScript方式
document.getElementById('get-captcha').addEventListener("click", function (e) {
fetch('/api/captcha') // 向后端API请求验证码数据
.then(response => {
return response.json() // 解析JSON响应
})
.then(res => {
// 将获取到的验证码ID设置到隐藏字段中
document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
// 将验证码图片URL设置到图片元素的src属性中
document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
}).catch(err => {
console.error("获取验证码失败:", err); // 错误处理
});
});
// 页面加载时自动触发一次点击，以显示初始验证码
document.getElementById('get-captcha').click();
</script>
<!-- 如果您的网站使用了jQuery，可以使用以下jQuery方式，替换上面的原生JavaScript代码 -->
<!--
<script>
// jQuery方式
$('#get-captcha').on("click", function (e) {
$.get('/api/captcha', function(res) {
// 将获取到的验证码ID设置到隐藏字段中
$('#captcha_id').attr("value", res.data.captcha_id);
// 将验证码图片URL设置到图片元素的src属性中
$('#get-captcha').attr("src", res.data.captcha);
}, 'json').fail(function(jqXHR, textStatus, errorThrown) {
console.error("获取验证码失败:", textStatus, errorThrown);
});
});
// 页面加载时自动触发一次点击，以显示初始验证码
$('#get-captcha').click();
</script>
-->
</div>
Code analysis:
<input type="hidden" name="captcha_id" id="captcha_id">This is a hidden field used to store data generated by the serverUnique identifier for the current captcha. Each time the captcha image is refreshed, this ID will also be updated. When the user submits the form, thiscaptcha_idWill be sent to the server along with it, so that the server knows which captcha to verify.<input type="text" name="captcha" required placeholder="请填写验证码" ...>: This is where the user enters the captcha.name="captcha"Is the field name received by the server for the user's input captcha value,requiredattribute ensures that the user must fill in.<img src="" id="get-captcha" alt="验证码" ...>: This is the element used to display the captcha image.id="get-captcha"Used to select the element in JavaScript code,cursor: pointer;Style hints that the user can click to refresh.- JavaScript code block:
- Whether it is the native JS version or jQuery version, the core logic is to listen for the click event of the captcha image.
- When the image is clicked, it will send a request to
/api/captchathis interface. - The server will return a JSON containing
captcha_idand a new captcha unique identifiercaptchaa new captcha image URL. - JavaScript code will update the hidden field
captcha_idThe value will be<img>label'ssrcThe property is updated to the new captcha image URL, thereby realizing the refresh of the captcha. document.getElementById('get-captcha').click();(or)$('#get-captcha').click();This line is very important, it ensures that the page is loaded completely,immediately request and display the first captcha imageinstead of waiting for the user to click.
Insert this code into the position in your comment form where you want the captcha to be displayed, and make sure it is inside the tag.<form>Description of the working principle.
Description of the working principle.
After you complete the above two steps, the captcha function is seamlessly integrated. The brief workflow behind it is:
- The user accesses the message form page, and the front-end script goes through
/api/captchaRequest a captcha image and its corresponding unique ID. - The image is displayed on the page, and the ID is stored in a hidden field.
- User fills in the comment content and the verification code displayed, click submit.
- Form data (including the comment content, the value of the verification code entered by the user, and the hidden
captcha_id) Sent to the AnQiCMS backend. - The backend uses
captcha_idFind the correct verification code corresponding to it, and compare it with the value submitted by the user. - If matched successfully, the message will be processed normally; if not, an error message will prompt the captcha.
In this way, AnQiCMS provides effective security protection for your website's comment form, greatly reducing the trouble of spam information, making your website's interactive area cleaner and more efficient.
Frequently Asked Questions (FAQ)
1. Why am I adding code step by step but the captcha image does not display or cannot refresh?
This is usually because youForget to enable the 'Leave a message comment verification code' feature on the AnQiCMS backend.Please go back to the first step, check "Function Management" -> "Website Message Management" to ensure that the function is set to enabled.The backend is not enabled, even if there is code on the front end, it cannot obtain the captcha data from the backend.
2. The style of the verification code image looks uncoordinated, can I customize its appearance?
Of course you can. The captcha image is generated by