In AnQiCMS, building a fully functional message form is an important way to interact effectively with users, collect feedback, or obtain potential customer information. It is pleasing to see that with its powerful template tag system, especiallyguestbookLabels, we can easily create and display a dynamic, flexible message form on the front page without writing complex backend code.

The core of building a flexible message form:guestbooktags

guestbookThe label is a powerful tool designed by AnQiCMS for the online message feature.It no longer needs us to manually define each field of the form, but acts like an intelligent assistant, directly reading all field information from the preset留言表单 configuration in the background, and then automatically rendering it to the front page.This means that any structural adjustments (such as adding, deleting, or modifying field types) you make to the comment form in the background can be reflected in real-time and dynamically on the front end, greatly improving development and operation efficiency.

In most cases, you will find this label in the template directory.guestbook.htmlIt is used in the file to display the default template file for the online comment page.

UseguestbookThe basic syntax of the tag is very concise:

{% guestbook fields %}
    {# 在这里循环输出表单字段 #}
{% endguestbook %}

Here,fieldsIt is a variable name we define, which carries all the form field data of the comment table in the background.{% guestbook fields %}and{% endguestbook %}Between them, we can use a loop.fieldsThe variable is used to dynamically generate the various input items of the form.

Understand the composition of form fields in depth

fieldsA variable is an array that contains multiple form field objects, each representing a form item you have set up in the backend. During the loop, we can useitem(or any variable name you define) to access the detailed properties of each field:

  • item.NameThis is the display name of the form field, which is the label text that users see on the form, such as 'Your Name', 'Contact Information'.
  • item.FieldNameThis is the field name recognized internally by the system, used for binding the key name of data submitted through the form, for exampleuser_name/contact.
  • item.TypeIt defines the type of the form input box, AnQiCMS supports multiple types, includingtext(Single-line text),number(Number),textarea(Multi-line text),radio(Single choice),checkbox(Multiple choice) andselect(Dropdown selection).
  • item.RequiredAn English translation: A boolean value indicating whether this field is required.trueYou can add corresponding validation hints on the front end.
  • item.ContentIt is usually used as a text input box.placeholderThe text, or as the default value of the field.
  • item.Items: whenitem.Typeresponse forradio/checkboxorselectwhenItemsIt will be an array, containing all the available option values.

Mastered these properties, we can build a dynamic form that can adapt to changes in background configuration.

Gradually build the code for a dynamic message form

Below is a complete example code snippet that demonstrates how to useguestbookTags to traverse all the fields defined in the background and dynamically generate HTML form elements based on the field type

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
        <div>
            <label for="{{ item.FieldName }}">{{ item.Name }}</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 }}" autocomplete="off">
                {% elif item.Type == "textarea" %}
                <textarea id="{{ item.FieldName }}" name="{{ item.FieldName }}" 
                          {% if item.Required %}required{% endif %} 
                          placeholder="{{ item.Content }}" rows="5"></textarea>
                {% elif item.Type == "radio" %}
                    {%- for val in item.Items %}
                    <input type="{{ item.Type }}" id="{{ item.FieldName }}_{{ loop.index }}" name="{{ item.FieldName }}" value="{{ val }}" 
                           {% if item.Content == val %}checked{% endif %}>
                    <label for="{{ item.FieldName }}_{{ loop.index }}">{{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "checkbox" %}
                    {%- for val in item.Items %}
                    <input type="{{ item.Type }}" id="{{ item.FieldName }}_{{ loop.index }}" name="{{ item.FieldName }}[]" value="{{ val }}" 
                           {% if item.Content contains val %}checked{% endif %}>
                    <label for="{{ item.FieldName }}_{{ loop.index }}">{{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "select" %}
                <select id="{{ item.FieldName }}" name="{{ item.FieldName }}">
                    {%- for val in item.Items %}
                    <option value="{{ val }}" {% if item.Content == val %}selected{% endif %}>{{ val }}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        {# 验证码区域，如果后台开启了验证码，这里需要添加 #}
        {# 具体的验证码集成代码请参考 FAQ 部分或相关文档 #}

        <div>
            <div>
                <button type="submit">提交留言</button>
                <button type="reset">重置</button>
            </div>
        </div>
    {% endguestbook %}
</form>

This code is first wrapped in aformin the tag,actionthe attribute points to/guestbook.html(This is the default path processed by AnQiCMS for message submission)methodresponse forpost.

InforIn the loop, we useif...elif...elsestructural judgmentitem.Typeto generate different types of form elements:

  • Fortextandnumbertype, generateinputTags, and settype/name/id/requiredandplaceholderproperties.
  • Fortextareatype, generatetextareaLabel, set the corresponding properties accordingly.
  • Forradio/checkboxandselectType, it will nest another one.forin a loop to iterate overitem.ItemsArray, generate for each option.inputoroptionLabel. Here we also add an extra one.idandlabel

Through this method, regardless of how many fields are configured on the backend or how the field types change, the front-end page can intelligently generate the corresponding form, realizing true dynamicization.

Submit form precautions

When the user fills in and submits the form, the data will be sent toactionSpecified by properties/guestbook.htmlPath. AnQiCMS will automatically receive and process these data.

There are some standard fields, even if you have not set them explicitly in the background, it is recommended to include them in the form, or ensure that your custom fields cover similar functions:

  • user_name: The name of the leaver.
  • contact：The contact information of the poster (such as mobile phone, email, WeChat, etc).
  • content：The specific content of the message.

In addition, you can also add a name ofreturnThe hidden field specifies the format returned by the backend, for example,htmlorjsonwhich will be very useful when you need to submit a form asynchronously through AJAX,