A contact form on your site allows visitors to communicate with the site owner. In this post, I build a Simple PHP Contact Form to process your contact form data in just a few steps below.
Step 1: Create a "form.html" file then copy and paste the demo code below I have provided
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8">
5: <title>PHP Contact Form</title>
6: <link rel="stylesheet" href="style.css">
7: </head>
8: <body>
9: <div class="container">
10: <form id="contact" action="send.php" method="POST">
11: <h3>Contact Us</h3>
12: <fieldset>
13: <input name="name" placeholder="Full Name" type="text" required>
14: </fieldset>
15: <fieldset>
16: <input name="email" placeholder="Email Address" type="email" required>
17: </fieldset>
18: <fieldset>
19: <input name="phone" placeholder="Phone Number (optional)" type="tel">
20: </fieldset>
21: <fieldset>
22: <input name="subject" placeholder="Subject (optional)" type="text">
23: </fieldset>
24: <fieldset>
25: <textarea name="msg" placeholder="Type your message here..." required></textarea>
26: </fieldset>
27: <fieldset>
28: <input name="submit" type="submit" value="Send Message">
29: </fieldset>
30: </form>
31: </div>
32: </body>
33: </html>
Step 2: Create a "style.css" file then copy and paste the demo code below I have provided :
1: @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
2: * {
3: margin: 0;
4: padding: 0;
5: box-sizing: border-box;
6: -webkit-box-sizing: border-box;
7: -moz-box-sizing: border-box;
8: -webkit-font-smoothing: antialiased;
9: -moz-font-smoothing: antialiased;
10: -o-font-smoothing: antialiased;
11: font-smoothing: antialiased;
12: text-rendering: optimizeLegibility;
13: }
14: body {
15: font-family: "Roboto", Helvetica, Arial, sans-serif;
16: font-weight: 100;
17: font-size: 12px;
18: line-height: 30px;
19: color: #777;
20: background: #FE5E00;
21: }
22: .container {
23: max-width: 400px;
24: width: 100%;
25: margin: 0 auto;
26: position: relative;
27: }
28: #contact input[type="text"],
29: #contact input[type="email"],
30: #contact input[type="tel"],
31: #contact textarea,
32: #contact input[type="submit"] {
33: font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
34: }
35: #contact {
36: background: #F9F9F9;
37: padding: 25px;
38: margin: 150px 0;
39: box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
40: }
41: #contact h3 {
42: display: block;
43: font-size: 30px;
44: font-weight: 300;
45: margin-bottom: 20px;
46: text-align: center;
47: }
48: fieldset {
49: border: medium none !important;
50: margin: 0 0 10px;
51: min-width: 100%;
52: padding: 0;
53: width: 100%;
54: }
55: #contact input[type="text"],
56: #contact input[type="email"],
57: #contact input[type="tel"],
58: #contact textarea {
59: width: 100%;
60: border: 1px solid #ccc;
61: background: #FFF;
62: margin: 0 0 5px;
63: padding: 10px;
64: }
65: #contact input[type="text"]:hover,
66: #contact input[type="email"]:hover,
67: #contact input[type="tel"]:hover,
68: #contact textarea:hover {
69: -webkit-transition: border-color 0.3s ease-in-out;
70: -moz-transition: border-color 0.3s ease-in-out;
71: transition: border-color 0.3s ease-in-out;
72: border: 1px solid #aaa;
73: }
74: #contact textarea {
75: height: 100px;
76: max-width: 100%;
77: resize: none;
78: }
79: #contact input[type="submit"] {
80: cursor: pointer;
81: width: 100%;
82: border: none;
83: background: #FE5E00;
84: color: #FFF;
85: margin: 0 0 5px;
86: padding: 10px;
87: font-size: 15px;
88: }
89: #contact input[type="submit"]:hover {
90: background: #E54801;
91: -webkit-transition: background 0.3s ease-in-out;
92: -moz-transition: background 0.3s ease-in-out;
93: transition: background-color 0.3s ease-in-out;
94: }
95: #contact input:focus,
96: #contact textarea:focus {
97: outline: 0;
98: border: 1px solid #FE5E00;
99: }
100: ::-webkit-input-placeholder {
101: color: #888;
102: }
103: :-moz-placeholder {
104: color: #888;
105: }
106: ::-moz-placeholder {
107: color: #888;
108: }
109: :-ms-input-placeholder {
110: color: #888;
111: }
Step 3: Create a "send.php" file then copy and paste the demo code below I have provided. Make sure replace my sample email address with site owner email address to receive an email from the visitor.
1: <?php
2: if ( isset($_POST['submit']) ) {
3: $f_name = $_POST['name'];
4: $e_mail = $_POST['email'];
5: $phone_n = $_POST['phone'];
6: $subject = $_POST['subject'];
7: $msg_b = $_POST['msg'];
8: $message = "Name : " . $f_name . " <br/><br/>";
9: $message .= "E-mail : " . $e_mail . " <br/><br/>";
10: $message .= "Phone : " . $phone_n . " <br/><br/>";
11: $message .= "Subject : " . $subject . " <br/><br/>";
12: $message .= "Message Body : " . "<br/>".$msg_b;
13: $header = "From: " . $e_mail . "\r\n";
14: $header .= "Reply-To: " . $e_mail . "\r\n";
15: $header .= "Content-Type: text/html";
16: $success = mail("contactsohelrana@gmail.com", $subject, $message, $header);
17: if ( isset($success) ) {
18: echo "<h1>Thank you for your message. It has been sent.</h1>";
19: }else{
20: echo "<h1>There was an error trying to send your message. Please try again later.</h1>";
21: }
22: }else{
23: echo "<h1>Silence is golden.</h1>";
24: }
25: ?>
Step 4: "Run It" Run your form by opening your browser :
