As an experienced website operations expert, I know the importance of the feedback form in website operations.It is not only a bridge of communication between users and the website, but also a key touchpoint for us to collect user feedback, improve service quality, optimize content strategy, and promote business growth.AnQiCMS as an efficient and customizable enterprise-level content management system provides strong and flexible support for the message function, enabling website administrators to easily build and manage various message scenarios.

AnQiCMS留言功能：A powerful tool for connecting users

AnQiCMS has optimized the website message function deeply, as mentioned in its update log, the system inv2.0.0-alpha3Version has added "Online Message Support" and "Custom Message Field Support", which lays a foundation for us to flexibly build different scenarios of message forms.This means that whether you want to collect product inquiries, cooperation intentions, customer complaints, or simple user feedback, AnQiCMS can meet your needs and can customize exclusive form fields according to the characteristics of your business.

The first step in correctly invoking the feedback form tags is to achieve these functions.AnQiCMS uses a syntax similar to Django template engine, allowing dynamic generation of comment forms in front-end templates with concise tags.

Correctly invoke the留言表单标签：guestbookThe mystery of

The core tag for invoking the留言表单in AnQiCMS isguestbook。It can automatically retrieve the form field you have configured in the background and provide it to the front-end template in a structured data format, allowing you to highly customize the presentation of the form.

guestbookBasic usage of the tag

guestbookLabels are typically used to wrap the iterative generation logic of forms, and its basic structure is as follows:

{% guestbook fields %}
    <!-- 在这里编写循环和表单元素 -->
{% endguestbook %}

Here,fieldsis a series generated byguestbookThe variable provided by the label, it contains all the form fields defined in the message form under 'Function Management' -> 'Website Message Management' in the AnQiCMS backend.fieldsA variable is an array (or list) object, you need to iterate over it byforloop and dynamically generate the corresponding HTML form elements based on each field's type.

Deep understandingfieldsThe structure of the variable

In{% for item in fields %}in the loop,itemRepresented by each independent comment field, it has a series of practical properties to help us build forms:

  • item.Name: This is the display name of the form field, such as “Your Name”, “Contact Information”, or “Message Content”. It will serve as the label text of the form element.
  • item.FieldName: This is the form field in HTMLnameThe value of the attribute, also the corresponding field name submitted to the background, for exampleuser_name/contact/contentetc. Custom fields will also have their correspondingFieldName.
  • item.Type: This property is crucial, it determines which type of HTML input box you should render. AnQiCMS supports multiple types, including:
    • text(Single-line text input box)
    • number(Number Input Box)
    • textarea(Multi-line Text Input Box)
    • radio(Single Selection)
    • checkbox(Multiple Selection)
    • select(Drop-down Selection)
  • item.RequiredA boolean value（trueorfalse），indicating whether the field is required. You can use it to add an attribute to the HTML input box or to provide corresponding validation hints on the frontend.required属性，or to provide corresponding validation hints on the frontend.
  • item.Content: 某些情况下，这可能是字段的默认值或placeholdertext.
  • item.ItemsWhenitem.TypeYesradio/checkboxorselectwhenitem.Items会是一个包含所有选项的数组。您需要再次循环这个ItemsArray to generate options.

构建留言表单的完整示例

UnderstoodfieldsAfter the structure of the variable, we can write a general template code to dynamically generate the comment form:

<form method="post" action="/guestbook.html" class="anqicms-guestbook-form">
  <input type="hidden" name="return" value="html"> {# 告诉后台期望的返回格式 #}

  {% guestbook fields %}
    {% for item in fields %}
      <div class="form-group">
        <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="required-star">*</span>{% endif %}</label>
        <div>
          {% if item.Type == "text" or item.Type == "number" %}
            <input type="{{ item.Type }}"
                   id="{{ item.FieldName }}"
                   name="{{ item.FieldName }}"
                   {% if item.Required %}required{% endif %}
                   placeholder="{{ item.Content }}"
                   class="form-control">
          {% elif item.Type == "textarea" %}
            <textarea id="{{ item.FieldName }}"
                      name="{{ 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 class="radio-inline">
                <input type="radio" name="{{ item.FieldName }}" value="{{ val }}" {% if forloop.First and item.Required %}checked{% endif %}> {{ val }}
              </label>
            {%- endfor %}
          {% elif item.Type == "checkbox" %}
            {%- for val in item.Items %}
              <label class="checkbox-inline">
                <input type="checkbox" name="{{ item.FieldName }}[]" value="{{ val }}"> {{ val }}
              </label>
            {%- endfor %}
          {% elif item.Type == "select" %}
            <select id="{{ item.FieldName }}" name="{{ item.FieldName }}" {% if item.Required %}required{% endif %} class="form-control">
              {%- for val in item.Items %}
                <option value="{{ val }}">{{ val }}</option>
              {%- endfor %}
            </select>
          {% endif %}
        </div>
      </div>
    {% endfor %}

    {# 留言验证码区域，如果开启了验证码，这里会插入验证码相关的HTML和JS #}
    <div id="captcha-container">
        {# 稍后会介绍验证码的集成 #}
    </div>

    <div class="form-group form-actions">
      <button type="submit" class="btn btn-primary">提交留言</button>
      <button type="reset" class="btn btn-default">重置</button>
    </div>
  {% endguestbook %}
</form>

Code analysis:

  1. <form>tags:method="post"andaction="/guestbook.html"It is the standard form submission method and target URL.returnHidden field used to inform the backend of the expected response format,htmlRepresents the rendered HTML page returned by the backend (usually form submission success/failure information),jsonThen return JSON data, convenient for JS to perform asynchronous processing.
  2. to iterate:{% for item in fields %}Circulate through all the message fields configured in the background.
  3. Conditional judgment:{% if item.Type == "text" or item.Type == "number" %}Whyif/elif/elsestructure based onitem.TypeThe value to render different HTML input elements, ensuring that the form is consistent with the field type configured on your backend.
  4. Attribute assignment:id="{{ item.FieldName }}",name="{{ item.FieldName }}",placeholder="{{ item.Content }}",requiredThe properties are dynamically generated, ensuring the semantics and functionality of the form.
  5. Option generation：Forradio/checkboxandselectType, an inner loop againitem.ItemsTo generate specific options.
  6. required-starEnglish: In order to enhance user experience, a star prompt is usually displayed next to required fields, as shown here.{% if item.Required %}<span class="required-star">*</span>{% endif %}English: Achieve.

English: The submission handling of the comment form

English: After the user fills in and submits the form, the data will be sent to/guestbook.htmlThis URL. AnQiCMS backend will receive and process this data. In addition to the fields you customize, the system will also automatically handle the following common fields:

  • user_name：The name of the留言者，usually a required field.
  • contact：The contact information of the留言者，such as mobile phone, email, WeChat, etc., usually also a required field.
  • content：The specific content of the留言，usually a required field.
  • returnAs previously mentioned, used to specify the data format returned by the background.

For convenience of submission, even if you have not created these fields in the background, you can manually add them in the form.user_nameandcontactThe input box. For example:

<form method="post" action="/guestbook.html">
  <input type="hidden" name="return" value="html">
  <div class="form-group">
    <label for="user_name">您的姓名<span class="required-star">*</span></label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称" class="form-control">
  </div>
  <div class="form-group">
    <label for="contact">联系方式<span class="required-star">*</span></label>
    <input type="text" id="contact" name="contact" required placeholder="请填写您的手机号或邮箱" class="form-control">
  </div>
  <div class="form-group">
    <label for="content">留言内容<span class="required-star">*</span></label>
    <textarea id="content" name="content" required placeholder="请在这里输入您的留言" rows="5" class="form-control"></textarea>
  </div>
  {# ... 其他自定义字段或验证码 ... #}
  <div class="form-group form-actions">
    <button type="submit" class="btn btn-primary">提交留言</button>
  </div>
</form>

Enhance form security: Integrated captcha

To prevent spam and malicious submissions, AnQiCMS supports integrating captcha functionality into the comment form. This requires you to perform a simple