如何在Twig文件中表单提交时展示Bootstrap5 Alert提示消息

前置要求：你的站点已正常引入Bootstrap5的CSS与JS资源，以下所有功能均为Bootstrap原生自带，无需手写额外JS逻辑。

以下两种方案均适合入门开发者使用，可根据你的实际情况选择：

• 方案1：提交后跳转回表单页显示提示（最稳定，不会因用户刷新重复触发）

  1. 在Twig模板中你想要展示提示的位置（推荐放在表单顶部）添加如下条件渲染代码：

  {# 判断URL参数中是否存在提交成功标记 #}
  {% if app.request.query.get('delivery_submitted') == 1 %}
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    Thank-you your request has been send! We will contact you shortly
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  {% endif %}
  

  2. 修改表单提交对应的webhook处理逻辑，处理完表单数据后跳转回原表单页面，带上提交成功参数即可，WordPress环境下跳转参考代码：

  // 所有表单逻辑处理完成后执行跳转，替换为你实际的表单页面地址
  wp_redirect( 'https://你的表单页面地址?delivery_submitted=1' );
  exit;
  

• 方案2：零后端修改+零自定义JS实现（最快上线）

  1. 在Twig模板的表单顶部添加提示框代码，默认设置为隐藏：

  <div class="alert alert-success alert-dismissible fade show d-none" role="alert" id="submitSuccess">
    Thank-you your request has been send! We will contact you shortly
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  

  2. 在主题的自定义CSS配置中添加一行规则：

  /* 锚点命中时自动显示提交成功提示 */
  #submitSuccess:target {
    display: block !important;
  }
  

  3. 修改你的表单头部的action属性，加上锚点后缀即可：

  <form name="Delivery_Quote" method="post" action="{{options.delivery.web_hook}}#submitSuccess" enctype="multipart/form-data" id="deliveryquote" onsubmit="return submitDelivery_Quote()">
  

内容的提问来源于stack exchange，提问作者ShrockCo