Contact form with PHP mail() and SMTP authentication
When you developing web sites in most cases you are facing up with necessity to create 'contact us' form. No matter if it is a simple landing page for a small business, a portfolio web site or a huge web platform, everyone wants to communicate, leave a feedback, ask question or whatever. Whereas some popular CMS platforms provide developers with different mailing addons, you might need something simple with possibility to customize it. Here is my simple 'contact us' form with HTML and PHP.
First of all let's create simple HTML form:
How can you send email messages directly from script? The best way is by using php mail() function.
The signature is pretty simple: mail(to, subject, message, headers, parameters);.
But the problem here is that php mail() by default doesn't support SMTP authentication,
required by many mail servers today. Luckely there is a free PEAR Mail
package in PHP4 and later versions, that will allow us to work with SMTP authentication.
<?php
require_once "Mail.php";
// read values from user inputs
$from = Trim(stripslashes($_POST['email']));
$name = Trim(stripslashes($_POST['name']));
$message = Trim(stripslashes($_POST['message']));
// set your email address and subject. Make body from values above
$to = "alex <akad.alex@gmail.com>";
$subject = "New Message from website!";
$body = "Name: ".$name."\n"."Message: ".$message;
// Set your smtp server, and login/password for authentification
$host = "cpanel.freehosting.com";
$username = "mailaccount@aleksandraweb.com";
$password = "here_is_your_password";
//create headers
$headers = array ('From' => $from,
'To' => $to,
'Subject' => $subject);
//set smptp connection
$smtp = Mail::factory('smtp',
array ('host' => $host,
'auth' => true,
'username' => $username,
'password' => $password));
//send mail
$mail = $smtp->send($to, $headers, $body);
//handling response and possible errors
if (PEAR::isError($mail)) {
echo("<p>" . $mail->getMessage() . "</p>");
} else {
echo("<p>Message successfully sent!</p>");
}
?>In the tag form in our html, I've added action='contact.php'
and method='post'. So when user clicks 'Send' button inside the form
it will trigger 'submit' event on the form, which will send data to contact.php.
Inside php we will parse data, create headers and body for the message,
set smtp authentication and finally send email. (Notice that action='contact.php' wouldn't work in jsFiddle!)
This solution works pretty good, but there are couple of things, that I don't like here. First of all, sending a message might take time and there is nothing that will indicate our user that message is processing. Another disturbing thing is that after submitting form, our page reloads. It in unnecessary, especially in case of landing page or SPA.
So, I've decided to add jQuery and handle submit event for the form before sending data to the server.
That allows me to use event.preventDefault() to stop reloading page after submition,
and add loading class while message is sending.
Also I've added 2 divs. One for showing details of sending message, another one is for loading mask. Here I added mask with header 'loading...' but you can use gif animation like this.
The full version of contact form with all files you can find here.