[英]My First Contact Form using PHP & JavaScript - No Page Redirect
寫我的第一個使用聯系表格的網站。 到目前為止,我一直在研究這個問題,但我發現了以下我一直關注的文章:
http://www.nfriedly.com/techblog/2009/11/how-to-build-a-spam-free-contact-forms-without-captchas/
然而,到目前為止,它還沒有奏效。 我將聯系頁面上傳到其上有PHP的共享主機服務器。 以下是我到目前為止的代碼。
以下是表單中* .html文件中的相關內容:
<form action="/submit.php" method="post">
<span>Name</span>
<br>
<input id="name-text" type="text" name="name">
<br>
<span>Email</span>
<br>
<input id="email-text" type="text" name="email">
<br>
<span>Subject</span>
<br>
<input id="subject-text" type="text" name="subject">
<br>
<input id="antispam-text" type="text" name="url" style="display:none;">
<span>Message</span>
<br>
<textarea id="message-text" name="message"></textarea>
<br>
<div class="form-submit">
<input id="submit-button" class="menu" type="submit" value="Submit">
</div>
<br>
<div class="form-submit">
<span id="sent-status"></span>
</div>
</form>
以下是* .css文件中與表單相關的內容:
input[type="text"], textarea {
width: 90%;
margin: 10px;
font-size: var(--font-text4);
}
textarea {
height: 90px;
}
#submit-button:hover {
border-color: #7AC943;
}
.form-submit {
text-align: center;
margin:-20px;
}
#submit-button {
background-color: transparent;
width: 150px;
border: var(--thin-border);
color: var(--font-color);
font-size: var(--font-text3);
}
#sent-status {
margin: -10px;
padding: 7px;
visibility: hidden;
background-color: #000000;
}
以下是* .js文件中與表單相關的內容:
document.getElementById('submit-button').addEventListener('click', function () {
var formFilled = true;
if (document.getElementById('name-text').value == '')
formFilled = false;
if (document.getElementById('email-text').value == '')
formFilled = false;
if (document.getElementById('subject-text').value == '')
formFilled = false;
if (document.getElementById('message-text').value == '')
formFilled = false;
document.getElementById('sent-status').style.visibility = 'visible';
if (formFilled) {
document.getElementById('sent-status').style.color = '#7AC943';
document.getElementById('sent-status').innerText = 'Message Sent Successfully';
}
else {
document.getElementById('sent-status').style.color = '#FF1D25';
document.getElementById('sent-status').innerText = 'Contact Form Incomplete';
}
});
以下是submit.php文件的全部內容:
<?php
// If the URL field is empty...
if(isset($_POST['url']) && $_POST['url'] == ''){
// then send the form to your email.
mail('beta@email.com', 'Contact Form', print_r($_POST,true) );
}
// Else, let the spammer think that they got their message through.
?>
以下是影響此聯系表單的以下技術問題:
填寫表單的所有字段並單擊“提交”按鈕,然后瀏覽器轉到submit.php文件並保留* .html文件。 我希望瀏覽器一直保留在* .html文件中,並且從不加載submit.php文件,就像它是一個網頁一樣。
單擊“提交”按鈕,然后檢查我指定的目標電子郵件帳戶,沒有任何內容到達收件箱或垃圾郵件。 電子郵件帳戶另外發送/接收電子郵件就好了。 在submit.php代碼中,你會看到我把beta@email.com放在了不是真正的目標電子郵件中。 對於這篇文章,我將實際的電子郵件目標地址保密。
非常感謝您的幫助。
您可以使用Fetch API,首先阻止提交按鈕的默認操作,然后使用fetch發送表單信息,如下所示:
document.getElementById('submit-button').addEventListener('click', function (event) {
event.preventDefault();
var formFilled = true;
if (document.getElementById('name-text').value == '')
formFilled = false;
if (document.getElementById('email-text').value == '')
formFilled = false;
if (document.getElementById('subject-text').value == '')
formFilled = false;
if (document.getElementById('message-text').value == '')
formFilled = false;
document.getElementById('sent-status').style.visibility = 'visible';
if (formFilled) {
const form = document.querySelector('form');
const data = new FormData(form);
fetch('/submit.php', {
body: data,
cache: 'no-cache',
method: 'POST',
mode: 'cors'
})
.then(res => res.text())
.then(result => {
if (result === 'ok') {
document.getElementById('sent-status').style.color = '#7AC943';
document.getElementById('sent-status').innerText = 'Message Sent Successfully';
} else {
//failed message here ...
}
});
} else {
document.getElementById('sent-status').style.color = '#FF1D25';
document.getElementById('sent-status').innerText = 'Contact Form Incomplete';
}
});
並對submit.php文件進行此更改:
<?php
if(isset($_POST['url']) && $_POST['url'] == ''){
extract($_POST);
mail('beta@email.com', 'Contact Form', $message);
echo 'ok';
}
在mail函數中,第三個參數應該是消息,從$ _POST數組中提取消息並將其提供給mail函數
您可以嘗試使用jQuery AJAX。 以下是可能對您有所幫助的代碼示例。
HTML
<form action="" method="post" id="myForm">
<span>Name</span>
<br>
<input id="name-text" type="text" name="name">
<br>
<span>Email</span>
<br>
<input id="email-text" type="text" name="email">
<br>
<span>Subject</span>
<br>
<input id="subject-text" type="text" name="subject">
<br>
<input id="antispam-text" type="text" name="url" style="display:none;">
<span>Message</span>
<br>
<textarea id="message-text" name="message"></textarea>
<br>
<div class="form-submit">
<input id="submit-button" class="menu" type="submit" value="Submit">
</div>
<br>
<div class="form-submit">
<span id="sent-status"></span>
</div>
</form>
然后在你的js文件中放入這段代碼(我已經跳過了驗證過程,但在你的生產代碼中不要忘記這樣做!)
$(document).ready(function(){
$('#myForm').on('submit',function(event){
event.preventDefault();
var data = $(this).serialize();
$.ajax({
type: 'POST',
url: '/submit.php',
data: data,
success: function(response){
// do your code stuff here if all goes well
},
error: function(err){
// do your code stuff here in case of errors
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.