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

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
- <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" />
- </p>
- <p class="email">
- <input type="text" name="email" id="email" placeholder="" />
- </p>
- <p class="message">
- </p>
- <p class="button_submit">
- <input type="submit" name="send_message" value="Send" />
- </p>
- </form>
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
- }
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');
- $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);
- echo "<script>alert('Successfully send your message!'); window.location='index.php'</script>";
- }
- ?>
Output
This is the form where you can enter your full name, email, and message to contact any certain websites.
Add new comment
- 37 views