In AnQiCMS, we often need to provide website visitors with convenient interactive experiences, among which 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 in.Today, let's delve into how to set a default selected item for the dropdown menu in the AnQiCMS message form, making your website more user-friendly.

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

Backend configuration: Define dropdown fields and default options

First, the basis of implementing the dropdown menu is to configure it in the Anqi CMS backend.We need to find the custom message field settings under the "Function Management" module of the "Website Message" module.Here, you can add or edit the various fields of the comment form.

When you add or edit a field, make sure to set the 'field type' to 'dropdown selection'.This is the key step to create a dropdown menu. Next, in the 'Default Value' input box, you need to enter all the selectable options, one per line.For example, if you want the user to select a "consultation type", you can enter: 

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

It needs to be clarified: 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 enter may be displayed by default in some browsers, to achieve a truly controllable default selected item, it is necessary to make more fine-grained controls at the template level.

The template level: cleverly implement the default selection logic

After completing the background configuration, we need to delve into the template files and adjust the HTML structure of the message form. Usually, the template file of the message form is located within the template package you are currently using.guestbook/index.html(or in the case of flat mode'sguestbook.html)

In the AnQi CMS template system, we use{% guestbook fields %}tags to obtain all the background configuration message fields. 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 for implementing the default selected item, which is nested in 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 == "您的默认选中项" %}It makes a conditional judgment. It checks the drop-down option currently being cycled to{{val}}Does it match the default selected value you expect (for example, "Product Inquiry")? If it matches, it will be inserted in<option>the tagselectedattribute to enable the default selection of the option.

“Your default selected item” can have multiple sources:

  1. Hardcoded fixed value:The most direct way is to replace it with a fixed string, for example{% if val == "产品咨询" %}selected{% endif %}. This is applicable to 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, consider adding a custom parameter in the "Global Feature Settings" or "Contact Information Settings" (for exampleDefaultConsultationType)，Then pass it through the template{% system with name="DefaultConsultationType" %}To get this value and combineval.
  3. Select dynamically based on URL parameters:Imagine you want to preset a consultation type through URL parameters, such as accessingyourdomain.com/guestbook.html?type=技术支持. You can get URL parameters in the template and compare them. For example: “`twig {% setvalto compare. For example: “`twig {% set