As an experienced website operation expert, I fully understand the key role of user experience in the success of a website, and the feedback mechanism after form submission is an important part of user experience.AnQiCMS (AnQiCMS) with its excellent flexibility and customizability, provides us with great freedom to refine this process.Today, let's delve into how to customize the success or failure prompt information and page redirection strategy after submitting a message form in AnQiCMS.

Understand the submission mechanism of the AnQiCMS message form

In AnQi CMS, the function of the message form isguestbookLabel support is provided. When building a comment form, the core lies in the way of submission and the handling of backend responses.AnQiCMS provides us with two main response modes, which determine how we customize the behavior after submission:

  1. HTML mode (return=html)This is the default mode. After the form is submitted, the server will directly return an HTML page as the response.This means that if the submission is successful or fails, the server will render a complete HTML page to display the prompt information, or perform a page redirection.
  2. JSON mode (return=json)In this mode, after the form is submitted, the server will not return the complete HTML page, but a JSON-formatted data.This method is usually used for asynchronous submission (AJAX), allowing front-end JavaScript code to receive response data and dynamically handle prompts and page transitions.

Understand these two modes is the basis of customization operations, because they directly determine whether you need to modify the backend rendering template file or the JavaScript code that handles the front-end response.

Customize success/failure prompts and page redirection: HTML mode (backend processing)

In HTML mode, after the user submits the form, if not specially configured, AnQiCMS usually reloads the page submitted before and passes the success or failure status and information through some mechanism on the page (such as URL parameters or flash messages). To achieve more personalized prompts and page redirection, we can operate in two ways:

Firstly, the most direct way is to use the template file (usually used for displaying message forms)guestbook/index.html）In it, based on the backend transmitted status variable, to display different prompt information. For example, the backend may pass a variable to the template after a successful submission, and pass a variable when it fails.success_messagevariable to the template, when it fails.error_message. You can useguestbook/index.htmlInclude condition judgment:

{# guestbook/index.html 示例片段 #}
{% if success_message %}
    <div class="alert alert-success">{{ success_message }}</div>
    <meta http-equiv="refresh" content="3;url=/thank-you.html"> {# 3秒后跳转到感谢页面 #}
{% endif %}

{% if error_message %}
    <div class="alert alert-danger">{{ error_message }}</div>
    <p>请检查您的输入并重试。</p>
{% endif %}

{# ... 其他表单代码 ... #}

Here, we not only displayed the message but also through<meta http-equiv="refresh">tag to implement a simple timing jump. You need to make sure/thank-you.htmlIt is an actual page that is used to display thank you information.

Next, more advanced customization if it involves jumping to after submission.A completely different independent page.(such as a dedicated "Thank You" page or error page)