In website operations, visitor comments and interactions are important aspects for building trust, obtaining feedback, and promoting business development.AnQiCMS (AnQiCMS) fully understands this need and provides a flexible and powerful feedback form feature, allowing you to easily generate and display user feedback forms dynamically on your website.guestbookIt is implemented by template tags, which not only allows you to customize form fields but also ensures the security and smooth submission of the form.
UnderstandingguestbookThe core function of the tag
When we need to add a message form to a website,guestbookLabel does not directly generate a complete HTML form, but provides an array containing the *definitions* of all form fields.This means that you can flexibly build comment forms that match your website design style, rather than being restricted by fixed styles.This design concept makes the form presentation highly customizable, fully reflecting the advantages of AnQiCMS in content modeling and modular design.
Front-end Application: Dynamically Constructing a Message Form
To convert these backend-defined fields into actual usable forms in your template, we will do so in the corresponding template file (for example,guestbook/index.htmlIn the pages）where other necessary display forms need to be usedguestbookTags:
{% guestbook fields %}
<form method="post" action="/guestbook.html">
{# 这里将根据fields数组动态生成表单字段 #}
{% for item in fields %}
<div>
<label for="{{ item.FieldName }}">{{ item.Name }}</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">
{% elif item.Type == "textarea" %}
<textarea name="{{ item.FieldName }}" id="{{ item.FieldName }}"
{% if item.Required %}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 }}" id="{{ item.FieldName }}_{{ forloop.Counter }}">
<label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
{% endfor %}
{% elif item.Type == "checkbox" %}
{% for val in item.Items %}
<input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}_{{ forloop.Counter }}">
<label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
{% endfor %}
{% elif item.Type == "select" %}
<select name="{{ item.FieldName }}" id="{{ item.FieldName }}">
{% for val in item.Items %}
<option value="{{ val }}">{{ val }}</option>
{% endfor %}
</select>
{% endif %}
</div>
</div>
{% endfor %}
{# 验证码区域，如果开启了验证码功能 #}
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" style="flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
<img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; margin-left: 10px; border-radius: 4px; border: 1px solid #eee;" alt="验证码" />
<script>
document.getElementById('get-captcha').addEventListener("click", function () {
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('获取验证码失败:', err));
});
// 页面加载时自动获取一次验证码
document.getElementById('get-captcha').click();
</script>
</div>
<div>
<button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">提交留言</button>
<button type="reset" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">重置</button>
</div>
</form>
{% endguestbook %}
In this code block:
{% guestbook fields %}Tags will load the form fields defined on the back endfieldsthe variable.fieldsA variable is an array that contains all the detailed information of each input item defined for the comment form in the background.- We go through
{% for item in fields %}Loop through this array. In each iteration,itemThe variable represents a definition of a form field. - Based on
item.Type(Form type), we use conditional judgment{% if item.Type == "text" %}to render different HTML form elements, such as<input type="text">/<textarea>/<input type="radio">/<select>etc. item.Nameused to display the label text of the form item,item.FieldNamethen it is used as the HTML element'snameandidattribute to ensure that form data can be submitted correctly and interact with the front-end.item.Requiredattribute determines whether to add HTML'srequiredattribute to implement frontend required validation.- For single-choice, multiple-choice, and dropdown fields,
item.Itemsa list of options will be provided, and we will generate these options by looping again{% for val in item.Items %}these options.