How to retrieve and display custom form fields in AnQiCMS comment form?

When using AnQiCMS to manage website content, the online message function is undoubtedly an important way to interact with visitors, collect feedback, or gather information about potential customers.In addition to the basic name, contact information and message content, we often 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.AnQi 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 front page?

This usually involves modifying template files, by using the template tags built into Anqí CMS, we can display the custom fields defined in the background to the users. The core is to understandguestbookThe principle of the tag and the data structure it returns.

UtilizeguestbookTag to get custom field

To display custom message form fields, you first need to add them to your message page template (usuallyguestbook/index.htmlOr use the message template file you customizedguestbookThe tag will retrieve all the custom form fields you configure in the "Function Management" -> "Website Messages" section of the Anqi CMS backend.

The label usage is very concise:

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

Here, fieldsis composed byguestbookThe variable created by the label is an array containing information about all custom form fields. Next, we can iterate over thisfieldsAn array that dynamically renders each form field.

Understand the data structure of form fields and render them dynamically

fieldsEach element in the array represents a custom field, which we callitem. EachitemIt 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”, “Message Subject”, etc.
• item.FieldNameThis is the unique identifier for the form field, which will be used as the HTML input box'snameattribute value, and the backend will receive the data according to this name when the form is submitted.
• item.TypeThis is the field type, which determines which HTML input element it should render, for exampletext(Single-line text),number(Number),textarea(Multi-line text),radio(Single selection),checkbox(Select multiple) orselect(Dropdown select).
• item.Required: A boolean value indicating whether the field is required.
• item.ContentFortext/number/textareaThe field type, this is usually their default value or placeholder text.
• item.ItemsForradio/checkbox/selectThe type field, this is an array that includes all available option values.

With this information, we can work with oneforiterate over, based onitem.Typedifferences, usingiforelifA statement to generate the corresponding HTML input box.

Here is a commonly used code example that shows how to traversefieldsVariables and dynamically render different types of custom fields, while also including the default required Anqi CMS message formuser_name/contactandcontentField:

<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 code above, we first hard-coded the fields that AnQi CMS will handle by defaultuser_name/contactandcontentThen, through the{% guestbook fields %}tag to get the custom fields, and then through aforLoop throughfieldsAn array. Within the loop, we utilizeif/elifStructure based onitem.Typevalues to render different types of form elements. For example,textandnumbertype usage<input type="text/number">,textareatype usage<textarea>.radio/checkboxandselecttype, we will further traverseitem.Itemsarrays to generate their respective options.

It should be noted that,checkboxType ofname属性通常需要加上[]suffixes likename="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-side validation.

Form submission注意事项

The message form'sactionattribute should point to/guestbook.htmlandmethodMust bepost. In addition to custom fields, make sure that the page includesuser_name/contactandcontentThese are the default message fields of the Anqi CMS, even if you want them to be hidden or pre-filled in some other way.If these core fields are missing, the message may not be submitted successfully.You can also add a hidden field<input type="hidden" name="return" value="html">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 customized message information on the front-end page according to the background configuration, greatly enhancing the functionality and data collection ability of the website's interaction with visitors.

Frequently Asked Questions (FAQ)

1. Why is the custom message field I configured on the AnQi CMS backend not displayed on the front-end page?This is usually because you haven't added or used the website comment template file correctly{% guestbook fields %}Tags to dynamically render these fields. The custom field configuration in the Anqi CMS backend only defines the structure and properties of the fields, but does not automatically insert them into the front-end page.You need to manually edit the template file corresponding to the message page (for exampletemplate/你的模板名/guestbook/index.html），and use the sample code in the article，toguestbookLoop through and render these fields with the tag.

2. After submitting my comment form, the data of the custom fields is not saved, or the data saved to the background is incorrect, how should I investigate?First, make sure your formactionproperties point to/guestbook.htmlandmethodWithpostNext, check the HTML of each custom fieldinput/textareaorselectlabel'snameThe attribute value should match the custom field settings in the Anqi CMS backendFieldNameentirely (including case). For multi-select fields (checkboxEnsure thatnameProperties used[]Suffix (for example,name="your_custom_field_name[]"In addition, also confirmuser_name/contactandcontentThese three default fields required by Anqi CMS have been submitted correctly.

3. How can I display only a few custom fields in the background instead of all?Of course you can. The code provided in the article is a universal example of dynamically rendering all fields. If you only want to display a few specific custom fields, you can choose not to useforLoop throughfieldsArray, but is directly defined according to the backenditem.FieldNameto hard-code the fields you need. For example, if you have a项目预算custom field, itsFieldNameWithproject_budget, you can directly write it in the template like this:

   {% 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 a bit more complex, but it provides the greatest flexibility, allowing you to only display or customize the rendering of specific fields.