2015-11-29 75 views
6

我在Github Pages Service上獲得了我的網站。我正在嘗試實施FormSpree免費聯繫表單,但在您提交表單後,會將您重定向到其他網站。我想避免的事情。所以我在網上查了一下,當然其他人也想擺脫它(我在下面的圖片中省略了我的電子郵件)。如何解決FormSpree重定向問題?

enter image description here

這是我在上面得到的形式,但它實際上並沒有在所有的工作。它之前我試圖擺弄它雖然工作。

這裏是形式看起來像默認情況下從FormSpree什麼:

<form action="//formspree.io/[email protected]" 
     method="POST"> 
    <input type="text" name="name"> 
    <input type="email" name="_replyto"> 
    <input type="submit" value="Send"> 
</form> 

這裏是我的版本

<div class=modal-body style="background-color: #454545"> 
    <p>Please use the form below to contact us regarding feedback or any questions you may have! 
     We will never use the information given below to spam you and we will never pass on your 
     information to a 3rd party.</p> 
    <p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form 
    please consult their privacy policy for any questions regarding this matter.</p> 
    <form id="contactform" method="POST"> 
     <div class="form-group"> 
      <div class="input-group"> 
       <span class="input-group-addon">Name</span> 
       <input name="form-name-input" type="text" name="name" class="form-control" required> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon">Email</span> 
       <input name="form-email-input" type="email" name="_replyto" class="form-control" required> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon">Subject</span> 
       <input name="form-subject-input" type="text" name="subject" class="form-control" required> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon">Description</span> 
       <textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea> 
      </div> 
      <input type="text" name="_gotcha" style="display:none" /> 
      <input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit"> 
      <input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/> 
     </div> 
     <script> 
      var contactform = document.getElementById('contactform'); 
      contactform.setAttribute('action', '//formspree.io/' + '[email protected]'); 
     </script> 
    </form> 
</div> 
<div class="modal-footer" style="background-color: #333333"> 
    <button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button> 
</div> 

(之前,我試圖讓周圍的重定向它工作得很好),當我請致電_next我要它執行以下警報:

function FormSentConfirmation() { 
    alert('Thanks for the email, we\'ll be in touch promptly.'); 
} 

Wh我按提交按鈕,所發生的只是表格消失,但我沒有收到任何電子郵件。我可能只是做錯了,因爲對於HTML/JavaScript我還是比較新的。

+0

我不知道FormSpree盡頭是記錄,但你應該能夠檢查如果頁面被重定向,然後'返回false;',你應該很好去。 – MortenMoulder

+0

我已經添加了他們給你的標準格式作爲例子。只要你把它放在這個結構中並在表單上調用'action =「// formspree.io/[email protected]」 method =「POST」',FormSpree就會完成剩下的工作。 – OmniOwl

+1

查看www.enformed.io,其工作方式與formspree相似,但是具有開箱即用的重定向功能 – Ivangrx

回答

6

按照自己的AJAX例如在底部:https://formspree.io/

$("#sendMessage").on("click", function() { 
    $.ajax({ 
     url: "//formspree.io/[email protected]", 
     method: "POST", 
     data: {message: "hello!"}, 
     dataType: "json" 
    }); 
}); 

請記住,包括jQuery的,以及這個工作。刪除:

var contactform = document.getElementById('contactform'); 
contactform.setAttribute('action', '//formspree.io/' + '[email protected] 

並將其替換爲我的代碼並更改選擇器。或者使用$("form").on("submit"...

這裏是我的榜樣,它向您發送電子郵件,並提示用戶警報:http://jsfiddle.net/228d4snb/

做任何事情,你想做到這一點return false;

+0

噢好吧。我完全錯過了。我現在就試試。謝謝! – OmniOwl

+0

@Vipar試着在我們說話時設置一個例子:P – MortenMoulder

+0

@Vipar檢查我的編輯。鏈接與工作示例:http://jsfiddle.net/228d4snb/ – MortenMoulder

5

使用權之前,這個隱藏的輸入表單提交後重定向表單中的字段。您可以將用戶重定向到您喜歡的或使用此代碼塊創建的頁面。

<input type="hidden" name="_next" value="//site.io/thanks.html" /> 

更換一個有效的感謝頁面URL。

按照第how to use Formspree此鏈接的教程,也是一個video demo

4

有實際上現在是一個更簡單的方法:

_next 

默認情況下,提交表單後,向用戶顯示的Formspree「感謝你「頁面。您可以爲該頁面提供替代網址。

<input type="hidden" name="_next" value="//site.io/thanks.html" /> 

這在的https://formspree.io/