Your site is built in HTML and it have contact form. You’re wanting to send the mail to your email address. But you’re unable to do this. In this tutorial I shall show you how you will do it. You need small PHP help about it. Hope that you have PHP knowledge.
Creating HTML Contact Form
Create a HTML file contact.html and put into your project/site folder. Now open the file and add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en-US" prefix="og: http://ogp.me/ns#"> <head> <title>Contact Us</title> </head> <body> <div class="cf-wrap"> <h1 class="heading">Contact Form</h1> <form name="contact-form" class="contact-form" action="" method="post" autocomplete="off"> <p> <label>Name</label> <input type="text" name="name" id="cf-name" placeholder="Enter Your Name" class="cf-field" autocomplete="off"> </p> <p> <label>Email</label> <input type="email" name="email" id="cf-email" placeholder="Enter Your Email Address" class="cf-field" autocomplete="off"> </p> <p> <label>Subject</label> <input type="text" name="subject" id="cf-subject" placeholder="Enter Subject" class="cf-field" autocomplete="off"> </p> <p> <label>Message</label> <textarea name="name" id="cf-message" placeholder="Enter Your Query" class="cf-field" cols="80" rows="8"></textarea> </p> <div class="button" onclick="JavaScript:SendMail();" role="button">Send</div> </form> <div class="response"></div> </div> </body> </html> |
7: Form is wrapping by div.
8: Adding the page title
9: Starting the form
10-13: Crating the name field
14-17: Creating the email field
19-22: Creating subject field
24-27: Creating the message/query textarea fiel
29: Creating the SEND button
31: Form tag is ending
Giving the professional look
Creating a folder “css” into project/site folder and save the “style.css” file there. Open this CSS file and drop this CSS code there.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: 'Varela Round', sans-serif; font-size: 16px; font-weight: 400; } label { color: #555; clear: both; display: block; font-family: 'Varela Round', sans-serif; padding: 0 0 5px; } input, textarea { background: #fff; border: 2px solid #ccc; -webkit-box-shadow: 0px 2px 0px #cecece; -moz-box-shadow: 0px 2px 0px #cecece; box-shadow: 0px 2px 0px #cecece; border-radius: 5px; display: block; letter-spacing: 0.8px; margin-bottom: 10px; padding: 20px; width: 100%; } input:focus, textarea:focus { border-color: #aaa; -webkit-box-shadow: 0px 2px 0px #aaa; -moz-box-shadow: 0px 2px 0px #aaa; box-shadow: 0px 2px 0px #aaa; outline: 0; outline: none; } ::placeholder { color: #ccc; font-size: 14px; } .cf-wrap { padding: 0 15px; max-width: 450px; margin: 0 auto; width: 100%; } .heading { color: #666; font-family: 'Playfair Display', sans-serif; font-size: 38px; font-weight: 700; } .contact-form p { display: inline-block; padding: 0; margin: 0 0 15px; width: 100%; } .button { background: #555; border: 2px solid #555; border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; font-weight: 700; letter-spacing: 0.8px; padding: 20px 40px; text-transform: uppercase; width: auto; } .button:hover { background: #fff; border: 2px solid #444; color: #444; } .error { color: #900; clear: both; display: block; font-size: 13px; } .response { clear: both; display: block; margin-top: 17px; } |
Now you will open the contact.html file and add the following two lines above the </head>
HTML tag.
1 2 |
<link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Playfair+Display:700|Varela+Round:400,700" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> |
I am using the Playfair Display & Varela Round google fonts. You can change it.
Form will be look like the attached screenshot
Creating JS file
Now we shall create a JS file. This JS file will validate the form’s data and send the mail via JQuery AJAX method. So Google JQuery API is using here. Create a folder “js” inside your project/site folder and save a file “scripts.js” there. This JS file is containing the following the JavaScript codes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
jQuery(document).ready(function(){ jQuery('input,textarea').on('focusin', function(){ var placeholder = jQuery(this).attr('placeholder'); jQuery(this).data('holder', placeholder ); jQuery(this).attr('placeholder', ''); }); jQuery('input,textarea').on('focusout', function(){ jQuery(this).attr('placeholder', $(this).data('holder')); }); }); function SendMail() { var bool = true; if( CF_FormValidation( bool ) ) { var name = jQuery('#cf-name').val(), email = jQuery('#cf-email').val(), subject = jQuery('#cf-subject').val(), message = jQuery('#cf-message').val(); jQuery('.response').text('Sending the mail. Please wait...'); jQuery.ajax( { url: 'send-mail.php', // You will fix the path method: 'post', data: { name : name, email : email, subject : subject, message : message } }) .done( function(response) { jQuery('.response').text(response); jQuery('.contact-form').trigger("reset"); }); } } function CF_FormValidation( bool ) { var name = jQuery('#cf-name'), email = jQuery('#cf-email'), subject = jQuery('#cf-subject'), message = jQuery('#cf-message'); var strPatt = /^\s*$/; var emailPatt = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; if( name == typeof 'undefined' || strPatt.test(name.val()) ) { bool = false; if( name.closest('p').find('.error').length === 0 ) { name.closest('p').append('<div class="error">Enter Your Name</div>'); } } else { name.closest('p').find('.error').remove(); } if( email == typeof 'undefined' || ! emailPatt.test(email.val()) ) { bool = false; if( email.closest('p').find('.error').length === 0 ) { email.closest('p').append('<div class="error">Enter Your Email Address</div>'); } } else { email.closest('p').find('.error').remove(); } if( subject == typeof 'undefined' || strPatt.test(subject.val()) ) { bool = false; if( subject.closest('p').find('.error').length === 0 ) { subject.closest('p').append('<div class="error">Enter Subject</div>'); } } else { subject.closest('p').find('.error').remove(); } if( message == typeof 'undefined' || strPatt.test(message.val()) ) { bool = false; if( message.closest('p').find('.error').length === 0 ) { message.closest('p').append('<div class="error">Enter Your Query</div>'); } } else { message.closest('p').find('.error').remove(); } return bool; } |
1-11: Hiding the placeholder text on focus
13-38: SendMail() JS function is validating the submitted data and sending the mail via AJAX. SendMail() function will trigger when user will click on the SEND button.
40-78: CF_FormValidation() is a helper function which is checking that users are submitting the data in proper format or not.
Again open the contact.html file and add this two lines above </body>
HTML tag.
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/scripts.js?ver=1.0"></script> |
Implementing the PHPMailer
Now we shall write the PHP script which will send the mail to administrator’s email address. I am using the PHPMailer library. Click on the link and download the PHPMailer library from github. Extract it on local computer, create PHPMailer folder into your project/site folder and upload the Exception.php, PHPMailer.php and SMTP.php files there. If you will send the mail via SMTP then SMTP.php is required.
Next step is that we shall write small PHP snippet which will retrieve the name, email, subject and message from users and send the mail with this details.
In SendMail() function of scripts.js file I write send-mail.php and this file will locate into project/site folder. So create a new PHP file send-mail.php, put into your project/site folder and add the following PHP snippets:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?php /** * Sending the mail */ $name = trim( $_POST['name'] ); $email = trim( $_POST['email'] ); $subject = $_POST['subject']; $message = $_POST['message']; if( empty( $name ) || empty( $email ) ) { echo "Failed. You did not provide your name or email address". die(); } use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Exception; include 'PHPMailer/Exception.php'; include 'PHPMailer/PHPMailer.php'; include 'PHPMailer/SMTP.php'; $mail = new PHPMailer(true); // Passing `true` enables exceptions try { //Server SMTP settings $mail->SMTPDebug = 2; // Enable verbose debug output $mail->isSMTP(); // Set mailer to use SMTP $mail->Host = 'smtp1.example.com;smtp2.example.com'; // Specify main and backup SMTP servers $mail->SMTPAuth = true; // Enable SMTP authentication $mail->Username = 'user@example.com'; // SMTP username $mail->Password = 'secret'; // SMTP password $mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted $mail->Port = 587; // TCP port to connect to //Recipients $mail->setFrom($email, $name); $mail->addAddress('ADMIN EMAIL HERE', 'ADMI NNAME OR SITE NAME'); // Add a recipient //Content $mail->isHTML(true); // Set email format to HTML $mail->Subject = $subject; $mail->Body = str_replace( "\n", '<br/>', $message ); $mail->AltBody = $message; $mail->send(); echo 'Thank you for contacting us. You will be notified shortly.'; } catch (Exception $e) { echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo; } die(); |
You will setting all the parameters with your details.
All are done. Now you will browse the contact.html page and test the mail.
Feel free contact me if you need any help.
Leave a Reply