How to Create a PHP Contact Form With HTML5 Validation

A PHP contact form allows users to communicate with website administrators. It allows them to send queries to the site owners about relevant services or features. Using the contact form, web administrators are able to manage their business emails. Once there is an active contact form available, it can generate queries. It easily gets connected, thus providing complete record and details about the users who are willing to contact and send their queries to website administrators.

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>

Contents hide

1 Basic Validation HTML FORM

6 How do I redirect a form after submission?

6.1 thankyou.php

6.2 Related posts:

Basic Validation HTML FORM

How do you validate a form?

HTML form validation can be done by simple logic.

Step-1

  <!-- 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 -->

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

Step-2

new.php

<?php

$to = "info@mywebcode.com"; 
$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"; }

?>

<?php

$to = "[email protected]";

$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

<!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>

<!DOCTYPE html>

<head>

</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>

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>

<?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/>

countDown();

</script>

</p>

</div>

</body>

</html>

Basic Validation HTML FORM

Step-1

Step-2

new.php

Step-3

How do I redirect a form after submission?

thankyou.php

Related posts:

Recommended Articles...

About the Author: Dharmendra Yadav