Skip to main content

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


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";
        }
?>

Labels:

Comments

  1. Rohit Bisht7 October 2020 at 23:27

    I have tried the code did some silly mistake didn't consider the sequence of variables in ajax variables fixed it by making it in correct sequence of the variables.

    ReplyDelete
  2. Rohit Bisht7 October 2020 at 23:30

    getting duplicate submissions how to fix this?

    ReplyDelete
    Replies
    1. Coding Archives8 October 2020 at 23:12

      Update Your Code with the following:-
      $sent=0;
      if ($sent == '0') {
      mail('youremail@gmail.com', 'Enquiry from Contact Page On Enquiry from your website contact form', $message,$headers);
      $sent = 1;
      echo "Message sent";
      }else{
      echo "Failed";
      }

      Delete
    2. Sarvesh23 January 2021 at 12:09

      Ok thanks

      Delete

Post a Comment

Popular posts from this blog

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

C++: 7. Inheritance

In C++, inheritance is a process in which one object acquires all the properties and behaviors of its parent object automatically. In such way, you can reuse, extend or modify the attributes and behaviors which are defined in other class. In C++, the class which inherits the members of another class is called derived class and the class whose members are inherited is called base class. The derived class is the specialized class for the base class. Single Level Inheritance When one class inherits another class, it is known as single level inheritance. Example:-  #include <iostream>   using namespace std;    class Account {      public:      float salary = 60000;     };      class Programmer: public Account {      public:      float bonus = 5000;        };        int main(void) {   ...
Post a Comment
Read more

Py: 2. Python Fundamentals

 Variable:-  Variable is a name that is used to refer to memory location. In Python, we don't need to specify the type of variable because Python is smart enough to get variable type.  Variable names can be any length can have uppercase, lowercase (A to Z, a to z), the digit (0-9), and underscore character(_). Syntax:-  num= 345 name= "mohit" Variable Types:- Number (Int, Float) Sting Boolean Get the Type of the variable:- x = 5 y = "John" print(type(x)) print(type(y)) Output:-  <class 'int'> <class 'str'> Operators:-  The operator can be defined as a symbol which is responsible for a particular operation between two operands. Python provides a variety of operators, which are described as follows. Arithmetic Operators:-  Assume variable a holds 10 and variable b holds 20, then − + Addition Adds values on either side of the operator. a + b = 30 - Subtraction Subtracts right hand operand from left hand operand. a – b = -10 * Multiplicat...
Post a Comment
Read more