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, especiallyguestbookLabel, we can easily create and display a dynamic, flexible comment form on the front-end page without writing complex backend code.

The core of building a flexible comment form:guestbookTag

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

In most cases, you will use this tag in the template directoryguestbook.htmlin the file, it is a default template file specifically used to display the online message page

UseguestbookThe basic syntax of the tag is very simple:

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

Here, fieldsIt is a custom variable name, which carries all the background configuration data of the message form fields.{% guestbook fields %}and{% endguestbook %}Between them, we can use a loop.fieldsVariables 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 background. During the loop, we can access it byitem(or any variable name) 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 system field name used for data binding when submitting forms, for exampleuser_name/contact.
  • item.TypeIt defines the type of form input box, AnQiCMS supports various types includingtext(Single-line text),number(Number),textarea(Multi-line text),radio(Single selection),checkbox(Multiple choice) andselect(Dropdown select).
  • item.Required: A boolean value indicating whether the field is required. If it istrue, you can add corresponding validation hints on the front end.
  • item.Content: Usually used as a text input box'splaceholder(Placeholder) text, or as the default value of the field.
  • item.Items：Whenitem.TypeWithradio/checkboxorselectthen,ItemsIt 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 dynamic message form code.

Here is a complete example code snippet that shows how to useguestbooktag to iterate over all fields defined in the background and dynamically generate HTML form elements based on field types

<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 aformTagged,actionproperty points to/guestbook.html(This is the default path for AnQiCMS to handle message submission),methodWithpost.

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

  • FortextandnumberType, generateinputTags, and settype/name/id/requiredandplaceholderProperty.
  • FortextareaType, generatetextareaTag, set the corresponding properties accordingly.
  • Forradio/checkboxandselectType, will nest another oneforto loop throughitem.ItemsArray, generate for each optioninputoroptionTag. We also added an extra one here.idandlabelTo improve accessibility.

In this way, regardless of how many fields are configured in the background or how the field types change, the front-end page can intelligently generate the corresponding form, realizing true dynamism.

Attention when submitting the form

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

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

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

In addition, you can also add a name forreturnThe hidden field is used to specify the format returned by the backend, for examplehtmlorjsonThis is very useful when you need to submit a form asynchronously through AJAX