Today, as digital operation becomes increasingly important, the website message board is not only an important bridge for user interaction with the website, but also a key channel for collecting user feedback and understanding market demand.AnQiCMS (AnQiCMS) understands this need, providing flexible and powerful form display and custom field support, allowing you to easily create an interactive platform that meets your business needs.
Step 1: Configure the custom fields of the message form
To enable the message form to collect more personalized information, we need to first configure it in the Anqi CMS backend.
Enter the Anqi CMS backend, find the "Function ManagementHere, you will see a management comment area.The Auto CMS allows you to add custom fields to the message feature, which means you can collect specific information such as 'service type', 'product number', and 'industry' in addition to the conventional name, contact information, and message content, according to your actual business needs.
When adding custom fields, you can choose different field types to meet diverse data input needs:
- Single-line text (text): Suitable for collecting brief text information, such as names, company names.
- Number (number)：用于收集数字类信息，如电话号码、数量等。
- Multi-line text (textarea)：适合收集较长的描述性文字，如详细的反馈内容。
- Single choice (radio)：Provide preset options, the user can only select one.
- Multiple choice (checkbox)：Provide preset options, the user can select multiple.
- 下拉选择 (select)：Present preset options in a dropdown menu, user selects one.
When configuring each custom field, you can specify itsParameter name(for template calls),Field Name(displayed to users),Is requiredanddefault value or options.These detailed settings ensure the practicality of the form and the accuracy of data collection.For example, you can add a dropdown selection field named “service_type” with predefined options such as “Pre-sales consultation”, “Technical support”, etc., allowing users to quickly classify their message intentions.
Step 2: Display the comment form on the website page
Completed the backend field configuration, next we need to present this dynamic message form on the website's frontend page.
The template mechanism of AnQi CMS is very flexible. According to the convention, the template file of the online message form is usually located/templatethe directory.guestbook/index.htmlorguestbook.html. You can write or modify the HTML structure and style of the form in these files.
To dynamically display the message fields you configure in the background, Anqi CMS provides a very convenient template tag: English{% guestbook fields %}...{% endguestbook %}This tag will get all the configured message fields and encapsulate them in an array object namedfieldsfor you to iterate in the template.
The following usesguestbookLabel dynamically builds the basic structure of the form:
<form method="post" action="/guestbook.html">
<!-- 动态生成字段 -->
{% guestbook fields %}
{% for item in fields %}
<div class="form-group">
<label for="{{item.FieldName}}">{{item.Name}}</label>
<div>
{% if item.Type == "text" or item.Type == "number" %}
<input type="{{item.Type}}" name="{{item.FieldName}}" id="{{item.FieldName}}"
{% if item.Required %}required{% endif %} placeholder="{{item.Content}}" class="form-control">
{% elif item.Type == "textarea" %}
<textarea name="{{item.FieldName}}" id="{{item.FieldName}}"
{% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5" class="form-control"></textarea>
{% elif item.Type == "radio" %}
{% for val in item.Items %}
<label>
<input type="radio" name="{{item.FieldName}}" value="{{val}}" {% if loop.first %}checked{% endif %}> {{val}}
</label>
{% endfor %}
{% elif item.Type == "checkbox" %}
{% for val in item.Items %}
<label>
<input type="checkbox" name="{{item.FieldName}}[]" value="{{val}}"> {{val}}
</label>
{% endfor %}
{% elif item.Type == "select" %}
<select name="{{item.FieldName}}" id="{{item.FieldName}}" class="form-control">
{% for val in item.Items %}
<option value="{{val}}">{{val}}</option>
{% endfor %}
</select>
{% endif %}
</div>
</div>
{% endfor %}
{% endguestbook %}
<!-- 提交按钮 -->
<div class="form-group">
<button type="submit" class="btn btn-primary">提交留言</button>
<button type="reset" class="btn btn-secondary">重置</button>
</div>
</form>
In this example,for item in fieldsThe loop will iterate over each custom field you add in the background, anditem.Typegenerate the corresponding HTML input elements.item.NameUsed to display field labels,item.FieldNameAs input box,nameattributes,item.RequiredWhether to add HTML5's,requiredAttribute for front-end validation.
Please note, the form'sactionshould point to/guestbook.htmlThis is the default interface for handling message submission in Anqi CMS. In addition to custom fields, the message form usually requires the following standard fields to be successfully submitted:user_name（Name of the留言者）、contact（Contact information）andcontent(Leave a message). These fields need to be included in the form even if they are not added as custom fields in the background, or handled through default values and other means.
Third step: Enhance the user experience and security of the form
To improve the user experience and ensure data security, you can also further optimize the message form.
1. Integrate captcha mechanismPreventing malicious submissions and spam is an important part of the guestbook operation.The auto CMS is built-in with captcha function.When enabling the comment captcha in the background, you need to add the related HTML and JavaScript code for the captcha in the template.<img>Label, as well as two hiddeninputfields (captcha_idandcaptcha）and a visible text input box for the user to enter the captcha.By a piece of JavaScript code, you can implement the function of refreshing the captcha when clicking on the picture, enhancing security.
2. Friendly submission feedback:
It is crucial to provide timely feedback after users submit comments. You can add a hidden field in the form<input type="hidden" name="return" value="html">orvalue="json"，tells the backend the format in which the submitted result should be returned. If set tohtml，the backend will render a page to display success or failure information; if set tojsonThen it is convenient for you to handle feedback through JavaScript without refreshing the page, realizing a more smooth user experience.
By following these steps, you can not only display a fully functional feedback form on the Anqi CMS website, but also flexibly collect various user data according to business needs, and conveniently manage this information through the back end.
Common Questions and Answers (FAQ)
1. How to manage user submitted message content?
All user submitted content through the message form can be managed uniformly in the Anqi CMS backend.Just log in to the backend, navigate to the "Website Messages" module under "Function Management".Here, you can view the detailed information of each message, including the message sender, contact information, message content, and all custom field data you have set.Additionally, the CMS often supports the export function of留言内容的导出功能（for example, exporting as a CSV file），which is convenient for you to perform data analysis or archiving.For posts that are non-compliant or spam, you can also delete or mark them here.
2. If I don't want to use all the configured custom fields, can I only display a part of them?
It is completely. The custom fields you configured in the backend are optional field sets, but in the frontend template