How to enable and configure the website comment form in AnQiCMS and display custom fields?
In AnQiCMS, creating an interactive guest feedback form that can collect feedback and flexibly configure custom fields is a very practical feature.AnQiCMS provides a simple and efficient way to achieve this goal, whether it is backend settings or front-end display, it can be easily mastered.
Enable and configure the message function in the background
Generally, when you want website visitors to be able to contact you or collect their feedback, an inquiry form is the preferred choice.Enable and configure the message function in AnQiCMS, you first need to enter the background management interface.
In the left navigation bar of the background interface, find the "Function Management" menu, click on it, and you will see an option named "Website Message Management".This is where you manage and configure the core area of the guestbook form.After entering this page, you can add, edit, or delete the fields of the comment form.
AnQiCMS allows you to customize the fields of the message form according to your actual needs.This is like designing a questionnaire, where you can flexibly set various types of questions.For example, you may need visitors to fill in their name, contact phone number, email address, or opinions on a product or service.
Create a custom field when you can choose multiple field types:
- Single-line Text (text): Suitable for names, brief answers, etc.
- Number (number): If you need to collect numeric information such as quantity, age, etc.
- Multiline text (textarea): Very suitable for visitors to input long comments or detailed descriptions.
- Single choice (radio): Provide several preset options, visitors can only choose one.
- Multiple choice (checkbox): Provide multiple options, visitors can choose one or more.
- Dropdown selection (select)Similarly, preset options are provided, displayed in a dropdown menu.
For selection type fields (radio, checkbox, dropdown), you can directly set their default values in the background. These default values will be displayed as selectable items on the front-end.At the same time, you can mark any field as 'required' to ensure that you collect key information.This flexibility allows you to create customized comment forms for various business scenarios.
In addition, to prevent malicious submissions or spam, enabling captcha for the comment form is a wise choice.You can go to the 'Global Settings' in the background, enter the 'Content Settings' option, find and enable the captcha function.Once enabled, the comment form will require users to enter a captcha when submitting.
You may also want to be notified in time when you receive a new message.AnQiCMS also supports configuring message email reminder features to ensure you do not miss any important customer feedback.
Leave form displayed in the front-end template
The backend configuration of the message function is completed, and the next step is to display it on the front page.AnQiCMS uses a template-driven approach to display content, so you need to modify or create a dedicated comment page template.
In your template directory, there is usually oneguestbook/index.html(Or if your template uses a flattened structure, it might beguestbook.html) file, this file is used to render the留言表单页面. If you don't have this file, you can create one yourself.
In the template, you need to use the AnQiCMS providedguestbooktags to dynamically obtain the留言 fields configured in the background. The usage of this tag is very intuitive:
<form method="post" action="/guestbook.html">
{% guestbook fields %}
{% for item in fields %}
<div>
<label>{{item.Name}}</label>
<div>
{% if item.Type == "text" || item.Type == "number" %}
<input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
{% elif item.Type == "textarea" %}
<textarea name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
{% elif item.Type == "radio" %}
{%- for val in item.Items %}
<input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}">
<label for="{{item.FieldName}}-{{loop.index}}">{{val}}</label>
{%- endfor %}
{% elif item.Type == "checkbox" %}
{%- for val in item.Items %}
<input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}">
<label for="{{item.FieldName}}-{{loop.index}}">{{val}}</label>
{%- endfor %}
{% elif item.Type == "select" %}
<select name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
{%- for val in item.Items %}
<option value="{{val}}">{{val}}</option>
{%- endfor %}
</select>
{% endif %}
</div>
</div>
{% endfor %}
{# 验证码集成，如果后台开启了验证码功能，则需要添加以下代码 #}
<div style="display: flex; clear: both; margin-top: 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;">
<img src="" id="get-captcha" style="width: 150px;height: 50px;cursor: pointer; margin-left: 10px; border: 1px solid #ccc;" />
<script>
document.getElementById('get-captcha').addEventListener("click", function (e) {
fetch('/api/captcha')
.then(response => 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>
<div style="margin-top: 20px;">
<button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer;">提交留言</button>
<button type="reset" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; cursor: pointer; margin-left: 10px;">重置</button>
</div>
</form>
In this code snippet,{% guestbook fields %}The tag will load all field information configured on the backend. Then, through{% for item in fields %}looping, we can generate the corresponding HTML input elements according toitem.Type(field type) dynamically.item.NameUsed to display the Chinese name of the field,item.FieldNameIs the field name used when submitting the form,item.RequiredDetermines whether to add HTML5'srequiredProperty.
If you have enabled the captcha feature in the background, then make sure to ensure that the captcha-relatedinputFields and JavaScript code are also added to the form to dynamically load captcha images and perform verification.
The form'sactionattribute should point to/guestbook.htmlThis is the default processing address for message submission received by AnQiCMS.After submission, you can configure the backend to return an HTML page or JSON data for easy front-end processing.
Processing after leaving a message
After the visitor fills in and submits the message, all information will be safely stored in the 'Website Message Management' of your AnQiCMS backend.You can view all received messages there, and perform operations such as reviewing, replying, or deleting.
By following these steps, you can easily enable a fully functional website message form in AnQiCMS, and you can also flexibly customize fields according to brand and business needs to enhance the interactivity and information collection capabilities of the website.This deep customization capability is exactly what AnQiCMS is committed to providing, an efficient and customizable content management solution.
Frequently Asked Questions (FAQ)
1. Where can I view the messages I submitted?All messages submitted through the front-end form will be stored in the 'Function Management' menu under the 'Website Message Management' in AnQiCMS backend.Enter this page, you can view, manage, and reply to all received messages.
How to set options for single-choice, multiple-choice, or dropdown fields in a comment form?In An