In AnQiCMS, we often need to provide visitors with a convenient interactive experience, where the message form is an important channel for collecting user feedback and inquiries.A well-designed form can effectively enhance the willingness of users to fill it out.Today, let's delve into how to cleverly set a default selected item for the dropdown menu in the AnQiCMS comment form, making your website more user-friendly.

Auto CMS is an enterprise-level content management system developed based on the Go programming language, which has won the favor of many small and medium-sized enterprises and content operation teams with its efficient, flexible, and easy-to-expand characteristics.One of its core advantages is the "flexible content model", which allows users to customize various content structures according to business needs, of course, this also includes custom fields in the comment form.Therefore, even though we need to implement the default selection of the dropdown menu in the comment form, the Anqi CMS also provides enough flexibility to meet our needs.

Back-end configuration: Define the dropdown field and default option

Firstly, to implement the dropdown menu, you need to configure it in the backend of the Aanqi CMS.We need to find the setting for the custom message field under the 'Website Message' module in the 'Function Management'.Here, you can add or edit the various fields of the comment form.

When you add or edit a field, please make sure to set the "field type" to "drop-down selection".This is the key step to create a dropdown menu.Next, in the "Default Value" input box, you need to enter all the available options, one per line.

产品咨询
技术支持
合作洽谈
其他

Here is a clarification: In the Anqi CMS backend, this 'default value' input box is mainly used to define all the options of the dropdown menu. The system will parse these options into individual dropdown menu items on the frontend.<option>Label.Although the first option you entered may be displayed by default in some browsers, to achieve a truly controllable default selection, you still need to make more fine-grained controls at the template level.

Template level: Clever implementation of default selection logic

After completing the background configuration, we need to delve into the template files to adjust the HTML structure of the comment form. Typically, the comment form template file is located within the template package you are currently using.guestbook/index.html(or flattened mode)guestbook.html).

In the template system of AnQi CMS, we use{% guestbook fields %}tags to get all the fields of the background configuration comments. By traversingfieldsVariables, we can dynamically generate form elements. When encountering a field of type “Dropdown Selection”（item.Type == "select"），we can combine logical judgment tags{% if %}to set the default selected item.

This is the core code snippet that implements the default selected item, nested within your existing comment form loop:

<form method="post" action="/guestbook.html">
{% guestbook fields %}
    {% for item in fields %}
    <div>
        <label>{{item.Name}}</label>
        <div>
            {# 判断字段类型是否为下拉选择 #}
            {% if item.Type == "select" %}
            <select name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
                {# 可以在这里添加一个默认的占位符选项，例如“请选择” #}
                <option value="">请选择...</option>
                {%- for val in item.Items %}
                {# 核心逻辑：如果当前选项的值与我们设定的默认值匹配，则添加 selected 属性 #}
                <option value="{{val}}" {% if val == "您的默认选中项" %}selected{% endif %}>{{val}}</option>
                {%- endfor %}
            </select>
            {% elif item.Type == "text" || item.Type == "number" %}
            {# 其他字段类型，例如文本输入框或数字输入框 #}
            <input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
            {% elif item.Type == "textarea" %}
            {# 多行文本框 #}
            <textarea name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
            {# 您可以根据实际需求添加对 radio 和 checkbox 类型的处理 #}
            {% endif %}
        </div>
    </div>
    {% endfor %}
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
{% endguestbook %}
</form>

The most critical part of this code is this line:<option value="{{val}}" {% if val == "您的默认选中项" %}selected{% endif %}>{{val}}</option>

Here, we use one{% if val == "您的默认选中项" %}Conditional judgment. It will check the dropdown option currently looped to{{val}}Does it match the default selected value you expect (e.g., "Product Inquiry")? If it matches, it will be inserted in<option>the tagselectedthe attribute to enable the default selection of the option.

“Your default selected item” can have multiple sources:

  1. Hard-coded fixed values:The most direct way is to replace it with a fixed string, for example{% if val == "产品咨询" %}selected{% endif %}This applies to default options that need to be kept unchanged for a long time.
  2. Obtained from system configuration:If your default value may need to be flexibly adjusted through the backend, you can consider adding a custom parameter (for example,DefaultConsultationType），然后在模板中通过{% system with name="DefaultConsultationType" %}来获取这个值，并与valcompare.
  3. 基于URL参数动态选中：设想您想通过URL参数来预设某个咨询类型，比如访问yourdomain.com/guestbook.html?type=技术支持。You can obtain URL parameters in the template and then compare them. For example: ``twig {% setval进行比较。例如： “`twig {% set