How To Create PHP Contact Us Form For Your Website

Contact form as the name implies is a medium of interaction between a website owner and the viewer. The contact us form allow visitors to communicate with the site owner from the website. Using the contact us form, visitors can easily submit their query, views, opinions and suggestions to the site administrator about the website, service or product that is been provided by the site.

Contact us form is very crucial in website for easy communication between the viewer and the site owner.Through this medium the viewer send the administration email base on the services been offered and this medium also help the administrator to have quick response to this client.

In this tutorial we are taking a tour on how to create a basic contact us form using PHP,CSS and HTML in building this system. Contact us notify the admin via email whenever there is a request from client or suggestion.

This tutorial is divided into three parts the PHP part which serve as the engine per say,HTML which is just like the body and also the CSS which gives the HTML a beautiful layout.We are going to take it one step at a time,so relax as we move on.

Steps Involves in Creating A Simple Contact Us Form

Below are some of the steps which we are going to be undertaking.

1.    Create a Database if you have not done that and if you do not know how to create a database follow our tutorials on how to create a database here.

2.    Create the HTML page.In this section we are going to create a HTML page that will collect our values from our client and submit it to our website database and admin email account by adding the given below code to our HTML page of our website.

<h2>Basic PHP Contact Form</h2>
<div class="contactFrm">
    <?php if(!empty($statusMsg)){ ?>
        <p class="statusMsg <?php echo !empty($msgClass)?$msgClass:''; ?>"><?php echo $statusMsg; ?></p>
    <?php } ?>
    <form action="" method="post">
        <h4>Name</h4>
        <input type="text" name="name" placeholder="Your Name" required="">
        <h4>Email </h4>
        <input type="email" name="email" placeholder="email@example.com" required="">
        <h4>Subject</h4>
        <input type="text" name="subject" placeholder="Write subject" required="">
        <h4>Message</h4>
        <textarea name="message" placeholder="Write your message here" required=""> </textarea>
        <input type="submit" name="submit" value="Submit">
        <div class="clear"> </div>
    </form>
</div>

3.The Next step,is to create our PHP page that will help in posting this values to our database and and to admin email account by verifying the email, checking for blank input etc,escaping some variables before posting it to our database.Copy and Paste the below code to PHP page and save with .php extension.

<?php
$statusMsg = '';
$msgClass = '';
if(isset($_POST['submit'])){
    // Get the submitted form data
    $email = $_POST['email'];
    $name = $_POST['name'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    
    // Check whether submitted data is not empty
    if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
        
        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $statusMsg = 'Please enter your valid email.';
            $msgClass = 'errordiv';
        }else{
            // Recipient email
            $toEmail = 'your_email@gmail.com';
            $emailSubject = 'Contact Request Submitted by '.$name;
            $htmlContent = '<h2>Contact Request Submitted</h2>
                <h4>Name</h4><p>'.$name.'</p>
                <h4>Email</h4><p>'.$email.'</p>
                <h4>Subject</h4><p>'.$subject.'</p>
                <h4>Message</h4><p>'.$message.'</p>';
            
            // Set content-type header for sending HTML email
            $headers = "MIME-Version: 1.0" . "\r\n";
            $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
            
            // Additional headers
            $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
            
            // Send email
            if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
                $statusMsg = 'Your contact request has been submitted successfully !';
                $msgClass = 'succdiv';
            }else{
                $statusMsg = 'Your contact request submission failed, please try again.';
                $msgClass = 'errordiv';
            }
        }
    }else{
        $statusMsg = 'Please fill all the fields.';
        $msgClass = 'errordiv';
    }
}
?>

4.Next the step is to beautify our HTML page with some CSS code.To do this copy and paste the below code in your stylesheet page and save as .css extension.

.contactFrm h4 {
    font-size: 1em;
    color: #252525;
    margin-bottom: 0.5em;
    font-weight: 300;
    letter-spacing: 5px;
}
.contactFrm input[type="text"], .contactFrm input[type="email"] {
    width: 92%;
    color: #9370DB;
    background: #fff;
    outline: none;
    font-size: 0.9em;
    padding: .7em 1em;
    border: 1px solid #9370DB;
    -webkit-appearance: none;
    display: block;
    margin-bottom: 1.2em;
}
.contactFrm textarea {
    resize: none;
    width: 93.5%;
    background: #fff;
    color: #9370DB;
    font-size: 0.9em;
    outline: none;
    padding: .6em 1em;
    border: 1px solid #9370DB;
    min-height: 10em;
    -webkit-appearance: none;
}
.contactFrm input[type="submit"] {
    outline: none;
    color: #FFFFFF;
    padding: 0.5em 0;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-appearance: none;
    background: #9370DB;
    transition: 0.5s all;
    border: 2px solid #795CB4;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
    width: 47%;
    cursor: pointer;
}
.contactFrm input[type="submit"]:hover {
    background: none;
    color: #9370DB;
}
p.statusMsg{font-size:18px;}
p.succdiv{color: #008000;}
p.errordiv{color:#E80000;}

I believe this tutorial has help you a lot in carrying out this simple project on your website,do not forget to share with a friend by clicking on the share button below and you can also subscribe to get the latest update delivered to your inbox by clicking here

   

Get our updates delivered to your inbox