我很久以前就这样做过，但现在，我不记得了，我无法让它发挥作用......所以，我有一个表单，其中包含对另一个 file.php 的操作，用于发送电子邮件，我想发出一个甜蜜的警报来告诉人们，好吧，您的消息已发送...检查 CONTACT.PHP 中的代码 <!-- main-container --> <div class="container main-container"> <div class="col-md-6"> <form action="envia.php" name="envia" id="envia" method="post"> <div class="row"> <div class="col-md-6"> <div class="input-contact"> <input type="text" name="nome" id="nome" required> <span>Nome</span> </div> </div> <div class="col-md-6"> <div class="input-contact"> <input type="text" id="email" name="email" required> <span>Email</span> </div> </div> <div class="col-md-12"> <div class="input-contact"> <input type="text" name="assunto" id="assunto" required> <span>Assunto</span> </div> </div> <div class="col-md-12"> <div class="textarea-contact"> <textarea name="menssagem" id="mensagem" required></textarea> <span>Mensagem</span> </div> </div>我已经尝试了很多方法，我只是重置一切，现在我不知道该怎么办......
1 回答
心有法竹
TA贡献1866条经验 获得超5个赞
编辑为完整代码修复
联系方式.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Box personal portfolio Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="ionicons/css/ionicons.min.css" rel="stylesheet" />
<link rel="icon" href="img/fav.png" type="image/x-icon" />
<!-- main css -->
<link href="css/style.css" rel="stylesheet" />
<!-- Sweetalert -->
<!-- <link href="sweet/style.css" type="text/css" rel="stylesheet" /> -->
<link href="sweet/sweetalert.css" type="text/css" rel="stylesheet" />
<script src="sweet/sweetalert.min.js" type="text/javascript"></script>
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<!-- end Preloader -->
<div class="container-fluid">
<!-- box-header -->
<header class="box-header">
<div class="box-logo">
<a href="index.html"
><img src="img/logo.png" width="80" alt="Logo"
/></a>
</div>
<!-- box-nav -->
<a class="box-primary-nav-trigger" href="#0">
<span class="box-menu-text">Menu</span
><span class="box-menu-icon"></span>
</a>
<!-- box-primary-nav-trigger -->
</header>
<!-- end box-header -->
<!-- nav -->
<nav>
<ul class="box-primary-nav">
<li class="box-label">About me</li>
<li><a href="index.html">Intro</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="services.html">services</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li>
<a href="contact.html">contact me</a>
<i class="ion-ios-circle-filled color"></i>
</li>
<li class="box-label">Follow me</li>
<li class="box-social">
<a href="#0"><i class="ion-social-facebook"></i></a>
</li>
<li class="box-social">
<a href="#0"><i class="ion-social-instagram-outline"></i></a>
</li>
<li class="box-social">
<a href="#0"><i class="ion-social-twitter"></i></a>
</li>
<li class="box-social">
<a href="#0"><i class="ion-social-dribbble"></i></a>
</li>
</ul>
</nav>
<!-- end nav -->
</div>
<!-- top bar -->
<div class="top-bar">
<h1>contact Me</h1>
<p><a href="#">Home</a> / Contact Me</p>
</div>
<!-- end top bar -->
<!-- main-container -->
<div class="container main-container">
<div class="col-md-6">
<form name="envia" action="#" id="envia">
<div class="row">
<div class="col-md-6">
<div class="input-contact">
<input type="text" name="nome" id="nome" required />
<span>Nome</span>
</div>
</div>
<div class="col-md-6">
<div class="input-contact">
<input type="text" id="email" name="email" required />
<span>Email</span>
</div>
</div>
<div class="col-md-12">
<div class="input-contact">
<input type="text" name="assunto" id="assunto" required />
<span>Assunto</span>
</div>
</div>
<div class="col-md-12">
<div class="textarea-contact">
<textarea name="menssagem" id="mensagem" required></textarea>
<span>Mensagem</span>
</div>
</div>
<div class="col-md-12">
<input
id="submit"
type="submit"
name="enviar"
value="enviar"
class="btn btn-box"
/>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<h3 class="text-uppercase">Entre em contacto</h3>
<h5>Pedidos orçamento e esclarecimento de dúvidas.</h5>
<div class="h-30"></div>
<p>
<br />Poderá usar este formulário para esclarecimento de dúvidas ou
pedido de orçamento, para pedidos de orçamento deverá indicar o mais
claro possivel o que pretende.
</p>
<div class="contact-info">
<p><i class="ion-android-call"></i>911729199</p>
<p><i class="ion-ios-email"></i>info@obruno.pt</p>
</div>
</div>
</div>
<!-- end main-container -->
<!-- footer -->
<footer>
<div class="container-fluid">
<p class="copyright">© Box Portfolio 2016</p>
</div>
</footer>
<!-- end footer -->
<!-- back to top -->
<a href="#0" class="cd-top"><i class="ion-android-arrow-up"></i></a>
<!-- end back to top -->
<!-- jQuery -->
<script src="js/jquery-2.1.1.js"></script>
<!-- plugins -->
<script src="js/bootstrap.min.js"></script>
<script src="js/menu.js"></script>
<script src="js/animated-headline.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<!-- custom script -->
<script src="js/custom.js"></script>
<script>
// This will prevent the default button action and the page won't refresh
document.querySelector("#submit").addEventListener(
"click",
function (event) {
process();
},
false
);
// This will make a post request to your php file
function process() {
// Getting the inputs
var message = document.getElementById("mensagem").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("assunto").value;
var name = document.getElementById("nome").value;
// Some data validation to see if the user have filled the required fields
if (message && email && subject && name) {
event.preventDefault();
// Setting the AJAX request handler
var xmlhttp = new XMLHttpRequest();
// Waiting for a response
xmlhttp.onreadystatechange = function () {
// If the response is 200 aka "OK"
if (this.readyState == 4 && this.status == 200) {
// Show your success alert here
swal({
title: "Message Sent!",
text: "Thank you for contacting us.",
timer: 2000,
showConfirmButton: false,
});
document.getElementById("envia").reset();
return;
}
};
// Setting the request type and data to be sent
xmlhttp.open("POST", "envia.php", true);
xmlhttp.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
xmlhttp.send(
"nome=" +
name +
"&email=" +
email +
"&assunto=" +
subject +
"&mensagem=" +
message
);
} else {
// Alert the user to fill the required fields
console.log("please fill all required fields");
return;
}
}
</script>
</body>
</html>
发送.php
<?php
$nomeremetente = $_POST['nome'];
$emailremetente = $_POST['email'];
$emaildestinatario = 'info@mydomain.pt';
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'];
$content = '<strong>Formulário de Contato</strong><p><b>Nome:</b> ' . $nomeremetente . ' <p><b>E-Mail:</b> ' . $emailremetente . ' <p><b>Assunto:</b> ' . $assunto . ' <p><b>Mensagem:</b> ' . $mensagem . '</p><hr>';
$headers = array(
'From' => $emailremetente,
'Reply-To' => $emaildestinatario,
'MIME-Version' => '1.1',
'Content-type' => 'text/html;charset=UTF-8',
'X-Mailer' => 'PHP/' . phpversion()
);
if (isset($nomeremetente) && isset($emailremetente) && isset($emaildestinatario) && isset($assunto) && isset($mensagem) && isset($content)) {
mail($emaildestinatario, $assunto, $content, $headers);
echo "SUCCESS";
http_response_code(200);
} else {
echo "FAILED";
http_response_code(404);
}
请注意，我已经添加了甜蜜的警报，您可以继续并自定义电子邮件成功后显示的消息
注意：不要忘记将您要接收电子邮件的电子邮件更改为您域中的电子邮件，否则电子邮件最终将无法发送或进入垃圾邮件
- 1 回答
- 0 关注
- 114 浏览
添加回答
举报
0/150
提交
取消