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 :
4 comments:
Hello! Read the semicolon rules free on our website to use punctuation correctly and avoid making mistakes that can ruin your text! Also on our website you can get acquainted with a free online tool that will help you analyze any type of text and correct all errors online and for free!
When writing various text works, such as essays, plays, articles, publications, and so on, I began to use specialized tools. One such tool is specialized in finding errors related to the passive voice. It works in such a way that you add your text to it, and wait until the check is completed. Checking will point out errors, and you can quickly and easily fix them!
https://www.prepositionfinder.com/
comma grammar check app is a cool auxiliary tool that will help you find errors related to the use of the punctuation. This tool will make the verification process easier for you. I am satisfied with the results it gives me, and therefore I recommend it to you too! It can be used to check absolutely any type of text work! Good luck friends!
https://www.commacheck.net/
A free online text corrector will allow you to create almost perfect texts for your various needs. Such https://www.commacorrector.com/ services have a wide functionality that will allow you to create truly high-quality and beautiful texts without any problems in a matter of seconds! Check out its capabilities by visiting the official website.
Post a Comment