How to display the message form submitted by users on the website?

AnQi CMS provides an efficient and flexible mechanism to easily display and manage user message forms on your website.Whether it is to collect user feedback, consult, or simple interactive messages, Anqi CMS can quickly help you achieve this function and customize it according to business needs.

Learn about the Anqi CMS message function

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

The AnQi CMS message form feature has a major highlight in supporting custom fields.This means you can add various types of form elements as needed, such as text boxes, number inputs, multi-line text, radio buttons, checkboxes, and dropdown selections.These custom fields are dynamically recognized and rendered in the front-end template, greatly enhancing the flexibility and applicability of the form.

In the website front-end template, the comment form is usually placed on a special comment page, such as the default one.guestbook/index.htmlorguestbook.htmlIf you are developing a custom template, you can in the file./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 field information you configure in the background and store them in a namefields.

The following is an example of code to dynamically generate a 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>

The core logic of this code is to use{% for item in fields %}Loop through each field defined in the background comments. Inside the loop, based onitem.Typethe value (for exampletext/textarea/radioDynamic rendering of the corresponding HTML form elements. Each form element'snameattribute is set toitem.FieldName. This is an important basis for the backend to recognize and process the data.item.RequiredThe attribute is used to determine whether the field is required and to add the correspondingrequiredProperty.

In addition to the dynamically generated custom fields, the message form also needs several basic fields for users to submit information:

• user_name: User's Name
• contact: User's Contact Information (such as phone, email, etc.)
• content: Specific Content of the Message

These basic fields are not directly reflected in the dynamically generated code above. Typically, you can configure them in the background message form settings. If you want these fields to be presented in a customized way, you can manually do so inguestbookAdd these outside the label loopinputortextareaelements, making sure theirnameproperties meet 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>

The submission and verification of the message form

The message form'sactionattribute should point to/guestbook.html, and usePOSTMethod submission. After the user fills in and submits the form, Anqi 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 message form.

Add CAPTCHA (CAPTCHA)

1. Enable CAPTCHA in the backgroundFirst, you need to find and enable the comment verification code feature in the 'Background Settings' -> 'Content Settings' of the Anqi CMS background.

2. Template integrated verification codeIn your comment form HTML, find the appropriate location (such as above the submit button) and insert the following code snippet.This code is responsible for loading and displaying the captcha image, and handling the refresh logic of the captcha.

   <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 comment form will require users to enter a captcha and verify it upon submission, thereby effectively reducing interference from spam.

Summary

By following these steps, you have successfully displayed a fully functional and customizable user message form on the Anqi CMS website.The flexible content model of Anqi CMS and the powerful template tags make this process intuitive and efficient.Take advantage of the convenient management features of the backend, you can easily collect and respond to valuable feedback and suggestions from users, thereby better interacting with website visitors.

Frequently Asked Questions (FAQ)

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