Creating a basic contact form in PHP is pretty simple. You begin by writing the HTML Code needed to create input elements for information like this .
Automatic HTML Form Validation
- <form action=”/new.php” method=”post”>
- <input type=”text” name=”name” required>
- <input type=”submit” value=”Submit”> </form>
Basic Validation HTML FORM
How do you validate a form?
HTML form validation can be done by simple logic.
Step-1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!-- End contact icon --> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="contact-form"> <div class="row"> <form method="POST" action="new.php" class="contact-form"> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="text" id="name" name="name" class="form-control" pattern="[a-zA-Z\s]+" placeholder="Name" required data-error="Please enter your name" required=""> <div class="help-block with-errors"></div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="text" class="email form-control" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Phone" required data-error="Please enter your email" required=""> <div class="help-block with-errors"></div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="email" class="email form-control" id="email" name="email" placeholder="Email" required data-error="Please enter your email" required=""> <div class="help-block with-errors"></div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="text" id="msg_subject" class="form-control" name="subject" pattern="[a-zA-Z\s]+" placeholder="Subject" required data-error="Please enter your message subject" required=""> <div class="help-block with-errors"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <textarea id="message" rows="7" placeholder="Massage" name="message" class="form-control" required data-error="Write your message"></textarea> <div class="help-block with-errors"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <!-- <button type="submit" class="contact-btn">Submit</button> --> <input type="submit" name="submit" class="contact-btn" value="Submit"> <div class="h3 text-center hidden"></div> <div class="clearfix"></div> </div> </form> </div> </div> </div> <!-- End contact Form --> |
Step-2
new.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php $subject = "MYWEBCODE Enquiry"; $name = $_POST['name']; $email = $_POST['email'] ; $phone = $_POST['phone']; $subject = $_POST['subject']; $message = $_POST['message'] ; $headers = "From: $email"; $headers1 = "Name: $name \n Email: $email \n Phone : $phone \n Subject : $subject \n Message : $message "; $sent = mail($to, $subject, $headers1 ,$headers ) ; if($sent) { header ("Location:thankyou.php"); } else {print "We encountered an error sending your mail"; } ?> |
Step-3
How do I redirect a form after submission?
Simple Redirects
To have a form redirect to another page after submission: In the form editor, go to After Submission → Success Pages & Redirects. Activate the “Redirect the browser when the form is submitted” toggle. Enter the URL you wish to redirect to.
thankyou.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <style> .wrapper-1{ width:100%; height:100vh; display: flex; flex-direction: column; } .wrapper-2{ padding :30px; text-align:center; } h1{ font-family: 'Kaushan Script', cursive; font-size:4em; letter-spacing:3px; color:#5892FF ; margin:0; margin-bottom:20px; } .wrapper-2 p{ margin:0; font-size:1.3em; color:#aaa; font-family: 'Source Sans Pro', sans-serif; letter-spacing:1px; } @media (min-width:600px){ .content{ max-width:1000px; margin:0 auto; } .wrapper-1{ height: initial; max-width:620px; margin:0 auto; margin-top:50px; box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2); } } </style> <script type="text/javascript"> var count = 10; // Timer var redirect = "/"; // Target URL website="index.html" function countDown() { var timer = document.getElementById("timer"); // Timer ID if (count > 0) { count--; timer.innerHTML = "This page will redirect in " + count + " seconds."; // Timer Message setTimeout("countDown()", 1000); } else { window.location=website; } } </script> <body> <div class=content> <div class="wrapper-1"> <div class="wrapper-2"> <?php if (isset($_GET["status"]) AND $_GET["status"]=="error") { ?> <p>Sorry !!</p> <p>Please Re-enter the correct Details.</p> <?php } else { ?> <h1>Thank you !</h1> <p>Your Enquiry Has Been Submitted Successfully. </p> <p>Our team Will Contact You Within 24 Hours. </p> <?php } ?> <br/> <p id="timer" class="text-center" style="color: #000;"> <script type="text/javascript"> countDown(); </script> </p> </div> </div> </div> </body> </html> |
