SweetAlert + 表单 HTML + PHP

编辑为完整代码修复联系方式.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" />        <title>Box personal portfolio Template</title>        <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" />        <link href="css/style.css" rel="stylesheet" />            <link href="sweet/sweetalert.css" type="text/css" rel="stylesheet" />    <script src="sweet/sweetalert.min.js" type="text/javascript"></script>        <script src="js/modernizr.js"></script>              </head>  <body>        <div id="preloader">      <div class="pre-container">        <div class="spinner">          <div class="double-bounce1"></div>          <div class="double-bounce2"></div>        </div>      </div>    </div>        <div class="container-fluid">            <header class="box-header">        <div class="box-logo">          <a href="index.html"            ><img src="img/logo.png" width="80" alt="Logo"          /></a>        </div>                <a class="box-primary-nav-trigger" href="#0">          <span class="box-menu-text">Menu</span          ><span class="box-menu-icon"></span>        </a>              </header>                  <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>          </div>        <div class="top-bar">      <h1>contact Me</h1>      <p><a href="#">Home</a> / Contact Me</p>    </div>            <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>            <footer>      <div class="container-fluid">        <p class="copyright">© Box Portfolio 2016</p>      </div>    </footer>            <a href="#0" class="cd-top"><i class="ion-android-arrow-up"></i></a>            <script src="js/jquery-2.1.1.js"></script>        <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>        <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);}请注意，我已经添加了甜蜜的警报，您可以继续并自定义电子邮件成功后显示的消息注意：不要忘记将您要接收电子邮件的电子邮件更改为您域中的电子邮件，否则电子邮件最终将无法发送或进入垃圾邮件

SweetAlert + 表单 HTML + PHP

1回答