为了账号安全,请及时绑定邮箱和手机立即绑定

SweetAlert + 表单 HTML + PHP

SweetAlert + 表单 HTML + PHP

PHP
收到一只叮咚 2024-01-19 15:23:01
我很久以前就这样做过,但现在,我不记得了,我无法让它发挥作用......所以,我有一个表单,其中包含对另一个 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);

}

请注意,我已经添加了甜蜜的警报,您可以继续并自定义电子邮件成功后显示的消息


注意:不要忘记将您要接收电子邮件的电子邮件更改为您域中的电子邮件,否则电子邮件最终将无法发送或进入垃圾邮件


查看完整回答
反对 回复 2024-01-19
  • 1 回答
  • 0 关注
  • 114 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信