As a senior website operation expert, I know that a留言表单留言表单 that is harmonious with the overall style of the website is not only about functionality, but also a key part of user experience and brand image.The AnQiCMS provides us with ample freedom to customize the style and layout of the comment form with its flexible template engine and powerful content model.Below, I will combine the AnQiCMS documentation to give a detailed explanation of how to achieve this goal.

How to modify the overall style and layout of AnQiCMS comment form to adapt to the website design?

In the digital age, the website's contact form is an important bridge for users to connect with us.An well-designed, easy-to-operate form that maintains consistency with the overall style of the website, which can effectively enhance users' willingness to interact and collect valuable feedback information.Auto CMS with its efficient features of Go language and flexible template system provides website operators with the ability to deeply customize the留言表单.This article will guide you on how to use the AnQiCMS features to modify the overall style and layout of the留言表单 form, making it perfectly integrate with your website design.

The core logic of AnQiCMS message form customization

We first need to understand the underlying working mechanism of the AnQiCMS message form in order to adjust its style and layout.AnQiCMS uses a template engine syntax similar to Django, which means the presentation of forms is completely controlled by the front-end template files, while the backend is responsible for data management and business logic.The core of customization lies in three aspects: the location of template files, the management of background custom fields, and the flexible application of front-end template tags.

  1. Template file locationAll template files of AnQi CMS are stored in/templatedirectory, and named with.htmlSuffix. According todesign-director.mdDocumentation, the default template file of the online message page is usually located atguestbook/index.html，or in flat file organization mode isguestbook.html. All styles (CSS), JavaScript scripts, and images, etc., static resources are stored independently,/public/static/Table of contents. Therefore, our modification work will mainly focus on these files.

  2. Backend custom field managementAnQiCMS inv2.0.0-alpha3Version has added the features of "Online Message Support" and "Custom Message Field Support", which inchangelog.mdIt is reflected.This means you can add, edit, or delete form fields of the留言表单 through the "Function Management" -> "Website Message Management" menu according to actual business needs.For example, in addition to the default name, contact information, and message content, you can add custom fields such as "Company Name" and "Intentional Product.These custom field types (single-line text, multi-line text, radio, checkbox, dropdown selection, etc.) and whether the required attribute, will directly affect the generation of the front-end form.

  3. Application of frontend template tagsIndesign-tag.mdandtag-/anqiapi-other/162.htmlIn the document, we see{% guestbook fields %}Is used to retrieve the core tags of the留言表单字段background setting. It returns afieldsarray object where eachitemrepresents a form field that includesName(form name),FieldName(Form variable name)、Type(Form type)、Required(Is required) and other key information. It is through parsing and iterating over thisfieldsarray that we can dynamically construct the form.

In-depth Analysis: Modify the Form Style and Layout of the Comment Form

Understood the core logic, now let's take a specific look at how to operate.Modify the style and layout of the message form, there are usually two main methods: dynamically generate form elements and customize the style, or hard-code the form structure to achieve complete customization.

  1. Flexible Methods for Dynamically Generating Form ElementsThis is the recommended method by AnQiCMS, as it makes the most of the flexibility of the backend configuration. You need toguestbook/index.html(or}guestbook.htmluse in the template file.{% guestbook fields %}tags, and combineforLoop through all defined form fields.

    <form method="post" action="/guestbook.html" id="guestbook-form">
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group {{ item.FieldName }}-field">
            <label for="{{ item.FieldName }}">
                {{ item.Name }}
                {% if item.Required %}<span class="required">*</span>{% endif %}
            </label>
            <div>
                {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                       {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" autocomplete="off"
                       class="form-control">
                {% elif item.Type == "textarea" %}
                <textarea name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                          {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" rows="5"
                          class="form-control"></textarea>
                {% elif item.Type == "radio" %}
                    {% for val in item.Items %}
                    <label class="radio-inline">
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}"
                               {% if item.Content == val %}checked{% endif %}> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "checkbox" %}
                    {% for val in item.Items %}
                    <label class="checkbox-inline">
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}"
                               {% if item.Content contains val %}checked{% endif %}> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ item.FieldName }}" class="form-control">
                    {% for val in item.Items %}
                    <option value="{{ val }}" {% if item.Content == val %}selected{% endif %}>{{ val }}</option>
                    {% endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}


        {# 如果需要验证码，请根据 tag-/anqiapi-other/167.html 文档添加相应代码 #}
        {# 例如:
        <div class="form-group captcha-field">
            <label for="captcha">验证码 <span class="required">*</span></label>
            <div class="captcha-input-group">
                <input type="hidden" name="captcha_id" id="captcha_id">
                <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control captcha-text">
                <img src="" id="get-captcha" class="captcha-image" alt="验证码">
            </div>
            <script>
                document.getElementById('get-captcha').addEventListener("click", function (e) {
                  fetch('/api/captcha')
                          .then(response => response.json())
                          .then(res => {
                            document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                            document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                          }).catch(err => console.error('Error fetching captcha:', err));
                });
                document.getElementById('get-captcha').click();
            </script>
        </div>
        #}


        <div class="form-group form-actions">
            <button type="submit" class="btn btn-primary">提交留言</button>
            <button type="reset" class="btn btn-secondary">重置</button>
        </div>
    {% endguestbook %}
    <input type="hidden" name="return" value="html"> {# 或 "json" 用于 AJAX 提交 #}
</form>

    Layout adjustment strategy:

    • HTML structure:Each form field is wrapped in a<div class="form-group">which contains<label>and the input elements. You can adjust these according to your design system (such as Bootstrap, Tailwind CSS, or a custom framework)divand the element'sclassProperties, to control their arrangement (vertical stacking, horizontal alignment, two-column layout, etc.).
    • CSS Styles:
      • in the CSS file of the website (usually located in/public/static/css/