When using AnQiCMS to manage website content, the online message function is undoubtedly an important way to interact with visitors, collect feedback, or potential customer information.In addition to basic name, contact information, and message content, many times we also need to collect more specific and personalized information, such as 'Your project budget', 'The type of service you are interested in', or 'The expected contact time' and so on.The Aiqi CMS provides flexible custom message field functionality, allowing us to easily meet these needs.How can I get and elegantly display these custom form fields on the website's front page?

This usually involves modifying template files, by using the template tags built into the Safe CMS, we can display the custom fields defined in the backend to the users. The core lies in understandingguestbookThe working principle of the tag and its returned data structure.

UtilizeguestbookTag to get custom fields

To display custom comment form fields, you first need to add them to your comment page template (usually)guestbook/index.htmlOr you custom message template file) useguestbook标签。This tag will get all the custom form fields you configure in the "Function Management" -u003e "Website Messages" section of the AnQi CMS backend.

The label usage is very concise:

{% guestbook fields %}
    {# 你的表单字段渲染逻辑将在这里 #}
{% endguestbook %}

Here,fieldsis a series generated byguestbookThe variable created by the label, it is an array containing all the information of the custom form fields. Next, we can traverse thisfieldsArray, dynamically renders each form field.

Understand the data structure of form fields and dynamically renders.

fieldsEach element in the array represents a custom field, which we call it.itemEachitemIt includes some key properties that help us decide how to render it:

  • item.Name: This is the display name of the field, which is the label text that users see on the form, such as "Your Name
  • item.FieldName: This is the unique identifier for the form field, which will be used as the name for the HTML input box,nameThe backend will receive the data according to this name when the form is submitted.
  • item.Type: This is the field type, which determines what kind of HTML input element it should be rendered as, for exampletext(Single-line text),number(Number),textarea(Multi-line text),radio(Single choice),checkbox(Multiple choice) orselect(Dropdown selection).
  • item.Required: A boolean value indicating whether the field is required.
  • item.Content: Fortext/number/textareathe field of type, this is usually their default value or placeholder text (placeholder).
  • item.Items: Forradio/checkbox/selectType field, this is an array that contains all the available option values.

With this information, we canforin a loop, according toitem.Typeto useiforelifThe statement is used to generate the corresponding HTML input box.

Below is a commonly used code example that demonstrates how to traversefieldsVariables and dynamically render different types of custom fields, while also including the default form required by the AITCMS comment formuser_name/contactandcontentFields:

<form method="post" action="/guestbook.html">
    <input type="hidden" name="return" value="html"> {# 可选：指定后台返回HTML或JSON #}

    {# 安企CMS留言表单默认字段 #}
    <div>
        <label for="user_name">您的称呼</label>
        <input type="text" id="user_name" name="user_name" required placeholder="请填写您的称呼" autocomplete="off">
    </div>
    <div>
        <label for="contact">联系方式</label>
        <input type="text" id="contact" name="contact" required placeholder="请填写您的手机号或微信" autocomplete="off">
    </div>
    <div>
        <label for="content">留言内容</label>
        <textarea id="content" name="content" required placeholder="请填写您的留言内容" rows="5"></textarea>
    </div>

    {# 动态渲染自定义字段 #}
    {% guestbook fields %}
        {% for item in fields %}
            <div>
                <label for="{{item.FieldName}}">{{item.Name}}</label>
                {% 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="3"></textarea>
                {% elif item.Type == "radio" %}
                    {% for val in item.Items %}
                        <label>
                            <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" {% if item.Required and loop.first %}required{% endif %}> {{val}}
                        </label>
                    {% endfor %}
                {% elif item.Type == "checkbox" %}
                    {% for val in item.Items %}
                        <label>
                            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" {% if item.Required and loop.first %}required{% endif %}> {{val}}
                        </label>
                    {% endfor %}
                {% elif item.Type == "select" %}
                    <select id="{{item.FieldName}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
                        {% for val in item.Items %}
                            <option value="{{val}}">{{val}}</option>
                        {% endfor %}
                    </select>
                {% endif %}
            </div>
        {% endfor %}
    {% endguestbook %}

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

In the above code, we first hard-coded the default security CMS that will be processed by.user_name/contactandcontentThen, through the.{% guestbook fields %}tag to get the custom field, and then through aforto iteratefieldsArray. Inside the loop, we useif/elifstructure based onitem.Typeto render different types of form elements. For example,textandnumber<input type="text/number">,textarea<textarea>. Forradio/checkboxandselectwe will also further traverseitem.ItemsAn array generates its own options.

It is worth noting that,checkboxof typenameproperties usually need to be prefixed with[]a suffix (such asname="FieldName[]"), so that multiple selected values can be received when submitting the form. In addition,item.RequiredThe attribute is used to add HTML5'srequiredattribute to implement simple client validation.

Form submission注意事项

message form'sactionshould point to/guestbook.html，andmethodmust bepost. In addition to custom fields, make sure the page includesuser_name/contactandcontentThese three CMS default message fields, even if you want them to be hidden or pre-filled in other ways.If these core fields are missing, the message may not be successfully submitted.<input type="hidden" name="return" value="html">to control whether the backend returns an HTML page or JSON data after processing the message.

By using the above method, you can flexibly display and collect various custom message information on the front-end page according to the backend configuration, which greatly enhances the functionality and data collection capability of the website's interaction with visitors.

Common Questions (FAQ)

  1. I have configured the custom message field on the Anqi CMS backend, but it does not display on the front page. Why is that?This is usually because you haven't added or used the comment template file correctly on the website{% guestbook fields %}Label to dynamically render these fields.The custom field configuration of the AnQi CMS backend only defines the structure and properties of the fields, but will not automatically insert them into the front-end page.template/你的模板名/guestbook/index.html），and use the example code in the articleguestbookto iterate over and render these fields.

  2. My comment form submission does not save the data of the custom field, or the data saved to the background is incorrect, how should I investigate?First, make sure your formactionproperties point to/guestbook.htmlandmethodresponse forpost。Next, check each custom field's HTMLinput/textareaorselectTagsnameproperty value matches the custom field settings in the Anqi CMS backend.FieldNameentirely consistent (including case). For multi-select fields (checkbox），ensure thatnameThe attribute used is[]Suffix (for example,name="your_custom_field_name[]"）。In addition，also confirmuser_name/contactandcontentthese three fields required by the default security CMS have been submitted correctly.

  3. If I only want to display a few custom fields in the backend, instead of all of them, how can I operate?Of course, you can. The code provided in the article is a universal example of dynamic rendering of all fields. If you only want to display a few specific custom fields, you can choose not to useforto iteratefieldsArray, instead of defining it manually.item.FieldNameHardcode the fields you need. For example, if you have a custom field,项目预算it is:FieldNameresponse forproject_budgetYou can write it like this in the template:

    {% guestbook fields %} {# 仍然需要此标签来获取所有字段信息 #}
    {# 假设你知道 project_budget 字段在 fields 数组中的位置或其 FieldName #}
    {# **做法是过滤 fields 数组或者直接使用已知 FieldName 查找 #}
    {% set project_budget_field = null %}
    {% for item in fields %}
        {% if item.FieldName == "project_budget" %}
            {% set project_budget_field = item %}
            {% break %} {# 找到后退出循环 #}
        {% endif %}
    {% endfor %}


    {% if project_budget_field %}
        <div>
            <label for="{{project_budget_field.FieldName}}">{{project_budget_field.Name}}</label>
            <input type="{{project_budget_field.Type}}" id="{{project_budget_field.FieldName}}" name="{{project_budget_field.FieldName}}" {% if project_budget_field.Required %}required{% endif %} placeholder="{{project_budget_field.Content}}">
        </div>
    {% endif %}
{% endguestbook %}

    This method is slightly more complex, but provides the greatest flexibility, allowing you to only display or customize the rendering of specific fields.