Have you ever wanted to create a PHP mail form on your website? Even if you have no idea what you’re doing, this guide will help you get your form up and running in no time.
You’re going to need to work from 4 files:
- HTML file, which holds the actual form.
- PHP file, which will compile the form contents, validate and actually send the email.
- Javascript file, which will help validate the form fields and keep spam bots from flooding your inbox.
- Another HTML file, which will serve as a thank you page when the form submission is completed successfully.
We are going to be creating a simple form, featuring a First Name, Last Name, Email, Phone and Message inputs. We will also be directing the post of the form to our PHP file, sendmail.php, which will take care of the rest of the processing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your simple Contact Form</title>
</head>
<body>
<form method="post" action="sendmail.php" name="contactform">
<input type="input" id="fname" name="fname" />
<label for="fname">First Name</label>
<input type="input" id="lname" name="lname" />
<label for="lname">Last Name</label>
<input type="input" id="email" name="email" />
<label for="email">Email</label>
<input type="input" id="phone" name="phone" />
<label for="phone">Telephone</label>
<textarea id="message" name="message" rows="6"></textarea>
<label for="message">Message</label>
<input type="submit" id="submit" name="submit" value="Submit Form" />
</form>
<script src="validate.js"></script>
</body>
</html>Next, we will be creating the PHP sendmail.php script.
<?php
$errors = ‘’;
$fname = $_POST[‘fname’];
$lname = $_POST[‘lname’];
$email_address = $_POST[‘email’];
$phone = $_POST[‘phone’];
$message = $_POST[‘message’];
$myemail = ‘email@randomemail.com’; // Your email address goes here
if(empty($_POST[‘fname’]) ||
empty($_POST[‘lname’]) ||
empty($_POST[‘email’]) ||
empty($_POST[‘phone’]) ||
empty($_POST[‘message’]))
{
echo ‘There was an issue with your form submission, please try again.’;
}
if (!preg_match(
“/^[_a-z0–9-]+(\.[_a-z0–9-]+)*@[a-z0–9-]+(\.[a-z0–9-]+)*(\.[a-z]{2,3})$/i”,
$email_address))
{
echo ‘Your email address is not valid.’;
}
if( empty($errors))
{
$to = $myemail;
$email_subject = “Contact form submission from $fname $lname”;
$email_body = “You have received a new message. “.
“ Here are the details:\n Name: $fname $lname \n “.
“Email: $email_address\n Phone: $phone\n Message \n $message”;
$headers = “From: $myemail\n”;
$headers .= “Reply-To: $email_address”;
mail($to,$email_subject,$email_body,$headers);
//redirect to the ‘thank you’ page
header(‘Location: thank-you.html’);
}
?>The javascript form validator is rather simple, but effective.
var frmvalidator = new Validator("contactform");
frmvalidator.addValidation("fname", "req", "Please provide your first name");
frmvalidator.addValidation("lname", "req", "Please provide your last name");
frmvalidator.addValidation("email", "req", "Please provide your email");
frmvalidator.addValidation("phone", "req", "Please provide your phone number");
frmvalidator.addValidation("email", "email", "Please enter a valid email address");Lastly, the thank you page for successful submission of the form.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thank you for contacting me</title>
</head>
<body>
<h1>Thank you</h1>
<p>Your contact form submission was successful!</p>
<p><a href="index.html">Click here</a> to return to the form</p>
</body>
</html>That’s it! Feel free to modify this script as you see necessary.
