How to dynamically generate a custom field guestbook form with different input types and adapt to them?

Managing website comments in Anqi CMS is a common requirement in daily operations, especially when we need to collect specific information. A flexible and customizable comment form is particularly important. Anqi CMS fully considers this need and provides powerfulguestbookTags, allowing us to easily dynamically generate comment forms containing custom fields, and adapt to various input types.

Comment form tag (guestbook) power

The core is inguestbookLabel. It allows us to dynamically retrieve the background-defined form fields of the message form when using the template.{% guestbook fields %}...{% endguestbook %}whenfieldsThe variable will carry an array containing all custom field definitions.This means we do not need to hard-code each form field, but instead, the system automatically provides the structural information of these fields based on backend settings, greatly enhancing the reusability and flexibility of the template.

Secret to dynamically generate form fields.

fieldsEach element (usually nameditem) in the array represents an independent field for a message, it contains the key information required to generate a form item:

• Name: The display name of the field, such as 'Your Name', 'Phone Number', etc.
• FieldName: The unique identifier for the field, used for the backend to receive data during form submission. For example, if the backend defines a field named "hobbies", itsFieldNamemay behobbies.
• Type: This is the key to implementing different input types. Safe CMS supports various field types, such astext(Single-line text),number(Number),textarea(Multi-line text),radio(Single choice),checkbox(Multiple choice) andselect(Dropdown selection).
• Required: An boolean value indicating whether the field is required. On the frontend, you can add HTML5'srequiredattribute or custom validation.
• Content: The default value of the field, usually used forplaceholderPrompt.
• Items: When the field type isradio/checkboxorselectwhenItemsIt will include an array, listing all the available options.

With this information, we can make use of it in the template.forto iteratefieldsthe array, and combine it withif/elifLogical judgmentitem.TypeTherefore, render the appropriate HTML form element for each field.

The following is a complete example code that demonstrates how to dynamically generate a comment form with different input types:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
        <div>
            <label>{{item.Name}}</label>
            <div>
                {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" autocomplete="off">
                {% elif item.Type == "textarea" %}
                <textarea name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
                {% elif item.Type == "radio" %}
                    {%- for val in item.Items %}
                    <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" title="{{val}}"> {{val}}
                    {%- endfor %}
                {% elif item.Type == "checkbox" %}
                    {%- for val in item.Items %}
                    <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}"> {{val}}
                    {%- endfor %}
                {% elif item.Type == "select" %}
                <select name="{{item.FieldName}}">
                    {%- for val in item.Items %}
                    <option value="{{val}}">{{val}}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        {# 验证码字段，如果后台开启了验证码功能 #}
        <div style="display: flex; clear: both; margin-top: 15px;">
          <input type="hidden" name="captcha_id" id="captcha_id">
          <input type="text" name="captcha" required placeholder="请填写验证码" style="flex: 1; border: 1px solid #e6e6e6; padding: 0 10px; height: 38px; line-height: 38px; box-sizing: border-box;">
          <img src="" id="get-captcha" style="width: 120px;height: 38px;cursor: pointer; margin-left: 5px; border: 1px solid #e6e6e6;" />
          <script>
            document.addEventListener('DOMContentLoaded', function() {
              var captchaImg = document.getElementById('get-captcha');
              if (captchaImg) {
                captchaImg.addEventListener("click", function () {
                  fetch('/api/captcha')
                          .then(response => response.json())
                          .then(res => {
                            document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                            captchaImg.setAttribute("src", res.data.captcha);
                          }).catch(err => console.error('获取验证码失败:', err));
                });
                // Initial load
                captchaImg.click();
              }
            });
          </script>
        </div>

        <div style="margin-top: 20px;">
            <button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer;">提交留言</button>
            <button type="reset" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; cursor: pointer; margin-left: 10px;">重置</button>
        </div>
    {% endguestbook %}
</form>

In the above code, we rendered the corresponding HTML tags for each field type:

• textandnumberType generation<input type="text">or<input type="number">.
• textareaType generation<textarea>.
• radio/checkboxandselectType will iterate overitem.Itemsan array, generating their respective options. It should be noted that,checkboxofnameThe end of the attribute is usually added[]so that the backend can receive multiple selected values in array form.
• requiredThe addition of properties can take advantage of the built-in HTML5 form validation of the browser to enhance user experience.

Submit message: backend interaction and captcha integration

The submission address of the form is fixed to/guestbook.html，Submission method isPOST. In addition to the dynamically generated custom fields, the CMS also requires some core fields such asuser_name（Name of the留言者）、contact（Contact information）andcontentThe content of the message must exist in the form and be submitted. These fields can be managed in the background message settings and set as required fields as needed.

In order to enhance security and prevent spam comments, the safe CMS also supports integrating captcha.When the background留言验证码function is enabled, we need to add the captcha input box and image display logic to the form.The code above already includes the JS generation and display logic for the captcha, the user can refresh the captcha by clicking the image, and the input is submitted along with the form.

Summary

Anqi CMS'sguestbookThe customization of the form for website comments provides great convenience.By simply defining fields in the background, we can dynamically generate feature-rich forms in the front-end template, adapting to various information collection scenarios.This design not only improves development efficiency, but also brings more possibilities for website operation, allowing the website to interact more flexibly with users and collect the required data.

---