In website operation, the message form is an important channel for interacting with users and collecting valuable information.To ensure that we can collect sufficient complete and useful data, such as users' contact information or specific requirements, it is particularly important to set some fields in the form as 'required fields'.As an experienced website operation expert, I will guide you to deeply understand how to easily achieve this goal in AnQiCMS, making your message form more intelligent and efficient.
Overview of the Anqi CMS message form function
AnQiCMS as an efficient enterprise-level content management system has fully considered various operational needs from the beginning of its design.Its leave message function not only allows users to submit information, but also supports flexible custom fields.This means you can add multiple fields such as name, phone, email, and specific requirements description according to your business scenario.And these custom fields are the core of being able to set 'required'.v2.0.0-alpha3Version already supports online messages and custom message fields, laying the foundation for flexible configuration.
Core steps: Set the field as required in the background.
Set a certain field in the AnQiCMS message form to be required, the whole process is intuitive and easy to operate. You don't need to write any code, just a few simple configurations in the backend management interface:
- Login to AnQiCMS backendFirstly, log in to the AnQiCMS backend management system using your administrator account and password.
- Navigate to the function managementIn the left function menu, find and click on the item 'Function Management'.Here is a collection of many practical tools for website operation, including today's main character - 'Website Message Management'.
- Enter the website message managementIn the "Function Management通常，这里会显示所有已提交的留言信息，同时也会有管理留言表单字段的入口。
- Manage message fieldsIn the website message management page, you will find a section for managing custom message fields.Here will list all the custom fields in your current form.You can choose to edit an existing field, or click 'Add new field' to create a completely new field.
- Set the field as required：Whether you are editing an existing field or creating a new field, you will see an option named 'Is Required' in the field configuration interface.This option is usually presented in the form of a checkbox or a switch.
- To set this field as required, you justcheck or enablethis 'Is Required' option.
- The underlying mechanism of AnQiCMS will automatically verify whether this field is empty when you submit form data.
- Save and take effect：After setting the "RequiredThus, your changes will take effect and be reflected in the frontend留言表单 form.
Through these steps, you have successfully set the specified form field as required in the AnQiCMS backend.
How does the front-end template respond to the required setting?
The elegance of AnQiCMS lies in the high coordination between its front-end and back-end.How does the front-end template perceive and display the change when you mark a field as required in the background?guestbookTags and theirRequiredproperties.
In the template file,guestbookThe label is used to cyclically output the fields of the comment form. Each field can be accessed in the template through aitemvariable, and thisitemvariable containingName(form name),FieldName(form variable),Type(Form type) information, including the crucialRequiredproperty. When you set a field as required in the background, the correspondingitem.Requiredvalue will be displayed on the front-end templatetrue.
Template developers usually write code like this to dynamically generate form items:
<form method="post" action="/guestbook.html">
{% guestbook fields %}
{% for item in fields %}
<div>
<label>{{item.Name}}</label>
<div>
{% if item.Type == "text" or item.Type == "number" %}
<input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" autocomplete="off">
{% elif item.Type == "textarea" %}
<textarea name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
{# 其他字段类型如radio, checkbox, select 的处理类似 #}
{% endif %}
</div>
</div>
{% endfor %}
{# 提交按钮等 #}
<button type="submit">提交留言</button>
</form>
The key to this code is:{% if item.Required %}required lay-verify="required"{% endif %}. It checks if the current field is set as required, and if so, it will automaticallyinputortextareaAdd HTML5 to the form elementsrequiredproperties andlay-verify="required"Such front-end validation marking (this is usually used for client-side validation in front-end frameworks like Layui).This way, before users submit the form, the browser will prompt them to fill in this required field, greatly enhancing user experience and ensuring data integrity.
Actual operation and precautions
Setting the message form fields to required not only improves user experience, but also significantly enhances the quality of the collected data by clearly informing users which information is necessary, thereby avoiding repeated submissions due to missing information.This means you will obtain more effective and reliable customer leads or feedback, providing a solid foundation for subsequent operational decisions.
AnQiCMS's Go backend will also perform server-side validation on required fields when receiving form submissions, even if the front-end validation is bypassed. This ensures the integrity of the data and further guarantees the security of the data and the correctness of the business logic.
Through the powerful and flexible backend configuration of AnQiCMS and the collaboration with front-end templates, you can easily build a message form that meets your business needs and efficiently collect key information.
Common Questions (FAQ)
Q1: I have set the field as required in the background, but the asterisk indicating the field is required or the mandatory fill is not displayed on the front-end form. What is the problem?A1: This is usually due to your frontend template not handling it correctlyguestbooktagsitem.RequiredThe property caused. Please check your comment form template (usuallyguestbook/index.html) to ensure that it includes something similar when rendering form fields{% if item.Required %}required{% endif %}The code snippet, so that HTML is dynamically added when the field is requiredrequiredProperty. If your website uses front-end frameworks such as Layui, you also need to ensurelay-verify="required"The check mark has also been correctly added.
Q2：Can the default message fields of AnQiCMS (such as "UsernameA2：AnQiCMS的文档中主要展示了自定义字段的灵活性。For the default comment field, they are usually designed as core information and are mandatory by default to ensure the usability of the basic comment function.If you wish to modify the required status of these default fields, this may not be directly provided through the backend interface options, but rather requires deeper template or system configuration adjustments, or can be achieved by replacing default fields with custom fields.Suggest that you check the "Website Message Management" in the background to see if there is any related configuration, or consider using custom fields to replace it.
Q3：Set the required field after, if the user does not fill in and submit, what kind of prompt will there be?A3：If your front-end template is correctly processedrequiredProperty, when the user tries to submit a form without filling in required fields, modern browsers will display built-in prompts according to the HTML5 specification (for example, "Please fill in this field").If your website integrates front-end frameworks such as Layui, it usually has more aesthetic and customizable prompt styles.Additionally, the backend of AnQiCMS will also perform a second verification, and if the required fields are indeed missing, it will usually return an error message to the user.