How to build a custom website contact form?

The website comment form is an important bridge for interaction between the website and visitors. Whether it is to collect user feedback, customer inquiries, or other interactive needs, a well-designed and functional comment form is crucial.In Anqi CMS, building a custom message form is much simpler and flexible than you imagine.The built-in "website message" function provides a powerful basic framework, allowing for in-depth customization according to actual needs.

Next, we will discuss in detail how to build a customized feedback form that meets your specific needs in Anqi CMS.

1. Configure the feedback form fields in the background.

To start building the message form, we first need to enter the Anqi CMS admin interface.Find and click on the left menu bar under "Function Management", then select "Website Message Management".This is the center of all comment form related settings.

1. Basic fields:Generally, the system provides some basic fields, such as visitor name (user_name）、Contact Information（contact) and message content (contentThese are enough to meet the basic needs of most websites' comments, and they are default existing; you do not need to create them extra.

2. Custom field:However, if your business has more unique visitor information collection needs, the strength of Anqi CMS lies in its flexible support for custom fields. You can add more fields according to actual circumstances, such as:

• Text type (text): Used to collect brief text information, such as company name, position, etc.
• Number type (number): Used to collect pure numeric information, such as age, budget amount, etc.
• Multiline text (textarea): Used to collect detailed descriptive content, such as project requirements, suggestions, etc.
• Single choice (radio)Provide preset options, visitors can only select one, for example "Gender", "Product type".
• Multiple choice (checkbox)Provide preset options for visitors to select multiple items, such as 'services of interest' and 'product features.'
• Dropdown selection (select)Provide a dropdown menu for visitors to select preset options.

When adding custom fields, you can set the field name (for backend and template display), the corresponding field variable name (for data storage and template calls), and specify whether the field is required.For radio, checkbox, and dropdown fields, you also need to set their default values, that is, the various options provided to the visitor, each on a separate line.

These settings are completed, and the data structure of the form has been set up in the background. The configuration in the background is intuitive and easy to operate, and it only takes a few steps to complete the addition, deletion, modification, and query of fields.

Create and customize the message form template

After the field configuration on the backend is complete, we need to present these fields on the website frontend to form a form that visitors can fill out.

1. Template file location:According to the template conventions of Anqi CMS, the template file for the comment form is usually located in your current template directory.guestbook/index.htmlIf the file does not exist, you can create it manually.

2. Core template tags:guestbook:Anqi CMS provides a specialguestbookTemplate tag, it can intelligently retrieve the message fields you define in the background. You can loop through the tag to return thefieldsvariable, dynamically generate form elements.

This is a basic template structure example of a message form:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <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" 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>
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}"
                               {% if item.Required %}required{% endif %}> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "checkbox" %}
                    {% for val in item.Items %}
                    <label>
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}"
                               {% if item.Required %}required{% endif %}> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                        {% if item.Required %}required{% endif %} class="form-control">
                    {% for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {% endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        <div class="form-group">
            <button type="submit" class="btn btn-primary">提交留言</button>
            <button type="reset" class="btn btn-secondary">重置</button>
        </div>
    {% endguestbook %}
</form>

In the code above:

• <form method="post" action="/guestbook.html">Defines the form submission method and target address.
• {% guestbook fields %}The label retrieves the form fields defined by the background and assigns them tofieldsVariable.
• {% for item in fields %}Loop through each field.
• {{ item.Name }}Display the Chinese name of the field.
• {{ item.FieldName }}asinputortextareaofnameandidProperty value.
• {% if item.Required %}required{% endif %}Automatically add HTML5 based on backend settings.requiredProperty.
• placeholder="{{ item.Content }}"Use the default value set by the backend as the prompt text.
• Based onitem.TypeDifferent, we have generated different HTML form elements such astext/number/textarea/radio/checkboxandselect. Especially for multiple choice, single choice and dropdown selection, we loop againitem.Itemsto generate each option.

By this means, any field added or modified on the backend will automatically update the frontend form, greatly improving maintenance efficiency.

III. Further Enhancement and Security Protection of the Form

A beautiful and functional comment form also needs to consider user experience and security.

1. Add captcha:In order to effectively prevent malicious submissions or spam, adding a captcha to the comment form is a very important measure.

• Backend enabled: First, make sure that the captcha function is enabled in the "Function Management" -> "Website Message Management" of the Anqi CMS background.
• Template integration:In yourguestbook/index.htmlIn the template, you need to add the captcha display area and the related JavaScript code.

This is an integrated captcha template code example (you can choose the native JS or jQuery version according to your front-end framework):

Native JavaScript version:

`twig

<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; margin-right: 10px;">
<img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border-radius: 4px; border: 1px solid #ddd;" alt="验证码">
<script>
    document.getElementById('get-captcha').addEventListener("click", function () {
        fetch('/api/captcha')
            .then(response => response.json())
            .