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


    contact-form-with-email

    contact-form-with-email

    contact-form-with-email

    contact-form-with-email


    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 :
    //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("");
    				
    			}
    			
            });

    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 :
    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 : :
    function validateEmail (email) {
    			return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    		}
    This function checks if the email address entered include the "@" and "." caracters of the email.

    4- Sending Email including contact form data


    After validating the data entered and the email format, the data will be transferred by a $_POST action 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 submitted
    

        if(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 


You can download the Ready-To-Use script with detailed information
Item size 0.04 Mb
File type ZIP
Please note that the support price mentioned is intended only to improve our services and not for commercial purposes.

No refund/cancellation will be entertained for the paid amount by any supporter through the online payment gateway.