I created a WEB FORM which is supposed to forward the message(s) of people who want to contact me, right into my GMAIL's inbox. It was supposed to be simple: people who visit my site and want to CONTACT me are just supposed to fill out their name, email and message and click submit button which should forward the message to my gmail address. However, that doesn't happens and I can't figure out why. I tried to test it via XAMPP but I never receive anything in my inbox.
In fact, I always receive the message: SMTP ERROR: COULD NOT CONNECT TO SMTP HOST.
I am still new to web design and PHP so this is probably a basic question for you. I tried to solve this problem for a few days, asked for help on some forums but still couldn't find the solution.
I downloaded XAMPP 1.8.1. in ZIP form and extracted it to C:\xampp folder.
Then I started the Apache server and requested my php file via localhost/email/newnew.php
I simply filled the webform and clicked on submit button and then I receive the message: SMTP ERROR: COULD NOT CONNECT TO SMTP HOST.
Here is my PHP code:
<?php
require_once 'PHPMailer/class.phpmailer.php';
// form url sanitizing
$php_self = filter_input(INPUT_SERVER, 'PHP_SELF', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
// variable initializing
$name = '';
$email = '';
$message = '';
$errors = array();
// is form send?
if( isset( $_POST['submit'] ) ) {
// validate $_POST['name']
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_STRING );
if( '' == $name ) {
$errors[] = 'Please enter a valid name';
}
// validate $_POST['email']
$email = filter_input( INPUT_POST, 'email', FILTER_SANITIZE_EMAIL );
if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
$errors[] = 'Please enter a valid email';
}
// validate $_POST['message']
$message = filter_input( INPUT_POST, 'message', FILTER_SANITIZE_STRING );
if( '' == $message ) {
$errors[] = 'Please enter a valid message';
}
// If no errors
if( empty( $errors ) ) {
//values are valid, lets send an email
$mail = new PHPMailer();
// base parameters. working for me
$mail->IsSMTP(); // use SMTP
$mail->Host = "smtp.gmail.com"; // GMail
$mail->Port = 567; // I tried 465 but with no success
$mail->SMTPSecure = "ssl";
$mail->SMTPAuth = true; // turn on SMTP authentication
// adjust these lines
$mail->Username = "mymail@gmail.com";
$mail->Password = "mypassword";
$mail->SetFrom($email, $name);
$mail->AddAddress('myothermail@gmail.com', 'MyName');
$mail->Subject = "Feedback Form Results";
$mail->Body = $message;
// sending
if(!$mail->Send()) {
// first error message is just for debugging. This don't generate messages a user should read
// comment this and uncommend the second message for a more user friendly message
$errors[] = "Mailer Error: " . $mail->ErrorInfo;
//$errors[] = "email couldn't be send";
// Output Sanitizing for repopulating form
$name = filter_var( $name, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$email = filter_var( $email, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$message = filter_var( $message, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
} else {
// maybe you should generate/fill a success message here
// clear fields
$name = '';
$email = '';
$message = '';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>self referencing form</title>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="button" class="title">
<h6>Contact</h6>
</div>
<div id="dropbox">
<header class="title">
<h6>Whats up?</h6>
</header>
<?php if(!empty($errors)): ?>
<ul class="error">
<li><?php echo join('</li><li>', $errors); ?></li>
</ul>
<?php endif; ?>
<div class="contact-form">
<form action="<?php echo $php_self; ?>" method="post">
<!-- input element for the name -->
<h6><img src="img/person.png" alt=""> Name</h6>
<input type="text"
name="name"
value="<?php echo $name; ?>"
placeholder="Please enter your full name here"
required>
<!-- input element for the email -->
<h6><img src="img/email.png" alt=""> E-mail</h6>
<input type="email"
name="email"
value="<?php echo $email; ?>"
placeholder="Please enter your e-mail address"
required>
<!-- input element for the message -->
<h6><img src="img/message.png" alt=""> Message</h6>
<textarea name="message" placeholder="Type your message..." required><?php echo $message; ?></textarea>
<!-- input element for the submit button -->
<input name="submit" type="submit" value="Submit">
</form>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src='dropbox.js'></script>
</body>
</html>
Here is my CSS code:
@import url("reset.css");
#button {
position: absolute;
top: 0;
right: 10%;
color: #eee;
z-index: 2;
width: 175px;
background: #c20000;
text-align: center;
height: 40px;
-webkit-border-radius: 0px 0px 2x 2px;
border-radius: 0px 0px 2px 2px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-transform: uppercase;
}
#button:hover {
background: #da0000;
cursor: pointer;
}
#button > h6{
line-height: 40px;
margin: 0px;
padding-top: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
}
#dropbox {
position: absolute;
top: 0px;
right: 10%;
color: #eee;
z-index: 1;
background: #222222;
width: 350px;
display: none;
-webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
}
#dropbox .title {
height: 40px;
background: #414141;
}
#dropbox .title > h6{
line-height: 40px;
padding-left: 58px;
margin-top: 0px;
}
#dropbox {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-transform: uppercase;
}
#dropbox .contact-form {
margin: 10px;
}
#dropbox .contact-form h6{
margin: 5px;
}
#dropbox input {
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.9em;
outline: none;
border: none;
width: 320px;
max-width: 330px;
padding: 5px;
margin: 10px 0px;
background: #444444;
color: #eee;
}
#dropbox textarea {
height: 70px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.9em;
outline: none;
border: none;
width: 320px;
max-width: 320px;
padding: 5px;
margin: 10px 0px;
background: #444444;
color: #eee;
}
#dropbox input[type=submit] {
margin: 0px;
width: 330px;
cursor: pointer;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
}
#dropbox input[type=submit]:hover {
color: #eee;
background: #c20000;
}
Here is my JQuery:
$(document).ready(function () {
$('#button').mouseenter(function() {
if($('#dropbox').is(':hidden')) {
$('#dropbox').slideDown('fast', function() {
// slidedown animation
});
} else {
$('#dropdox').hide();
}
});
$('#dropbox').mouseleave(function() {
$('#dropbox').slideUp('fast', function() {
// slide back up
});
});
});
I downloaded PHP MAILER to C disc - xampp\htdocs\email\ and created a new subfolder called PHPMailer. In this folder I simply extracted the contents of the downloaded PHPMailer .zip archive.
Hope someone can help me with this so I can move on with my learning. Thank you all in advance!
