How to display the留言表单 submitted by the user on the website?

AutoCMS provides a highly efficient and flexible mechanism to help you easily display and manage user comment forms on your website.Whether it is collecting user feedback, consulting, or simple interactive comments, Anqi CMS can enable you to quickly implement this function and customize it according to business needs.

Understand the Anqi CMS message function

In the background management interface of Anqi CMS, you can find the 'Website Message' option under the 'Function Management' menu.This is the core area where you manage all message-related settings, including viewing submitted messages, customizing form fields, and configuring the behavior after message submission.

The auto feature of the message form function in the Anqi CMS is a major highlight, supporting custom fields.This means that you can add various types of form elements based on your actual needs, such as text boxes, numeric input, multi-line text, radio buttons, checkboxes, and dropdown selections, etc.These custom fields will be dynamically identified and rendered on the front-end template, greatly enhancing the flexibility and applicability of the form.

In the website front-end template, the message form is usually placed on a dedicated message page, such as the default one.guestbook/index.htmlorguestbook.htmlIf you are developing a custom template,/templateCreate or edit these files in the template folder under the directory.

Display the message form in the template.

To display the message form on the website page, we need to rely on the Anqi CMS provided.guestbookLabel. This label will prepare all the message fields configured in the background for you, and store them in a file namedfields.

The following is an example of the code to dynamically generate the message form in the template:

<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 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>
            {% elif item.Type == "radio" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" title="{{val}}">
            {%- endfor %}
            {% elif item.Type == "checkbox" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}">
            {%- endfor %}
            {% elif item.Type == "select" %}
            <select name="{{item.FieldName}}">
                {%- for val in item.Items %}
                <option value="{{val}}">{{val}}</option>
                {%- endfor %}
            </select>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>

This code's core logic is to use{% for item in fields %}Loop through each comment field defined in the backend. Inside the loop, based onitem.Typevalue (for exampletext/textarea/radioauto"), dynamically rendering the corresponding HTML form elements. Each form element'snameattribute will be set toitem.FieldName, which is an important basis for the backend to recognize and process data.item.RequiredThe property is used to determine whether the field is required, and adds the correspondingrequiredproperties.

In addition to the dynamically generated custom fields, the comment form also needs several basic fields for user information submission:

• user_name: 用户的名称
• contact: 用户的联系方式（如手机、邮箱等）
• content: 留言的具体内容

These basic fields are not directly reflected in the dynamically generated code above. You can usually configure them in the background comment form settings. If you want these fields to be presented in a customized way, you can manually do so inguestbookTags added outside the loopinputortextareaMake sure theirnameproperties meet the backend requirements (for examplename="user_name").

For example, you can manually add basic username and contact information fields like this:

<form method="post" action="/guestbook.html">
  <input type="hidden" name="return" value="html"> {# 可选：指定后端返回html格式 #}
  <div>
    <label>您的姓名</label>
    <div>
      <input type="text" name="user_name" required placeholder="请填写您的姓名" autocomplete="off">
    </div>
  </div>
  <div>
    <label>您的联系方式</label>
    <div>
      <input type="text" name="contact" required placeholder="请填写您的手机号或邮箱" autocomplete="off">
    </div>
  </div>
  <div>
    <label>留言内容</label>
    <div>
      <textarea name="content" required placeholder="请输入您的留言" rows="5"></textarea>
    </div>
  </div>
  {# 动态生成的自定义字段，如同上述代码片段 #}
  {% guestbook fields %}
      {# ... 动态字段渲染逻辑 ... #}
  {% endguestbook %}
  <div>
      <button type="submit">提交留言</button>
      <button type="reset">重置</button>
  </div>
</form>

Message form submission and verification

message form'sactionshould point to/guestbook.htmland is usedPOSTMethod submission. When the user fills in and submits the form, the Safe CMS will automatically receive and process these data.

To enhance the security of the website and prevent spam submissions, it is strongly recommended to enable the CAPTCHA function for the comment form.

Add CAPTCHA (CAPTCHA)

1. Enable CAPTCHA in the backendFirst, you need to find and enable the comment captcha feature in the "Background Settings" -> "Content Settings" on the Anqi CMS backend.

2. Template Integration CaptchaIn your message form HTML, find the appropriate location (such as above the submit button) and insert the following code snippet.This code will be responsible for loading and displaying the captcha image, and handling the captcha refresh logic.

   <div style="display: flex; clear: both">
     <input type="hidden" name="captcha_id" id="captcha_id">
     <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
     <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
     <script>
       // 普通 JavaScript 版本
       document.getElementById('get-captcha').addEventListener("click", function (e) {
         fetch('/api/captcha')
                 .then(response => {
                   return 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>
     {# 如果您的网站使用 jQuery，可以使用以下代码替换上面的 script 标签内容 #}
     {#
     <script>
       // jQuery 版本
       $('#get-captcha').on("click", function (e) {
         $.get('/api/captcha', function(res) {
           $('#captcha_id').attr("value", res.data.captcha_id)
           $('#get-captcha').attr("src", res.data.captcha)
         }, 'json')
       })
       $('#get-captcha').click();
     </script>
     #}
   </div>
   

After integrating this code, your message form will require users to enter a captcha and will verify it upon submission, thereby effectively reducing interference from spam information.

Summary

Through the above steps, you have successfully displayed a fully functional and customizable user message form on the Anqi CMS website.The flexible content model and powerful template tags of AnQi CMS make this process intuitive and efficient.Using the convenient management features of the background, you can easily collect and respond to valuable suggestions and opinions from users, thereby better interacting with website visitors.

---

Common Questions (FAQ)

Q1: I want to customize the message form fields and display them on the front page, how should I operate?A1: You can in the