How to modify the overall style and layout of the AnQiCMS message form to fit the website design?

As an experienced website operations expert, I fully understand that a comment form that is harmonious with the overall style of a website is not only about functional perfection, but also a key aspect of user experience and brand image.AnQiCMS (AnQiCMS) with its flexible template engine and powerful content model, provides us with sufficient freedom to customize the style and layout of the message form.Below, I will combine the AnQiCMS documentation to elaborate on how to achieve this goal.

How to modify the overall style and layout of the AnQiCMS message form to fit the website design?

In the digital age, the website's message form is an important bridge for users to establish contact with us.A well-designed, easy-to-operate message form that matches the overall style of the website, effectively enhancing user interaction and collecting valuable feedback information.AnQi CMS with its efficient features of Go language and flexible template system, provides website operators with the ability to deeply customize the comment form.This article will guide you on how to use the AnQiCMS features to modify the overall style and layout of the comment form, making it perfectly integrate with your website design.

The core logic of customizing the AnQiCMS message form

We first need to understand the underlying 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 that 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. Location of the template fileTemplate files of AnQi CMS are stored in/templatethe directory, and.htmlwith suffix. According todesign-director.mddocument description, the default template file of the online message page is usually located atguestbook/index.htmlis, or in the flattened file organization modeguestbook.htmlAll styles (CSS), JavaScript scripts, and static resources such as images are stored independently in/public/static/The directory. Therefore, our modification work will mainly focus on these files.

2. Backend custom field managementAnQiCMS isv2.0.0-alpha3The version has added the functions of "Online Message Support" and "Custom Message Field Support", which ischangelog.mdThis is reflected. This means you can add, edit, or delete form fields for the website message management menu under the background "Function Management" -> "Website Message Management" according to your 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', 'Intended Product', etc.The type of these custom fields (single-line text, multi-line text, radio, checkbox, dropdown selection, etc.) and whether they are required will directly affect the generation of the front-end form.

3. the application of front-end template tagsIndesign-tag.mdandtag-/anqiapi-other/162.htmlwe see in the document,{% guestbook fields %}It is used to obtain the core label of the留言表单字段 configured in the background. It will return afieldsarray object, eachitemrepresents a form field, includingName(Form name),FieldName(form variable name),Type(form type),Required(Is required) and other key information. It is through parsing and looping thisfieldsarray that we can dynamically build the form

In-depth analysis: Modify the style and layout of the comment form

Understood the core logic, now let's see how to operate specifically.Modify the style and layout of the comment form, which usually has two main methods: dynamically generating form elements and customizing styles, or hardcoding the form structure to achieve complete customization.

1. A flexible method for dynamically generating form elementsThis is the recommended way by AnQiCMS, as it can make the most of the flexibility of the background configuration. You need toguestbook/index.html(orguestbook.html）Template file, use{% guestbook fields %}tags, and combineforLoop to traverse 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 ideas:

   • HTML structure:Each form field is wrapped in a<div class="form-group">, which includes<label>and 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 layout (vertical stacking, horizontal alignment, two-column layout, etc.).
   • CSS style:
     • In the CSS file of the website (usually located in/public/static/css/