Contact Form in HTML and CSS with PHP

Submitted by alpha_luna on Friday, September 23, 2016 - 12:09.

Contact Form in HTML and CSS with PHP

We are going to create a simple Contact Form in HTML and CSS with PHP. These simple tutorial, you can download for free. I will teach you in step by step on how to create a simple contact form. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

You will learn:

The user learn the basics of CSS styling.
The user learn to create contact form using HTML
The user learn to create stylish contact form using CSS

After creating this simple contact form, you will have the same output as you can see in the image below. Result

Creating Markup and CSS Style

Here is the basic HTML source code that we are going to use to create our simple contact form.

HTML Form Source Code

        <h2>Contact Form</h2>
        
        <form class="form" method="POST" action="contact_query.php">
                
                <p class="full_name">
                        <input type="text" name="full_name" id="full_name" placeholder="" autofocus="autofocus" />
                        <label for="full_name">Your Name</label>
                </p>
                
                <p class="email">
                        <input type="text" name="email" id="email" placeholder="" />
                        <label for="email">Your Email Address</label>
                </p>    
        
                <p class="message">
                        <textarea name="message" placeholder="" /></textarea>
                        <label for="message">Your Message</label>
                </p>
                
                <p class="button_submit">
                        <input type="submit" name="send_message" value="Send" />
                </p>
        </form>

After creating the markup to create a form, let's create

CSS Style

/* ===========================
   ====== Contact Form ======= 
   =========================== */
 
input, textarea {
        padding: 10px;
        border: 1px solid #E5E5E5;
        width: 200px;
        color: #999999;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;             
}
 
textarea {
        width: 400px;
        height: 150px;
        max-width: 400px;
        line-height: 18px;
}
 
input:hover, textarea:hover,
input:focus, textarea:focus {
        border-color: 1px solid #C9C9C9;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
        -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;     
}
 
.form label {
        margin-left: 10px;
        color: #999999;
        font-family:cursive;
}
 
/* ===========================
   ====== Submit Button ====== 
   =========================== */
 
.button_submit input {
        width: 100px; 
        font-size:18px;
        font-family:cursive;
        background-color: azure; 
        color: blue;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border: 1px solid blue
}

After using the source code above, our contact form is ready to have a PHP function. Then, let's begin.

PHP Source Code

For the function of our contact form, we are going to use PHP using PDO. And, we are going to use the $_POST function of PHP. Now, we are going to name it as "contact_query.php" file. Here's the source code.

<?php
include ('db.php');
 
if(isset($_POST['send_message'])) {
 
$full_name = $_POST['full_name'];
$email = $_POST['email'];
$message = $_POST['message'];
 
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$insert_query = "INSERT INTO tbl_contact (full_name, email, message)
VALUES (?, ?, ?)";
 
$insert = $conn->prepare($insert_query);
$insert->execute(array($full_name, $email, $message));
 
echo "<script>alert('Successfully send your message!'); window.location='index.php'</script>";
}
?>

We have three name tags that created. We have the Full Name, Email, and Message. This three name tags that we created in our contact form.

Output

This is the form where you can enter your full name, email, and message to contact any certain websites. Result

And, that's it. This is the steps on how to create simple Contact Form in HTML, CSS, and PHP. Kindly click the "Download Code" button below for full source code. Thank you very much. Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.