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

This article will focus on how to correctly call the message form tag in the AnQiCMS website?This topic, provides a detailed explanation of the AnQiCMS comment form calling method, and shares some practical operation strategies to help you fully utilize the value of the comment form.

AnQiCMS message function: A powerful tool to connect with users

AnQiCMS has deeply optimized the website message function, as mentioned in its update log, the system is inv2.0.0-alpha3Version has already added "Online Message Support" and "Custom Message Field Support", which lays a foundation for us to flexibly build message forms for different scenarios.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 business characteristics.

The correct call of the留言表单label is the first step to achieve these functions.AnQiCMS uses a syntax similar to Django's template engine, allowing dynamic generation of comment forms in the front-end template with concise tags.

Properly call the message form tag:guestbookThe mystery of

In AnQiCMS, the core tag for calling the message form isguestbookIt can automatically retrieve the form fields you configure in the background and provide them to the front-end template in a structured data form, allowing you to highly customize the presentation of the form.

guestbookBasic usage of tags

guestbookTags are usually used to wrap the loop generation logic of forms, its basic structure is as follows:

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

here,fieldsis composed byguestbookThe variable provided by the label contains all the form fields defined in the AnQiCMS backend under "Function Management" -> "Website Message Management". ThisfieldsA variable is an array (or list) object, you need to iterate through itforand dynamically generate the corresponding HTML form elements based on the type of each field.

Deep understandingfieldsthe structure of the variable

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

  • item.Name: This is the display name of the form field, for example 'Your Name', 'Contact Information', or 'Message Content'. It will serve as the label text for the form element.
  • item.FieldNameThis is the form field in HTMLnameThe value of the attribute is also the field name corresponding to the field when submitted to the backend, for exampleuser_name/contact/contentetc. Custom fields will also have corresponding onesFieldName.
  • item.TypeThis property is crucial, it determines the type of HTML input box you should render. AnQiCMS supports various types, including:
    • text(Single-line text input box)
    • number(Numeric input box)
    • textarea(Multi-line text input box)
    • radio(Single choice)
    • checkbox(Multiple choice)
    • select(Drop-down choice)
  • item.Required: A boolean value (trueorfalse），indicating whether the field is required. You can use it to addrequiredAttribute, or perform the corresponding validation prompt on the front end.
  • item.Content: In some cases, this may be the default value of the field orplaceholder.
  • item.Items: Whenitem.TypeIsradio/checkboxorselectthen,item.Itemswill be an array containing all the options. You need to iterate over this array again.Itemsarray to generate options.

A complete example of building a message form

UnderstoodfieldsAfter the structure of the variable, we can then write a general template code to dynamically generate the message 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>Tag:method="post"andaction="/guestbook.html"It is the standard form submission method and target URL.returnHidden fields are used to tell the backend the response format you expect.htmlRepresents the HTML page rendered by the backend (usually form submission success/failure information),jsonthen returns JSON data, convenient for JS to handle asynchronously.
  2. Loop through:{% for item in fields %}Looped through all comment fields configured in the background.
  3. Conditional judgment:{% if item.Type == "text" or item.Type == "number" %}etcif/elif/elseStructure based onitem.Typeto render different HTML input elements, ensuring that the form is consistent with the field type configured in the background.
  4. Attribute assignment:id="{{ item.FieldName }}",name="{{ item.FieldName }}",placeholder="{{ item.Content }}",requiredThe properties are dynamically generated to ensure the semantics and functionality of the form.
  5. Option generation: Forradio/checkboxandselectType, nested loop againitem.Itemsto generate specific options.
  6. required-star: To enhance user experience, there is usually a asterisk prompt next to mandatory items, here through{% if item.Required %}<span class="required-star">*</span>{% endif %}Implementation.

留言表单的提交处理

After the user fills in and submits the form, the data will be sent to/guestbook.htmlThis URL. The 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 poster, usually a required field.
  • contact: The contact information of the poster, such as phone, email, WeChat, etc., usually a required field.
  • content: The specific content of the message, usually a required field.
  • returnAs mentioned before, it is 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_nameandcontactInput 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: integrate comment captcha

To prevent spam and malicious submissions, AnQiCMS supports integrating captcha functionality into the comment form. This requires a simple setup in the background.