How to make Working HTML-PHP Contact Form

How to make Working HTML-PHP Contact Form

How to make Working HTML-PHP Contact Form: Regardless of what kind of site you own or manage, you most likely need a contact form. The contact form can enable your visitors to demand a statement, request data, or offer any tips or issues they’re confronting while at the same time utilizing your site.

How to make Working HTML-PHP Contact Form

In this article / video (enclosed at the bottom), our emphasis will be on how to make a working contact form in PHP (You can Download raw files from here).



We will start with the markup of the considerable number of fields that we have to include and the essential styling of the contact form. From that point onward, we will proceed onward to the PHP code to execute its usefulness.

How to make Working HTML-PHP Contact Form

Below you will find HTML code for form and PHP code for sending an email. Copy below PHP code into a file send_message.php

<?php
if(isset($_POST['email'])) {
 
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "xmohammadsharfuddinx@gmail.com";
    $email_subject = "Message from www.mohammadsharfuddin.com";
 
    function died($error) {
        // your error code can go here
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }
     // validation expected data exists
    if(!isset($_POST['name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['phone']) ||
        !isset($_POST['subject']) ||
        !isset($_POST['message'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }
       
    $name = $_POST['name']; // required
    $email_from = $_POST['email']; // required
    $phone = $_POST['phone']; // required
    $subject = $_POST['subject']; // required
    $message = $_POST['message']; // required
    
     $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/';
 
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
 
    $string_exp = "/^[A-Za-z .'-]+$/";
 
  if(!preg_match($string_exp,$name)) {
    $error_message .= 'The Name you entered does not appear to be valid.<br />';
  }
 
   
  if(strlen($message) < 1) {
    $error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }
 
  if(strlen($error_message) > 0) {
    died($error_message);
  }
 
    $email_message = "Form details below.nn";
 
     
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
       
    $email_message .= "First Name: ".clean_string($name)."n";
    $email_message .= "Email: ".clean_string($email_from)."n";
    $email_message .= "Phone: ".clean_string($phone)."n";
    $email_message .= "Subject: ".clean_string($subject)."n";
    $email_message .= "Message: ".clean_string($message)."n";
 
// create email headers
$headers = 'From: '.$email_from."rn".
'Reply-To: '.$email_from."rn" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>
 
<!-- include your own success html here -->
 
Thank you for contacting us. We will be in touch with you very soon.
 
<?php
 
}
?>

Replace 5th and 6th lines respectively.



Now, let’s go to the HTML of form. Copy the below HTML code and paste in your HTML form.

<div class="form">
              <div id="sendmessage">Your message has been sent. Thank you!</div>
              <div id="errormessage"></div>
              <form action="send_message.php" method="post" role="form" class="contactForm">
                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group col-lg-6">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                    <div class="validation"></div>
                  </div>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                  <div class="validation"></div>
                </div>
                <div class="form-group">
                  <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                  <div class="validation"></div>
                </div>
                <div class="text-center"><button type="submit" title="Send Message">Send Message</button></div>
              </form>
            </div>

If you want to add custom fields in contact form, you can follow the video below or can read this article.

Note: This PHP form does not work on localhost server (wamp or Xampp) as they web hosting name servers email header to send an email. If you want to try you can give a bit. And, if you are facing any issues in wamp server to start click here for solution.



Video

Mohammad Sharfuddin

A Designer & Developer Making the Web a Better Place. Crafting Ideas with Technology & Imagination. I take your business to next level. I believe in adding real value for my clients by creating integrated campaigns with quality content that will connect with your customers and rapidly ignite your online visibility.

More Reading

Post navigation

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.