我如何获得联系表单以在提交时发送电子邮件?

时间:2019-04-03 20:32:51

标签: javascript php html ajax

我正在扩展在网上找到的模板,目前正在联系页面上工作。尽管在PHP配置中设置了电子邮件地址,但似乎无法获得将电子邮件发送到我的地址的表单。它只是带有预定义的错误消息。我该如何纠正?

我已经更改了config.PHP文件中的电子邮件地址,看过了javascript,但是我不想删除一些重要内容。

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
      <title>Built By Bizarro: Contact</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="description" content="Built By Zane Donaghey" />
      <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
      <meta name="author" content="Zane Donaghey" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="shortcut icon" href="images/favicon.png" />
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css"  href='css/clear.css' />
        <link rel="stylesheet" type="text/css"  href='css/common.css' />
        <link rel="stylesheet" type="text/css"  href='css/font-awesome.min.css' />
        <link rel="stylesheet" type="text/css"  href='css/carouFredSel.css' />
        <link rel="stylesheet" type="text/css"  href='css/animated-headline.css' />
        <link rel="stylesheet" type="text/css"  href='css/sm-clean.css' />
        <link rel="stylesheet" type="text/css"  href='style.css' />

        <!--[if lt IE 9]>
                <script src="js/html5shiv.js"></script>
                <script src="js/respond.min.js"></script>
        <![endif]-->

    </head>
    <body class="page">

      <table class="doc-loader">
          <tbody>
              <tr>
                  <td>
                      <img src="images/3.gif" alt="Loading...">
                  </td>
              </tr>
          </tbody>
      </table>

      <div class="menu-wraper center-relative">
          <nav id="header-main-menu" class="big-menu">
              <ul class="main-menu sm sm-clean">
                  <li>
                      <a href="index.html">Home</a>
                  </li>
                  <li>
                      <a href="about.html">About</a>
                  </li>
                  <li>
                      <a href="contact.html">Contact</a>
                  </li>
                  <li>
                      <a href="portfolio.html">Portfolio</a>
                  </li>
              </ul>
          </nav>
          <div class="clear"></div>
          <br>
          <br>
          <div class="menu-social">
              <a href="https://twitter.com/BuiltByBizarro/">
                  <span class="fa fa-twitter"></span>
              </a>
              <a href="http://linkedin.com/in/builtbybizarro/">
                  <span class="fa fa-linkedin"></span>
              </a>
              <a href="http://facebook.com/BuiltByBizarro/">
                  <span class="fa fa-facebook"></span>
              </a>
              <a href="http://instagram.com/BuiltByBizarro/">
                  <span class="fa fa-instagram"></span>
              </a>
          </div>
      </div>

      <header class="header-holder center-relative relative">
          <div class="header-logo">
              <a href="index.html">
                  <img src="images/BBBLogo.png" alt="Built By Bizarro">
              </a>
          </div>
          <div class="header-txt">
              <h1 class="entry-title">
                  <span class="entry-title cd-headline letters type">
                      <span>Bizarrely</span>
                      <span class="cd-words-wrapper waiting">
                          <b class="is-visible">creative.</b>
                          <b>efficient.</b>
                          <b>innovative.</b>
                          <b>dedicated.</b>
                      </span>
                      <span class="sec-line">That's what sets me apart from my competition.</span>
                      <span style="color:#f271ab; font-weight: 700;">Built By Bizarro</span>
                  </span>
              </h1>
          </div>

            <div class="toggle-holder absolute">
                <div id="toggle" class="">
                    <div class="first-menu-line"></div>
                    <div class="second-menu-line"></div>
                    <div class="third-menu-line"></div>
                    <div class="fourth-menu-line"></div>
                </div>
            </div>
            <div class="clear"></div>
        </header>


        <div id="content" class="site-content">
            <article>
                <div class="content-1170 center-relative">
                    <div class="one_half ">
                        <p>For pricing enquiries, send me an email using this form</p>
                        <p>&nbsp;</p>
                        <p>Because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone and one.</p>
                        <p>&nbsp;</p>
                        <p>Which we intend to win. With a warning label this big, you know they gotta be fun. Bring me the forms I need to fill out to have her taken away. I decline the title of iron cook and accept the lesser title of zinc saucier, which I just made up. Dinosaurs are extinct today because they lacked opposable thumbs and the brainpower to build a space program. Houston, Tranquillity Base here.</p>
                        <p>&nbsp;</p>
                        <p>
                            <span style="color: #f375ad;">Address:</span>&nbsp;<strong>New York, NY, United States</strong>
                            <br>
                            <span style="color: #f375ad;">Phone:</span> <strong>+1 234-567-890</strong>
                            <br>
                            <span style="color: #f375ad;">Hours:</span> <strong>6:00 am – 2:00 am</strong>
                            <br>
                        </p>
                    </div>
                    <div class="one_half last">
                        <div class="contact-form">
                            <p><input id="name" type="text" name="your-name" placeholder="Name"></p>
                            <p><input id="contact-email" type="email" name="your-email" placeholder="Email"></p>
                            <p><input id="subject" type="text" name="your-subject" placeholder="Subject"></p>
                            <p><textarea id="message" name="your-message" placeholder="Message"></textarea></p>
                            <p><input type="submit" onClick="SendMail()" value="SEND"></p>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </article>


        </div>

        <div class="clear"></div>

        <footer class="footer">
            <div class="content-1170 center-relative">
                <ul id="footer-sidebar">
                    <li class="widget">
                        <div class="textwidget custom-html-widget">
                              <a href="https://twitter.com/BuiltByBizarro/">
                                  <span class="fa fa-twitter"></span>
                              </a>
                              <a href="http://linkedin.com/in/builtbybizarro/">
                                  <span class="fa fa-linkedin"></span>
                              </a>
                              <a href="http://facebook.com/BuiltByBizarro/">
                                  <span class="fa fa-facebook"></span>
                              </a>
                              <a href="http://instagram.com/BuiltByBizarro/">
                                  <span class="fa fa-instagram"></span>
                              </a>
                          </div>
                        </div>
                    </li>
                </ul>
            </div>
        </footer>

        <!--Load JavaScript-->
        <script src="js/jquery.js"></script>
        <script src='js/jquery.fitvids.js'></script>
        <script src='js/jquery.smartmenus.min.js'></script>
        <script src='js/imagesloaded.pkgd.js'></script>
        <script src='js/isotope.pkgd.js'></script>
        <script src='js/jquery.carouFredSel-6.0.0-packed.js'></script>
        <script src='js/jquery.mousewheel.min.js'></script>
        <script src='js/jquery.touchSwipe.min.js'></script>
        <script src='js/jquery.easing.1.3.js'></script>
        <script src='js/main-headline.js'></script>
        <script src='js/jquery.sticky-kit.min.js'></script>
        <script src='js/jquery.ba-throttle-debounce.min.js'></script>
        <script src='js/jquery.nicescroll.min.js'></script>
        <script src='js/main.js'></script>
    </body>
</html>

CSS:

/* CONTACT */

.contact-form
{
    max-width: 100%;
    margin: 0 auto;
}

.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea
{
    border: 0;
    border-bottom: 2px solid;
    padding-top: 13px;
    padding-bottom: 13px;
    margin: 30px 0;
    height: 28px;
    font-size: 17px;
    font-family:  'Lato', sans-serif;
    width: 100%;
    line-height: 25px;
    text-transform: uppercase;
}

.contact-form input[name="your-name"]
{
    margin-top: 0;
    padding-top: 0;
}

.contact-form textarea
{
    height: 150px;
}

.contact-form input[type=submit]
{
    display: inline-block;
    border: 2px solid;
    text-align: center;
    padding: 30px 0px;
    cursor: pointer;
    margin-bottom: 25px;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    font-family:  'Lato', sans-serif;
    font-weight: 700;
    width: 100%;
    text-transform: uppercase;
    font-size: 17px;
    transition: color .2s linear, border-color .2s linear;
}
.contact-form input[type=submit]:hover
{
    color: #f271ab;
    border-color: #f271ab;
}

.contact-form input[type=text]::-webkit-input-placeholder, .contact-form input[type=email]::-webkit-input-placeholder, .contact-form textarea::-webkit-input-placeholder
{
    font-family:  'Lato', sans-serif;
    color: #2f2f2f;
    font-weight: 700;
    font-size: 17px;
    line-height: 25px;
}
.contact-form input[type=text]::-moz-placeholder, .contact-form input[type=email]::-moz-placeholder, .contact-form textarea::-moz-placeholder
{
    font-family:  'Lato', sans-serif;
    color: #2f2f2f;
    font-weight: 700;
    font-size: 17px;
    line-height: 25px;
    opacity: 1;
}
.contact-form input[type=text]:-ms-input-placeholder, .contact-form input[type=email]:-ms-input-placeholder, .contact-form textarea:-ms-input-placeholder
{
    font-family:  'Lato', sans-serif;
    color: #2f2f2f;
    font-weight: 700;
    font-size: 17px;
    line-height: 25px;
}
.contact-form input[type=text]:-moz-placeholder, .contact-form input[type=email]:-moz-placeholder, .contact-form textarea:-moz-placeholder
{
    font-family:  'Lato', sans-serif;
    color: #2f2f2f;
    font-weight: 700;
    font-size: 17px;
    line-height: 25px;
    opacity: 1;
}
/* END CONTACT */

JS:

var SendMail = function () {

    var emailVal = jQuery('#contact-email').val();

    if (isValidEmailAddress(emailVal)) {
        var params = {
            'action': 'SendMessage',
            'name': jQuery('#name').val(),
            'email': jQuery('#contact-email').val(),
            'subject': jQuery('#subject').val(),
            'message': jQuery('#message').val()
        };
        jQuery.ajax({
            type: "POST",
            url: "php/sendMail.php",
            data: params,
            success: function (response) {
                if (response) {
                    var responseObj = jQuery.parseJSON(response);
                    if (responseObj.ResponseData)
                    {
                        alert(responseObj.ResponseData);
                    }
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                //xhr.status : 404, 303, 501...
                var error = null;
                switch (xhr.status)
                {
                    case "301":
                        error = "Redirection Error!";
                        break;
                    case "307":
                        error = "Error, temporary server redirection!";
                        break;
                    case "400":
                        error = "Bad request!";
                        break;
                    case "404":
                        error = "Page not found!";
                        break;
                    case "500":
                        error = "Server is currently unavailable!";
                        break;
                    default:
                        error = "Unexpected error, please try again later. Alternatively, you can still contact me @BuiltByBizarro on most major forms of social media.";
                }
                if (error) {
                    alert(error);
                }
            }
        });
    } else
    {
        alert('Your email is not in valid format');
    }


};

PHP:

<?php

include_once (dirname(dirname(__FILE__)) . '/config.php');

//Initial response is NULL
$response = null;

//Initialize appropriate action and return as HTML response
if (isset($_POST["action"])) {
    $action = $_POST["action"];

    switch ($action) {
        case "SendMessage": {
                if (isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["subject"]) && isset($_POST["message"]) && !empty($_POST["name"]) && !empty($_POST["email"]) && !empty($_POST["subject"]) && !empty($_POST["message"])) {

                    $message = "Name:" . $_POST["name"]. "<br/><br/>";
                    $message .= $_POST["message"];
                    $message .= "<br/><br/>";

                    $response = (SendEmail($message, $_POST["subject"], $_POST["email"], $email)) ? 'Message Sent' : "Sending Message Failed";
                } else {
                    $response = "Sending Message Failed";
                }
            }
            break;
        default: {
                $response = "Invalid action is set! Action is: " . $action;
            }
    }
}


if (isset($response) && !empty($response) && !is_null($response)) {
    echo '{"ResponseData":' . json_encode($response) . '}';
}

function SendEmail($message, $subject, $from, $to) {
    $isSent = false;
    // Content-type header
    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    // Additional headers
    // $headers .= 'To: ' . $to . "\r\n";
    $headers .= 'From: ' . $from . "\r\n";

    mail($to, $subject, $message, $headers);
    if (mail) {
        $isSent = true;
    }
    return $isSent;
}

?>


<?php

//SITE GLOBAL CONFIGURATION
$email = "admin@builtbybizarro.com";   //<-- Your email

?>

1 个答案:

答案 0 :(得分:0)

您的问题,至少是您如何措辞,是如何使用PHP发送电子邮件,因此其他代码非常不必要,只会使代码混乱(不是一个大问题,只是一个坏习惯)。

现在我们已经无法使用它了,默认的PHP mail()函数不允许进行SMTP身份验证,这是一个问题,因为即使是最基本的安全性测量也需要它。

以我的经验,用PHP邮寄邮件有时会非常痛苦,最人性化且功能齐全的解决方案是使用PHP mailerPEAR之类的库。链接的GitHub页面上提供了PHP邮件程序的一个很好的示例,here

相关问题