In modern website operations, user experience has become one of the key indicators of whether a website is successful or not.A well-designed form that not only effectively collects information but also greatly enhances the willingness of users to interact with the website.AnQiCMS (AnQiCMS) is an efficient and customizable enterprise-level content management system that is well-versed in this field and provides flexible template tags, allowing us to easily implement the dynamic hiding or displaying of form fields, thereby creating a more intelligent and concise user interface.

The charm of dynamic forms: Why do we need them?

Imagine a user filling out a contact form, where due to a certain selection, they need to fill in or skip a series of related information, but all fields are presented in front of them at once, which undoubtedly causes visual confusion and psychological burden.The value of dynamic forms lies in their ability to intelligently hide irrelevant fields based on the user's real-time input or selection, and only present the information needed at the moment.This not only optimizes the visual layout of the form, reduces the cognitive load of users, but also improves the efficiency and data quality of form filling.For users of AnQi CMS, this means they can provide customers with a more smooth and personalized interactive experience, whether it is for collecting inquiries, customizing product needs, or user feedback, it can achieve twice the result with half the effort.

Unveiling the AnQi CMS message form tags: Building dynamic foundations

AnQi CMS, through its powerful template tag system, especiallyguestbookThe label provides a solid foundation for building dynamic forms.When you configure the message form in the background management system, you can define various fields, including text boxes, numbers, multi-line text, radio buttons, checkboxes, and drop-down selections.guestbookThe role of the label is to output these form fields defined in the background in a structured way to the front-end page.

You will use it like this in the template file.guestbookTags:

{% guestbook fields %}
    {# 在这里循环输出每个表单字段 #}
{% endguestbook %}

here,fieldsis an array object that contains all the message form fields you have configured in the background. In the loopfieldseachitemcarries the detailed information of the field, among which the most critical properties include:

  • item.NameField display name, such as 'Your Name', 'Consultation Type'.
  • item.FieldNameField unique identifier, usually used in HTML.nameThe property is also the key for identifying and operating fields by our front-end JavaScript.
  • item.Type: The type of the field, such astext/number/radio/selectand, this is crucial for us to determine how to render and control the field.
  • item.Required: Is the field required?
  • item.Items: If the field type isradio/checkboxorselect, thenItemswill include all options.

It is through these properties that we can generate HTML elements with unique identifiers for each form field in the front-end template, laying the groundwork for subsequent dynamic operations.

Implement Dynamic Hide and Show: Frontend Magic

Due to the server-side rendering of the template tags in Anqi CMS, they are already generated with the complete HTML structure at the time of page loading.Therefore, to implement the 'dynamic' hiding or displaying of form fields, we need to rely on frontend JavaScript technology.

  1. Initial State Setting:By default, hide the fields that need to be dynamically controlled through CSS.
  2. Event Listening:Listen to the change event of the form field that acts as a "trigger" (for example, a dropdown menu or a set of radio buttons).
  3. Conditional judgment and operation:When the value of the trigger field changes, JavaScript judges according to the preset logic and accordingly displays or hides other related fields.

Now, let's implement it step by step through a specific scenario. Suppose your contact form contains a dropdown for a consultation type (selectWhen the user selects "Product Inquiry", the "Product Name" input box is displayed; when selecting "After-sales Service", the "Order Number" input box is displayed; when selecting "Other", all specific fields are hidden.

Step 1: Configure the留言表单字段in the background

In the 安企CMS后台留言表单settings, you need to create the following fields:

  • Consultation Type(FieldName: inquiry_type,Type: select,Items: 产品咨询,售后服务,其他)
  • Product Name(FieldName: product_name,Type: text)
  • Order Number(FieldName: order_id,Type: text)

Second step: Transform the front-end template file

In your template file (for exampleguestbook/index.html), you will useguestbookLabel loops to output these fields. To facilitate JavaScript positioning and control, we will add a container for each field.idAttribute, and by default, the containers of the 'Product Name' and 'Order Number' fields are hidden.

`twig

{% guestbook fields %}
    {% if item.FieldName == "inquiry_type" %}
        <div class="form-group" id="field-{{ item.FieldName }}">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="required">*</span>{% endif %}</label>
            <select name="{{ item.FieldName }}" id="{{ item.FieldName }}" {% if item.Required %}required{% endif %}>
                {% for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                {% endfor %}
            </select>
        </div>
    {% elif item.FieldName == "product_name" %}
        <div class="form-group" id="field-{{ item.FieldName }}" style="display: none;"> {# 默认隐藏 #}
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="required">*</span>{% endif %}</label>
            <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}" {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}">
        </div>
    {% elif item.FieldName == "order_id" %}
        <div class="form-group" id="field-{{ item.FieldName }}" style="display: none;"> {# 默认隐藏 #}
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="required">*</span>{% endif %}</label>
            <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}" {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}">
        </div>
    {% else %}
        {# 处理其他普通字段，例如用户姓名、联系方式、留言内容等 #}
        <div class="form-group" id="field-{{ item.FieldName }}">
            <label for="{{ item.FieldName