In AnQiCMS, creating a guest interactive message form that collects feedback and allows for flexible configuration of custom fields is a very practical feature.AnQiCMS provides a simple and efficient way to achieve this goal, whether it is the backend settings or the frontend 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, a comment form is the preferred choice.Enable and configure the message function in AnQiCMS, you need to enter the background management interface first.
In the left navigation bar of the background interface, find the 'Function Management' menu, click it, and you will see an option named 'Website Message Management'.This is the core area where you manage and configure the feedback form.After entering this page, you can add, edit, or delete the fields of the message 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.
When creating custom fields, you can choose from various field types:
- Single-line Text (text): Suitable for names, brief answers, etc.
- Number (number)): If you need to collect numerical information such as quantity, age, etc.
- Multi-line text (textarea)：Very suitable for visitors to input long opinions or detailed descriptions.
- Single choice (radio)：Provide several preset options, visitors can only choose one.
- Multiple selection (checkbox))：Provide multiple options, visitors can choose one or more.
- Drop-down selection (select)Similarly, preset options are provided and displayed in the form of a dropdown menu.
For fields of selection type (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 the collection of key information.This flexibility allows you to create customized comment forms for various business scenarios.
Moreover, to prevent malicious submissions or spam, enabling captcha for the comment form is a wise choice.You can enter the 'Content Settings' option under the 'Global Settings' in the background, find and enable the captcha function.Once enabled, the message form will require users to enter a captcha when submitting.
You may also want to be notified promptly when you receive new messages.AnQiCMS also supports the configuration of message email reminder function, to ensure you will not miss any important customer feedback.
The message form is displayed in the front-end template.
The backend configuration of the message function is completed, and the next step is to actually 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.
There is usually a directory in your template directory.guestbook/index.html(or if your template uses a flattened structure, it might beguestbook.htmlThis file is used to render the form page for leaving messages. If you do not have this file, you can create one yourself.
In the template, you need to use 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 label will load all field information from the background configuration. Then, through{% for item in fields %}a loop, we can determineitem.TypeThe HTML input elements are dynamically generated according to the field type.item.NameUsed to display the Chinese name of the field,item.FieldNamewhich is the field name used when the form is submitted,item.RequiredDetermines whether to add HTML5'srequiredproperties.
If you have enabled the captcha feature in the background, you must make sure to add the captcha-relatedinputField and JavaScript code are also added to the form so that the verification code image can be dynamically loaded and verified.
of the form'sactionshould point to/guestbook.htmlThis is the default handling address for receiving message submissions from AnQiCMS.After submission, you can configure it on the backend to return an HTML page or JSON data for front-end processing.
processing after leaving a message
When the visitor fills in and submits the message, all information will be safely stored in your AnQiCMS backend's 'Website Message Management'.You can view all received messages there, perform operations such as review, reply, or delete, etc.
Common Questions and Answers (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 the AnQiCMS backend.Enter this page, you can view, manage, and reply to all received messages.
2. How to set options for single-choice, multiple-choice, or dropdown fields in the message form?in An