How to send the contact form to the mail?

1. Before submitting our form we have to validate it. So as a first step, we need to include the 'jquery.form-validator.min.js' plugin into our project. To do so, please download it from it's official webpage and copy the 'jquery.form-validator.min.js' file to 'js/dev/libs/plugins/' the folder.

2. Now we need a JavaScript file where we could write our custom JavaScript code. Just create a 'js/custom.js' file.

3. Once we have our JavaScript files we have to include them into our HTML file. So open your HTML file and at the end of it, after the 'js/all.js' file include these two files like shown in the screenshot. Following this order of the files is very important.

4. We should define some validation rules. This is done by adding some data attributes on our inputs, like shown in the screenshot. More information on this you can find on plugin's official documentation page.

5. Change all the 'ID' attributes from the inputs to 'name' attributes, like shown in the screenshot.

6. Set an ID on the form so we can select it from our JavaScript file afterwards. We'll give it the 'js-contact-form' ID. Also our form should have an 'action' attribute corresponding to our PHP file name so we'll use the 'send_mail.php'. See the screenshot.

7. Prepare a success modal at the end of your HTML file, see the screenshot. Just copy paste the code below.

<div class="modal-form-sent"><i class="fa fa-check"></i>Your message was sent successfully!</div>

8. Copy paste in you 'js/custom.js' file the code below.

jQuery(document).ready(function($) {

	// Define the submitForm function
	var submitForm = function ($form) {
		var formURL = $form.attr("action"); // Get form's action
		var postData = $form.serialize(); // Get form's data

		// Submit an AJAX request
		    url : formURL,
		    type: "POST",
		    data : postData,
		    success:function(data, textStatus, jqXHR) { // On success callback

		    	// Erase input content
		    	$form.find('input, textarea').val('');

		    	// Fade in the success modal and fade out after 2000ms (2 seconds)

		// Prevent the form from being submitted as default action
		return false;
	// Validate the form
  		form : '#js-contact-form',
  		onSuccess: submitForm // On success call the submitForm function


9. Here comes the PHP part. Create a 'send_mail.php' file at the root of your site and paste in it the code below.


	// Collect the data from the form.
	$full_name = htmlspecialchars($_POST["full-name"]);
	$email = htmlspecialchars($_POST["email"]);
	$website = htmlspecialchars($_POST["website"]);
	$company = htmlspecialchars($_POST["company"]);
	$country = htmlspecialchars($_POST["country"]);
	$message = htmlspecialchars($_POST["message"]);

	// Paste your mail here.
	$myemail = "";

	// Setting a content type.
	$headers = "Content-Type: text/html; charset=utf-8";
	// The message title which will be displayed in your mail box.
	$message_to_myemail = "New message from VSResume!";

	// Setting the message content, you are free to use HTML here.
	$message_content = "Name: $full_name <br/>Email: $email <br>Website: $website <br>Company: $company <br> Country: $country <br>Message: $message" ;
	// Send the mail.
	mail($myemail, $message_to_myemail, $message_content, $headers);


10. Additionally we need some basic styles for our success modal. Please copy paste somewhere in your CSS code the following lines of code.

	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 10;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 3px;
	color: #4b5;
	padding: 20px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	   -moz-transform: translateX(-50%) translateY(-50%);
	    -ms-transform: translateX(-50%) translateY(-50%);
	     -o-transform: translateX(-50%) translateY(-50%);
	        transform: translateX(-50%) translateY(-50%);

.modal-form-sent i{
	margin-right: 10px;

11. Now by submitting the form you should receive the filled data on your mail.

Please note, this will not work on your localhost. You have to move your project on the server and then you'll successfully receive all the messages!


Tags: mail, php, vsresume

Last update:
2015-11-08 12:31
Vlad Sargu
Average rating:0 (0 Votes)