Introduction
In this tutorial, we will handle the action of sending and receiving email whitin a contact form.
The contact form is an important thing in any website with witch you can keep communication with your visitors, customers, followers, ...
This is a complete script including email and data validation with Jquery, then sending email to the webmaster of the website and also receiving a confirmation email from the webmaster.
Content
- 0- Screenshots.
- 1- Contact Form (Html).
- 2- Data Validation using Jquery.
- 3- Email Validation using Javascript.
- 4- Sending Email including contact form data.
- 5- Receiving Confirmation Email.
-
Screenshots
1- Contact Form (Html)
We will create a contact form including 6 textfields and a submit button :
<!-- to get the response here -->
<div id="response_msg"><?php if ($response!='') { echo $response; } ?></div>
<!-- contact form -->
<div class=" well">
<div class="row">
<form action="index.php" method="POST">
<div class="form-group col-sm-6">
<label>Full Name</label>
<input type="text" name="fullname" id="fullname" class="form-control">
<span id="error-name"><br></span>
</div>
<div class="form-group col-sm-6">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control">
<span id="error-email"><br></span>
</div>
<div class="form-group col-sm-6">
<label>Company</label>
<input type="text" name="company" id="company" class="form-control">
<span id="error-company"><br></span>
</div>
<div class="form-group col-sm-6">
<label>Phone</label>
<input type="tel" name="phone" id="phone" class="form-control">
<span id="error-phone"><br></span>
</div>
<div class="form-group col-sm-12">
<label>Title</label>
<input type="text" name="title" id="title" class="form-control">
<span id="error-title"><br></span>
</div>
<div class="form-group col-sm-12">
<label>Message</label>
<textarea name="message" id="message" class="form-control" rows="6"></textarea>
<span id="error-message"><br></span>
</div>
<div class="form-group col-sm-12">
<button type="submit" name="submitContact" id="submitContact" class="btn btn-primary col-sm-6"> <i class="fa fa-arrow-right"></i> Send </button>
</div>
</form>
</div>
</div>
2- Data Validation using Jquery.
The data validation process is important in order to check if there are fields not set or data not valid. We use Jquery here to check the validation without reloading the form ( before submit data ). Add a js script to do it as follows :
As you can see in the previous js code, we added also a function that validate the format of the email to check if the email format is valid or not ://when click on "send' button $("#submitContact").click(function() { var fullname='', email='', company='', phone='', title='', message=''; //check if name is entered if ($("#fullname").val()==''){ $("#error-name").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Full Name Required !!</small>"); } else { fullname = $("#fullname").val(); $("#error-name").html(""); } //check if email is entered if ($("#email").val()==''){ $("#error-email").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Email Required !!</small>"); } else { //check if email is valid if (validateEmail($("#email").val())==false) { $("#error-email").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Email Format Non Valid !!</small>"); } else { email = $("#email").val(); $("#error-email").html(""); } } //check if company is entered if ($("#company").val()==''){ $("#error-company").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Company Required !!</small>"); } else { company = $("#company").val(); $("#error-company").html(""); } if ($("#phone").val()==''){ $("#error-phone").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Phone Required !!</small>"); } else { phone = $("#phone").val(); $("#error-phone").html(""); } if ($("#title").val()==''){ $("#error-title").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Title Required !!</small>"); } else { title = $("#title").val(); $("#error-title").html(""); } if ($("#message").val()==''){ $("#error-message").html("<small class='text-danger'><i class='fa fa-exclamation-triangle'></i> Message Required !!</small>"); } else { message = $("#message").val(); $("#error-message").html(""); } });
if (validateEmail($("#email").val())==false) { ...
. This validation function is the subject of the next section.
3- Email Validation using Javascript
Add a js script containing the following function : :
This function checks if the email address entered include the "@" and "." caracters of the email.function validateEmail (email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }
4- Sending Email including contact form data
After validating the data entered and the email format, the data will be transferred by a$_POSTaction to send email to the webmaster of the website including the contact form. This is the code of preparing and sending email ://to check if the form is already submittedif(isset($_POST['submitContact'])){
extract($_POST);
//$address = "HERE your email address";
$address = "contact@mes-dev.com";
// Below the subject of the email
$e_subject = 'You received an inquiry from ' . $fullname . '('.$email.')';
// body of the email.
$e_body = "You have been contacted by $fullname with additional message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$message\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $fullname via email, $contact_email or via phone $phone";
$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );
// headers of the email to send to webmaster
$headers = "From: $email" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;
if(mail($address, $e_subject, $msg, $headers)) {
// Success message
$response .= "<div class='alert alert-success text-center' >";
$response .= "<strong ><i class='fa fa-check-circle'> </i> Email Sent. </strong><br>";
$response .= "Thank you <strong>$fullname</strong>,<br> your message has been submitted. We will contact you shortly.";
$response .= "</div>";
} else {
$response .= "<div class='alert alert-danger' >";
$response .= "<strong ><i class='fa fa-exclamation-triangle'> An error occured when sending your request. Please try again. </strong><br>";
$response .= "</div>";
}
}
5- Receiving Confirmation Email
It is better for the user of the contact form to receive a confirmation email which states that his email is received by the webmaster. To do this, we add the following simple code :// ----- CODE for sending a confirmation email ------
$user = $email;
$usersubject = "Thank You";
// we add the email of the sender which is the webmaster -- use your preferred email address --
$userheaders = "From: noreply@mes-dev.com\n";
// content of the confirmation email
$usermessage = "Thank you for contacting us. We will reply shortly";
// send
mail($user,$usersubject,$usermessage,$userheaders);
//------ End of confirmation email code