如何防止自定義Mailchimp表單重定向提交？

我在我正在處理的網頁上創建了一個自定義Mailchimp註冊表單。一切都很好，但我不喜歡如何提交，表單重定向到一個新的選項卡，其中有一條來自Mailchimp的消息，聲明您已加入郵件列表。我想知道是否有可能阻止這種重定向，也許只是最多顯示一些謝謝彈出消息。如何防止自定義Mailchimp表單重定向提交？

HTML：

<form action="//gohrvst.us11.list-manage.com/subscribe/post?u=b96980cf3047250aab16b3c44&amp;id=e6441c7cba" id="subscribe" method="POST" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
      <label for="mail">SIGN UP FOR OUR MAILING LIST</label> 

      <p class="form-status-text"></p> 
      <!-- /.form-status-text --> 

      <div class="form-controls no-border"> 
       <div class="form-group no-border"> 

       <input type="hidden" name="side" value="creativeagency" class="no-border" /> 
       <input type="email" id="mail" name="MERGE0" value="ENTER EMAIL ADDRESS" class="subscribe-field no-border" required data-validation-type="['presence', 'email']" onblur="if (this.value == '') {this.value = 'ENTER EMAIL ADDRESS';}" 
onfocus="if (this.value == 'ENTER EMAIL ADDRESS') {this.value = '';}"> 

       </div><!-- /.form-group --> 

       <button type="submit" class="subscribe-btn" id="subscribe-button"> 
       <div class="subscribe-btn-svg"> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 64.57" class="subscribe-btn-svg"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 9</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M4,36.28H66.34L44.89,57.74a4,4,0,1,0,5.66,5.66L78.83,35.11h0a4,4,0,0,0,.5-.61c.07-.1.11-.21.17-.31a3.85,3.85,0,0,0,.2-.37,3.65,3.65,0,0,0,.13-.41c0-.11.08-.22.1-.33a4,4,0,0,0,.08-.79h0a4,4,0,0,0-.08-.77c0-.12-.07-.23-.1-.35a3.58,3.58,0,0,0-.12-.4,4,4,0,0,0-.21-.4c-.05-.1-.1-.2-.16-.29a3.88,3.88,0,0,0-.5-.61L50.54,1.17a4,4,0,1,0-5.66,5.66L66.34,28.28H4a4,4,0,0,0,0,8Z"/></g></g></svg> 
       </div> 
       </button> 
      </div> 
      </form>

來源

2017-04-19 S. Miller

我不熟悉，MailChimp，但它看起來像你對我應該能夠通過JavaScript函數發送POST數據並避免重定向。但是這會違反MailChimp的TOS嗎？ – freginold

使它與ajax和jquery函數 –

請顯示一個[mcve]（包括你的JS代碼） – ochi

也許你可以使用Ajax使其在jQuery中，嘗試這樣的事情

$(document).ready(function() { 
    var $form = $('#mc-embedded-subscribe-form2'); 
    if ($form.length > 0) { 
     $('form input[type="submit"]').bind('click', function (event) { 
      if (event) event.preventDefault(); 
      register($form); 
     }); 
    } 
}); 

function register($form) { 
    $.ajax({ 
     type: $form.attr('method'), 
     url: $form.attr('action'), 
     data: $form.serialize(), 
     cache  : false, 
     dataType : 'json', 
     contentType: "application/json; charset=utf-8", 
     error  : function(err) { alert("Could not connect to the registration server. Please try again later."); }, 
     success  : function(data) { 
      if (data.result != "success") { 
       // Something went wrong, do something to notify the user. maybe alert(data.msg); 
      } else { 
       // It worked, carry on... 
      } 
     } 
    }); 
}

來源

2017-04-20 08:07:23

感謝您的回覆。今天晚些時候我會試試這個。我會在哪裏放置Mailchimp表單動作？ –

@SpencerM。只要讓你的HTML。腳本jquery獲取表單的方法和動作。所以ajax查詢轉到Mailchimp表單操作 –

如何防止自定義Mailchimp表單重定向提交？

回答

相關問題