PHP: 1. Simple Form Submission with Mail & Ajax Functionality

If you are looking to make your website contact form functional then the following code may help you around, You just follow the steps given and you are done, The code will be helpful for both the person the one who have no coding language and for the intermediate developer as well.

HTML File: contact.html

<form action=""> 

         <input type="text" placeholder="NAME" name="name" id="name"/>

         <input type="email" placeholder="E-MAIL" name="email" id="email" />

         <input type="text" placeholder="PHONE" name="phone" id="phone"/>

         <!--HTML For Checkboxes-->

         <div class="form-group">

            <label>Service you are looking for </label>

            <input type="checkbox" value="training" name="service" id="training"/>

            <span>TRAINING</span>                                   

            <input type="checkbox" value="exhibition" name="service" id="exhibition"/>

            <span>EXHIBITION</span>

            <input type="checkbox" value="event" name="service" id="event"/>

            <span>EVENT</span>

         </div>

        <!--HTML For Checkboxes-->

         <textarea placeholder="MESSAGE" rows="2" name="msg" id="msg"></textarea>

         <input type="button" value="send" id="submit">

        <!--HTML For Error & Success Message-->

         <span id="error_message" class="text-danger"></span>

         <span id="success_message" class="text-success"></span>

        <!--HTML For Error & Success Message-->

</form> 

Jquery

<script>

        $("#submit").click(function(){

            var name = $('#name').val();

            var email =$('#email').val();

            var phone =$('#phone').val();

            /*Array for Service Checkboxes*/

            var service = new Array();

            /*Pushing The Checked values in array*/

            $('input[name="service"]:checked').each(function() {

                service.push(this.value);

            });

            var msg = $('#msg').val();

            if(name=='' || email=='' || phone=='' || service=='' || msg==''){

                $('#error_message').html('All fields are required');

            }else{

                $('#error_message').html('');

                $.ajax({

                    url:'mail.php',

                    method:'POST',

                    data:{name:name,email:email,phone:phone,service:service,msg:msg},

                    success:function(data){

                        $("form").trigger("reset");

                        $('#success_message').fadeIn().html(data);

                        $('#success_message').fadeOut(5000);

                    }

                });

            }

        });

    </script>

PHP File: mail.php

<?php

        $name = $_POST['name'];

        $email = $_POST['email'];

        $phone = $_POST['phone'];   

        /*Breaking the jquery array with implode function*/

        $service = implode(' | ',($_POST['service']));  

        $msg = $_POST['msg'];     

        $message = 'Name: '.$name.'<br>';

        $message .= '  Email: '.$email.'<br>';

        $message .= '  Phone: '.$phone.'<br>';

        $message .= '  Service: '.$service.'<br>';

        $message .= '  Message: '.$msg;

        $headers = 'MIME-Version: 1.0' . "\r\n";

        $headers .= 'Content-Type: text/html; charset=ISO-8859-1' . "\r\n";

        mail('youremail@gmail.com','Enquiry from your website contact form',$message,$headers);

        if(mail('youremail@gmail.com','Enquiry from your website contact form',$message,$headers)){

            echo "Message sent";

        }else{

            echo "Failed";

        }

?>