如何在模态表单中添加感谢消息并使其具有响应性？

Question

现在，我已经设法构建了一个弹出表单，但我有两个问题。

1. 表单没有响应。
2. 填写/提交表格后 - 它会将我带到一个单独的 登录页面重新填写。

预期行为： 相反，我希望它在模态提交后立即显示一条消息。比如“谢谢”。

这可能是滴漏的问题，不确定。

这是表单代码：

 <div class="modal" id="myModal">
            <!--{cke_protected}{C}%3C!%2D%2D%20Modal%20content%20%2D%2D%3E-->
            <div class="modal-content">
              <div class="modal-header"><span class="close">×</span></div>
              <div class="modal-body">
                <form action="https://www.getdrip.com/forms/828915861/submissions" data-drip-embedded-form="828915861" method="post">
                  <h3 data-drip-attribute="headline">Get a copy of Webinar Promotion Strategies for you to read at your leisure</h3>
                  <div data-drip-attribute="description"><br></div>
                  <div><label for="drip-fname">First Name</label><br><input id="drip-fname" data-cke-saved-name="fields[fname]" name="fields[fname]" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
                  <div><label for="drip-email">Email Address</label><br><input id="drip-email" data-cke-saved-name="fields[email]" name="fields[email]" type="email" value="" data-cke-editable="1" contenteditable="false"></div>
                  <div aria-hidden="true" style="display: none;"><label for="website">Website</label><br><input autocomplete="false" id="website" data-cke-saved-name="website" name="website" tabindex="-1" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
                  <div><input data-drip-attribute="sign-up-button" type="submit" value="Download Now" data-cke-editable="1" contenteditable="false"></div>
                </form>
              </div>
              <div class="modal-footer"><button></button></div>
            </div>

这是 CSS 样式：

 <style type="text/css">
            body {
              font-family: Arial, Helvetica, sans-serif;
            }

            /* The Modal (background) */
            .modal {
              display: none;
              /* Hidden by default */
              position: fixed;
              /* Stay in place */
              z-index: 1;
              /* Sit on top */
              padding-top: 100px;
              /* Location of the box */
              left: 0;
              top: 0;
              width: 100%;
              /* Full width */
              height: 100%;
              /* Full height */
              overflow: auto;
              /* Enable scroll if needed */
              background-color: rgb(0, 0, 0);
              /* Fallback color */
              background-color: rgba(0, 0, 0, 0.4);
              /* Black w/ opacity */
              flex-direction: column;
              align-items: stretch;
            }



            /* Modal Content */
            .modal-content {
              position: relative;
              background-color: #fefefe;
              margin: auto;
              padding: 0;
              border: 1px solid #888;
              width: 25%;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              -webkit-animation-name: animatetop;
              -webkit-animation-duration: 0.4s;
              animation-name: animatetop;
              animation-duration: 0.4s
            }

            /* Add Animation */
            @-webkit-keyframes animatetop {
              from {
                top: -300px;
                opacity: 0
              }

              to {
                top: 0;
                opacity: 1
              }
            }

            @keyframes animatetop {
              from {
                top: -300px;
                opacity: 0
              }

              to {
                top: 0;
                opacity: 1
              }
            }

            /* The Close Button */
            .close {
              color: white;
              float: right;
              font-size: 28px;
              font-weight: bold;
            }

            .close:hover,
            .close:focus {
              color: #000;
              text-decoration: none;
              cursor: pointer;
            }

            .modal-header {
              padding: 10px 16px;
              background-color: #d6812e;

            }

            .modal-body {
              padding: 2px 16px;
            }

            .modal-footer {
              padding: 10px 16px;
              background-color: #d6812e;

            }
          </style>

Answer 1

尝试将您的表单标签更改为：

<form action="" data-drip-embedded-form="828915861" method="post" onsubmit="alert('Thank You.');" novalidate>