When operating a website, spam comments and malicious messages are often a headache.They not only affect user experience, but may also consume server resources, even lowering the professional image of the website.It is fortunate that Anqi CMS is built-in with captcha function, which can help us effectively filter out these unwelcome guests, making the website environment cleaner.
Below, we will together learn how to enable and correctly display the captcha feature in the website's comment and message form.
Step 1: Enable the captcha feature in the background.
Firstly, we need to go to the management interface of the website backend.Find "Feature ManagementThese modules usually have a similar configuration item.
After entering the corresponding management page, you will see an option named "Whether to enable captcha" or something similar. Check it to enable the setting and save the changes.
This step is crucial, it tells the backend system of the Aanqi CMS that a captcha check should be performed when handling comment or message submissions.If the backend is not enabled, even if the code to display the captcha on the front end is added, the captcha will not work normally because the backend will not verify it.
第二步：修改网站模板文件以显示验证码
Next, we need to modify the front-end template file of the website so that the user can see and enter the captcha when submitting the form. Usually, the comment form is located under your template directory.guestbook/index.htmlIn the file, while the comment form may be in the template of the article or product detail page (for examplearchive/detail.htmlorproduct/detail.html), or in a dedicated comment list templatecomment/list.html）in it.
Find the form you want to add the captcha to, and add the following HTML and JavaScript code near the submit button.This code mainly includes three parts: a hidden input box for storing the captcha ID, a text input box for users to enter the captcha, and an image tag for displaying the captcha image.
<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="请填写验证码" style="flex: 1; padding: 10px; border: 1px solid #ccc; margin-right: 10px; border-radius: 4px;">
<img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border: 1px solid #eee; border-radius: 4px;" alt="验证码">
</div>
<script>
// 获取验证码的函数
function fetchCaptcha() {
fetch('/api/captcha')
.then(response => 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.addEventListener('DOMContentLoaded', function() {
fetchCaptcha();
});
// 点击验证码图片时刷新验证码
document.getElementById('get-captcha').addEventListener("click", function () {
fetchCaptcha();
});
</script>
If you use the jQuery library on the website, you can also 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="请填写验证码" style="flex: 1; padding: 10px; border: 1px solid #ccc; margin-right: 10px; border-radius: 4px;">
<img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border: 1px solid #eee; border-radius: 4px;" alt="验证码">
</div>
<script>
// jQuery 调用方式
function fetchCaptchaWithJquery() {
$.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);
});
}
$(document).ready(function() {
fetchCaptchaWithJquery(); // 页面加载后获取验证码
$('#get-captcha').on("click", function () {
fetchCaptchaWithJquery(); // 点击图片刷新验证码
});
});
</script>
This JavaScript code is responsible for running when the page loads and every time the user clicks on the captcha image,/api/captchaInterface initiates a request to obtain a new verification code image and the corresponding ID. Then, it will display the obtained verification code image<img>in the label and fill the verification code ID into the hiddencaptcha_idInput box inside.After the user enters the verification code, the system will use this ID to verify whether the input is correct.In order to make the captcha image and input box look more coordinated, some basic CSS styles have been provided in the above example. You can adjust and beautify them according to the overall style of the website.
Place the above code snippet correctly in your comment or message<form>inside the tag and make surecaptcha_id/captchaandget-captchathe IDs of these elements are unique in your template to avoid conflicts.
By following these two simple steps, your security CMS website can effectively enable the captcha feature in comment and message forms.This can not only significantly reduce the harassment of spam information, protect the purity of website content, but also improve the overall operational efficiency.Good user experience and website security are parallel, and captcha is an effective tool to balance both.
Common Questions (FAQ)
1. English: Why does the captcha image not display even though I followed the steps?
答：This may be caused by several reasons.Please confirm again whether you have selected and saved the 'Enable captcha' option under 'Function Management' in the 'Website Message Management' or 'Content Comment Management' in the 'Safety CMS' backend.Next, check the browser console (usually opened by pressing F12) for any failed network requests (404 or 500 errors) or JavaScript errors./api/captchaThe path accesses the captcha interface, and the data format it returns is correct. Also, check if the CSS style you added has accidentally hidden the captcha image.
2. English: What is the reason why I have spam comments submitted even though I have enabled the captcha?
3. Question: Can I change the display style of the captcha or replace it with another type of captcha?
Answer: The captcha function built into Anqi CMS usually provides a default image style