I'm expanding upon a template I found online, and I'm currently working on the contact page. I cannot seem to get the form to send the email to my address despite the email address being set within the PHP config. It just comes up with a predefined error message. How do I rectify this?
I've changed the email address within the config.PHP file, I've taken a look at the javascript but I don't want to delete something crucial.
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> </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> </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> </p>
<p>
<span style="color: #f375ad;">Address:</span> <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
?>
