How to display a message form on the AnQiCMS website and support the display of custom fields?
On the day when digital operation is 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) fully 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 requirements.
Step 1: Configure the custom fields of the message form
To enable the form to collect more personalized information, we need to configure it first in the Anqi CMS backend.
Enter the AnQi CMS backend, find the "Function Management" menu, and select "Website Messages".Here, you will see a management message area. Anqi CMS allows you to add custom fields to the message function, which means you can collect specific information such as 'service type', 'product number', 'industry', etc. according to your actual business needs.
When adding custom fields, you can choose different field types to meet the diverse needs of data input:
- Single-line text (text): Suitable for collecting brief text information, such as names, company names.
- Number (number)Used to collect numeric information, such as phone numbers, quantities, etc.
- Multi-line text (textarea)Suitable for collecting longer descriptive text, such as detailed feedback content.
- Single choice (radio)：Provide preset options, the user can only select one item.
- Multiple selection (checkbox)：Provide preset options, the user can select multiple items.
- Dropdown selection (select)：Present preset options in the form of a dropdown menu, the user can select one.
When configuring each custom field, you can specify itsParameter Name(for template calls),field name(displayed to the user's label),Mandatory?as well asDefault value or optionThese detailed settings ensure the practicality of the form and the accuracy of data collection.For example, you can add a dropdown field named "service_type" with preset options such as "pre-sales consultation", "technical support", etc., so that users can quickly classify their message intent.
Step two: Display the message form on the website page
After completing the field configuration on the backend, we need to display this dynamic feedback form on the front page of the website.
The template mechanism of AnQi CMS is very flexible. According to the convention, the template files of the online message form are usually located at/templateUnder the directoryguestbook/index.htmlorguestbook.html. You can write or modify the HTML structure and style of the forms in these files.
To dynamically display the message field you configure in the background, Anqi CMS provides a very convenient template tag:{% guestbook fields %}...{% endguestbook %}. This tag will get all the configured comment fields and encapsulate them in an array object namedfieldsfor iteration in the template.
The following is usedguestbookThe tag dynamically constructs 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 traverse each custom field you add in the background, and according toitem.Typegenerate the corresponding HTML input elements.item.NameUsed to display field labels,item.FieldNameAs the input box'snameProperty,item.RequiredControls whether to add HTML5'srequiredAttributes for front-end validation.
Please note, the form'sactionattribute should point to/guestbook.htmlThis is the default interface for Anqi CMS to handle message submission. In addition to custom fields, the message form usually requires several standard fields to successfully submit:user_name(Name of the person leaving a message),contact(Contact information) andcontent(Leave a message). These fields must be included in the form, or handled through default values or other means, even if they are not added as custom fields in the background.
Step 3: 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 the captcha mechanismThe prevention of malicious submissions and spam is an important part of the operation of a message board.The AnQi CMS is built-in with captcha functionality. After enabling the captcha for comments in the background, you need to add the relevant HTML and JavaScript code to the template.This usually includes an image captcha display<img>Labels, as well as two hiddeninputfield (captcha_idandcaptchaAnd a visible text input box for the user to enter the captcha.By writing a JavaScript code, you can implement the function of refreshing the captcha by clicking on the image, enhancing security.
2. Friendly submission feedback:
It is crucial to provide timely feedback after users submit their comments. You can add a hidden field to the form<input type="hidden" name="return" value="html">orvalue="json"Tell the background what format you want the submitted results to be returned in. If set tohtmlThe background will render a page to display success or failure information; if set tojsonIt makes it convenient for you to handle feedback without refreshing the page using JavaScript, achieving a smoother user experience.
By following these steps, you can not only display a fully functional message form on the Anqi CMS website, but also flexibly collect various user data according to business needs and conveniently manage this information through the backend.
Frequently Asked Questions (FAQ)
How to manage user submitted message content?
All user submitted content through the message form can be managed centrally in the Anqi CMS backend.Just log in to the back end, navigate to the 'Function Management' under the 'Website Message' module.Here, you can view the detailed information of each comment, including the commenter, contact information, comment content, and all custom field data you set.In addition, Anqi CMS usually also supports the export function of message content (such as exporting to CSV files), which is convenient for you to perform data analysis or archiving.For messages that are non-compliant or spam, they can also be deleted or marked here.
If I don't want to use all the custom fields configured, can I only display some?
Absolutely. The custom fields you configure in the background are optional field sets, but in the frontend template