How to output the radio, checkbox, and dropdown selection options of the AnQiCMS form in the template?

As an experienced website operations expert, I am well aware of the importance of an efficient and user-friendly comment form for a website.AnQiCMS (AnQiCMS) has always been at the forefront of content management, with its flexible content model and powerful template system, allowing us to easily customize comment forms that meet various business needs.Today, let's delve into how to巧妙地利用模板标签巧妙地利用模板标签, perfectly present the radio, checkbox, and dropdown options of the comment form on your website in AnQiCMS.

AnQiCMS form: The core of building a user interaction bridge

AnQiCMS is a modern content management system developed based on the Go programming language, with the project advantages lying in providing an efficient, customizable, and easy-to-expand content management solution.It not only supports multi-site management and flexible content models, but also provides powerful tools for enterprise marketing and SEO optimization.Among many features, its support for "online feedback" and "custom feedback fields" is particularly crucial, having been introduced as early as in version v2.0.0-alpha3, which makes the feedback form of Anqi CMS no longer just a simple text box, but a powerful tool that can collect rich and structured data.

When we talk about the comment form, interactive fields such as radio buttons, checkboxes, and dropdowns can greatly enhance user experience and help us collect more accurate and standardized information.For example, you can ask users 'What is your intended product' (single choice), 'What services are you interested in' (multiple choice), or 'Which industry do you come from' (drop-down selection), all of which are more efficient than open text boxes for gathering information.

Deconstruct the Anqi CMS comment form custom fields

On the AnQiCMS backend management interface, you can define the fields of the message form under the "Function Management" module of "Website Message Management" or under the "Content Management" module of "Content Model".Especially the custom field feature of the 'Content Model', which provides a rich variety of field types for the comment form, including the 'Single Choice', 'Multiple Choice', and 'Drop-down Selection' that we are focusing on today.

When creating a custom field, it is most crucial to specify an easily understandable 'parameter name' and a 'calling field' used in the database, as well as to choose the 'field type' and configure the 'default value'.For single-choice, multiple-choice, and dropdown selection types, their option content is defined through the "default value" field.You just need to enter the options you want users to see in the 'Default Value' text box one per line, and the system will automatically parse it and use it as a selectable item.This configuration method is simple and intuitive, greatly reducing the difficulty of custom form creation.

Magic in the template: output single choice, multiple choice, and dropdown selections

Now, we have learned how to configure these interactive fields in the AnQiCMS backend, and the next step is how to elegantly display them in the frontend template. The AnQiCMS template system uses a syntax similar to the Django template engine, using{% 标签 %}to handle logic,{{ 变量 }}Output content, which makes template development very flexible.

The core template tags areguestbooktags, which are specifically used to obtain the background settings of the message form fields. You can{% guestbook fields %}Label to retrieve all defined comment fields and store them in a variable namedfields. ThisfieldsThe variable is actually an array object, each element of which (we usually name ititem) represents a comment field, containing such asName(Form name),FieldName(form variable name),Type(form type) and the most importantItems(option array, used for single selection, multiple selection and dropdown selection) and other properties.

Let us demonstrate how to output these fields in a template through a coherent paragraph and code example:

When you use it in the template{% guestbook fields %}After the tag gets all the comment form fields, it usually uses{% for item in fields %}Loop to traverse each field. Inside the loop, we need to judge the type of the current field according toitem.Typeproperties and output the corresponding HTML form elements.

For example, for text input boxes and number input boxes, you will seeitem.Typerespectively"text"or"number"At this point, you can simply output a<input type="{{item.Type}}">element. Whenitem.TypeWith"textarea"then output a<textarea>.

The truly interesting part lies in handling radio, checkbox, and dropdown selections:

• Radio buttonIfitem.TypeIs"radio"This means that the user can only select one from a group of options. At this point, we will use one{% for val in item.Items %}to loop throughitem.Itemsarray to generate one for eachval(that is, the content of each option) element. Here is the<input type="radio">element.nameThe attribute should be{{item.FieldName}}Make sure that only one radio button in the same group is selected, andvalueandtitle(or directly displayed next to the label) is used{{val}}.

• Multiple selection (Checkbox): Whenitem.TypeIs"checkbox"When, the user can select multiple options at the same time. Similar to radio buttons, we will also loopitem.Itemsto generate<input type="checkbox">elements. But there is a key difference: the checkboxes'namethe attribute needs to be added[], that isname="{{item.FieldName}}[]"，so that the backend can correctly receive an array containing multiple selected values when the form is submitted.

• Select dropdown (Select)Ifitem.TypeIs"select"This indicates that it is a dropdown menu. We will output one<select name="{{item.FieldName}}">label and loop inside ititem.Itemsarray for eachvalgenerate one<option value="{{val}}">{{val}}</option>.

Combine this, a complete template code that can dynamically output various message fields would look something like this:

<form method="post" action="/guestbook.html">
{% guestbook fields %}
    {% for item in fields %}
    <div>
        <label>{{item.Name}}</label>
        <div>
            {# 处理文本、数字输入框 #}
            {% if 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>
            {# 处理单选按钮 #}
            {% elif item.Type == "radio" %}
                {% for val in item.Items %}
                <label>
                    <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}"> {{val}}
                </label>
                {% endfor %}
            {# 处理多选框 #}
            {% elif item.Type == "checkbox" %}
                {% for val in item.Items %}
                <label>
                    <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}"> {{val}}
                </label>
                {% endfor %}
            {# 处理下拉选择 #}
            {% elif item.Type == "select" %}
            <select name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
                {% for val in item.Items %}
                <option value="{{val}}">{{val}}</option>
                {% endfor %}
            </select>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>

This code processes throughitem.TypeThe condition judgment has been implemented, dynamically rendering different types of fields. Among them{{item.Required}}Will be automatically added according to the background settingsrequiredAttribute, enhancing the convenience of form validation. Of course, to enhance the interactivity and security of the form, you can also base ontag-/anqiapi-other/167.htmlThe guidance, adding captcha functionality to the message form, effectively prevents spam.

Finally, after the user fills in and submits the form, the data will be sent to/guestbook.htmlThis preset submission address, the AnQiCMS background will properly receive and handle this structured message information.

Frequently Asked Questions (FAQ)

During the process of using the AnQiCMS comment form, you may encounter some common problems:

1. Ask: Can I add other types of custom fields to the comment form, in addition to radio buttons, check boxes, and drop-down selections? Answer:Of course, you can.The Anqi CMS comment form custom field feature is very flexible, it is implemented based on the field definition capability of the 'content model'.In addition to radio buttons, checkboxes, and dropdown selections, you can also add various field types such as 'single-line text', 'numbers', 'multi-line text' to the background content model for the comment form, to meet your diverse data collection needs.

2. Ask: How can I receive notifications in a timely manner after a user submits a comment? Answer:The AnQi CMS supports message email reminder function.In the background, you can configure the corresponding email reminder service. When a new message is submitted, the system will send an email notification to the specified email address according to your settings, ensuring that you can respond to user feedback in the first time.