SweetAlert + 表单 HTML + PHP
我很久以前就这样做过，但现在，我不记得了，我无法让它发挥作用......
所以，我有一个表单，其中包含对另一个 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>
我已经尝试了很多方法，我只是重置一切，现在我不知道该怎么办......
收到一只叮咚浏览 115回答 1
1回答
-
心有法竹
编辑为完整代码修复联系方式.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);}请注意，我已经添加了甜蜜的警报，您可以继续并自定义电子邮件成功后显示的消息注意：不要忘记将您要接收电子邮件的电子邮件更改为您域中的电子邮件，否则电子邮件最终将无法发送或进入垃圾邮件
随时随地看视频慕课网APP
PHP