Tuesday, May 21, 2013

How to design and email a simple contact form using PHP

This post goes to out those who might be going through a tough time emailing a simple contact form using PHP .The example below uses a mix of jquery and PHP..

For quite sometime,I have been struggling with the same issue..After googling through a couple of good articles,I have finally managed to summarize the whole process as highlighted below.


I have also used "jquery" here coz I wanted to trap the output from the processing php and include some meaningful text for the end user in "<div id="created"></div>" after the form has been submitted



To summarize, the 3 objectives achieved in the example below are as follows:
1.HTML markup for the "contact form"
2. Create the processing "PHP" to submit and email the form
3.Add the "jquery" part

                                              

*****HTML*******


<div class="wrapper">

        <div id="main">
       
        <!-- Form -->
        <form id="contact-form" action="send_form_email.php" method="post">
           
            <div>
                <label>
                    <span>Name: (required)</span>
                    <input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
                </label>
            </div>
            <div>
                <label>
                    <span>Email: (required)</span>
                    <input name="email" placeholder="Please enter your email address" type="email" tabindex="2" required>
                </label>
            </div>
            <div>
                <label>
                    <span>Telephone: (required)</span>
                    <input name="phone" placeholder="Please enter your number" type="tel" tabindex="3" required>
                </label>
            </div>
           
            <div>
                <button name="submit" type="submit" id="contact-submit">Send Email</button>
            </div>
            <div id="created"></div>
        </form>
        <!-- /Form -->
       
        </div>
    </div>

*I am not suggesting any particular CSS here .You are free to use your own creativity and style up the form..A couple of good inspirations would be:


  • *****send_form_email.php******

     <?php
    if(isset($_POST['email'])) {
    // EDIT THE 2 LINES BELOW AS REQUIRED
        $email_to = "abc@gmail.com";//Include the receipient email address here
        $email_subject = "Test";//Change it to a custom one of your choice
      
      $first_name = $_POST['name'];
     
        $email_from = $_POST['email'];
        $telephone = $_POST['phone'];
     
         $email_message = "Form details below.\n\n";
       
        function clean_string($string) {
          $bad = array("content-type","bcc:","to:","cc:","href");
          return str_replace($bad,"",$string);
        }
       
        $email_message .= "Name: ".clean_string($first_name)."\n"; 
        $email_message .= "Email: ".clean_string($email_from)."\n";
        $email_message .= "Telephone: ".clean_string($telephone)."\n";
      
       
       
    // create email headers
    $headers = 'From: '.$email_from."\r\n".
    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
    ?>

    <!-- include your own success text here -->


    Thank you for contacting us.


    <?php

    }
    ?>
     

    *****jquery******

    Add the snippet below just before the ending <body>tag..
    Be sure to include the jquery library in the <HEAD> tag for this part to run properly.
    e.g.<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    The code below will trigger on clicking on the form "submit" button ,fetch output from the processing PHP and add a text within <div id="created"></div> as "Thank you for contacting us."

    <script >
    jQuery(document).ready(function() {
        $('#contact-form').submit(function() { // catch the form's submit event
          $(this).css({'cursor':'wait'}); //This will change the cursor to "busy"
              $.ajax({ // create an AJAX call...      
          
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $('#created').html(response); // update the DIV
                $('#contact-form').css({'cursor':'default'});//This will change the cursor back to "normal"
               
                $('#contact-form')[0].reset();
            }
        });
        return false; // cancel original event to prevent form submitting
       
    });
        });
    </script>
    Here's how my final product looks:
Post a Comment