Learn to code - Contact form from scratch



In this lesson you will learn how to create contact form just like we use, from scratch. (feel free to change colors or sizes for your own project



This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Server side Automatic error generator (will display error if user didn't fill name or required field)
  • Server side automatic syntax error generator (will not alow user to fill Illegal email or name. )

This lesson does not include:


  • Anti spam, be aware, we are not covering google recaptcha or any other anti spam in this lesson.
  • Sending data to database or email.

We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.


In the i-frame example below try to enter illegal email, or to fill only 1 field to test the server side options.



Try yourself >>


(No server side in the example)






Part 1

Add HTML



Open new HTML file


Visit our HTML Editors lesson if you don't know how:


HTML Editors >>


Visit our HTML Forms Guide to learn more about HTML Forms


Visit our CSS Forms Guide to learn more about CSS Forms



Create basic HTML structure (If you are using visual studio code and enabled the extension as we show in our HTML Editors guide, you can simply press ! +enter

Code Example:

      
      
      <!DOCTYPE html>
<html>
<head>

<title>Contact form</title>
</head>
<body>
</body>
</html>   
      
    
      
  




Part 2


Add google Raleway font link to your Structure to enable the Font we are using, or you can add your own font.


Add style tags where we will insert our CSS later.


We will add comments inside the example code to explain as much as we can, comments are in grey color.

Code Example:

      
      
      <!DOCTYPE html>
<html>
<head>
  <!-- google Raleway font link (add below head tag and above body tag.) -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>  
<title>Contact form</title>
<style>
/* <!-- style tags --> */
</style>
</head>
<body>
</body>
</html>   
      
    
      
  





Part 3

Create the form HTML inside the Body tags


Code Example:

      
      
      <!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<title>Contact form</title>
<style>

</style>
</head>
<body> <!-- start of body tag, here we place the form HTML -->

<div id="container">    <!-- "container div that "holds the entire form" -->
    <div class="form-wrap">          <!-- This is the white area around the form and heading, etc -->
        <h1>Contact us</h1>          <!-- The main heading -->
            <div class="form-group">               <!-- Each label, input is wrapped in .form-group -->

                <label for="username">Name:</label>  
                <input type="text" name="username">  
                <!-- name box -->

            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" name="email">
                <!-- email box -->
            </div>

            <div class="form-group">
                <label for="textt">Message:</label>
               <!-- text box -->

                <textarea type="text" name="textt" rows="22" cols="42"></textarea>
                <button type="submit" name="submit" value="Submit" class="btn">Contact us</button>
                <!-- submit button -->
        </form>
      </div>  
    </div>         <!-- end of form -->

</body>
<!-- end of body tag -->

</html>   
      
    
      
  






Part 4

Add PHP server side:


Server side code can't be seen by users so we had to manipulate the opening tag so you can see it, you have to remove the space at the beggining of the PHP code. (< ?php)



Code Example:

      
      
      <!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<title>Contact form</title>
<style>

</style>
</head>
<body> 

<!-- Server side Automatic error generator (will display error if user didn't fill name or required field)
Server side automatic syntax error generator (will not alow user to fill Illegal email or name. ) -->
< ?php
  if(isset($_POST['submit'])){
    $name = htmlspecialchars(stripslashes(trim($_POST['username'])));
    $email = htmlspecialchars(stripslashes(trim($_POST['email'])));
    $text = htmlspecialchars(stripslashes(trim($_POST['textt'])));
    if(!preg_match("/^[A-Za-z .'-]+$/", $name)){
      $name_error = 'Invalid name';
    }
  
    if(!preg_match("/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/", $email)){
      $email_error = 'Invalid email';
    }
    if(strlen($text) === 0){
      $message_error = 'Your message should not be empty';
    }
    
  }
?>

<div id="container">    
    <div class="form-wrap">         
        <h1>Contact us</h1> 
        <form action="< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
            <!-- Part of the PHP -->
            <div class="form-group">               

                <label for="username">Name:</label>  
                <input type="text" name="username">  
   <p>< ?php if(isset($name_error)) echo $name_error; ?></p>
   <!-- displaying error message if name is missing or illegal -->

            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" name="email">
                <p>< ?php if(isset($email_error)) echo $email_error; ?></p>
   <!-- displaying error message if email is missing or illegal -->

            </div>

            <div class="form-group">
                <label for="textt">Message:</label>
                <p>< ?php if(isset($message_error)) echo $message_error; ?></p>
      <!-- displaying error message if message is missing or illegal -->



                <textarea type="text" name="textt" rows="22" cols="42"></textarea>
                <button type="submit" name="submit" value="Submit" class="btn">Contact us</button>
        </form>
      </div>  
</body>
</html>   
      
    
  






Part 5

Add CSS:


Code Example:

      
      
      <!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<title>Contact form</title>
<style>
* {box-sizing: border-box;
         margin: 0;
         padding: 0; }

      
      body  {font-family: "Raleway", sand-serif;
                /* The font we are using :) */
        background: #344a72;
                        /* background color :) */
        color: #fff;
        line-height: 1.8;}
        
        a   { text-decoration: none;
        /* Underlined links are ugly :) */
      }

      #container  {  margin: 30px auto;
                     max-width: 400px;
                      padding: 20px;
         /*
        Remember, margin: auto on left and right will center a block element
         set a "max-width" for responsiveness
        May want to add some padding
        */
      }
      

      .form-wrap {
        /*
          This is the white area around the form and heading, etc
        */
        background-color: #fff;
        padding: 15px 25px;
        color: #333;
      }

      .form-wrap h1,
      .form-wrap p {
        /*
          May want to center these 
          (this controll all the heading and paragraphs)
        */

        text-align: center;
      }

      .form-wrap .form-group {
        /*
          Each label, input is wrapped in .form-group
        */
        margin-top: 15px;
      }

      .form-wrap .form-group label {
        /*
          Label should be turned into a block element
        */
        display: block;
        color: #666;
      }

      .form-wrap .form-group input {
        /*
          Inputs should reach accross the .form-wrap 100% and have some padding
        */
        width: 100%;
        padding: 10px;
        border: #ddd 2px solid;
        border-radius: 5px;
      }
      .form-wrap .form-group textarea {
        /*
          Inputs should reach accross the .form-wrap 100% and have some padding
        */
        width: 100%;
        padding: 10px;
        border: #ddd 2px solid;
        border-radius: 5px;
      }
      .form-wrap button {
        /*
          Button should wrap accross 100% and display as block
          Background color for button is #49c1a2
        */
        display: block;
        width: 100%;
        padding: 10px;
        margin-top: 20px;

        background: #49c1a2;
        cursor: pointer;
        color: #fff;
      }

      .form-wrap button:hover {
        /*
          Hover background color for button is #37a08e
        */
        background: #37a08e;
      }

      .form-wrap .bottom-text {
        /*
          Bottom text is smaller
        */
        font-size: 12px;
        margin-top: 20px;
      }
</style>
</head>
<body> 

<!-- Server side Automatic error generator (will display error if user didn't fill name or required field)
Server side automatic syntax error generator (will not alow user to fill Illegal email or name. ) -->
< ?php
  if(isset($_POST['submit'])){
    $name = htmlspecialchars(stripslashes(trim($_POST['username'])));
    $email = htmlspecialchars(stripslashes(trim($_POST['email'])));
    $text = htmlspecialchars(stripslashes(trim($_POST['textt'])));
    if(!preg_match("/^[A-Za-z .'-]+$/", $name)){
      $name_error = 'Invalid name';
    }
  
    if(!preg_match("/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/", $email)){
      $email_error = 'Invalid email';
    }
    if(strlen($text) === 0){
      $message_error = 'Your message should not be empty';
    }
    
  }
?>

<div id="container">    
    <div class="form-wrap">         
        <h1>Contact us</h1> 
        <form action="< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
            <!-- Part of the PHP -->         
            <div class="form-group">               

                <label for="username">Name:</label>  
                <input type="text" name="username">  
   <p>< ?php if(isset($name_error)) echo $name_error; ?></p>
   <!-- displaying error message if name is missing or illegal -->

            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" name="email">
                <p>< ?php if(isset($email_error)) echo $email_error; ?></p>
   <!-- displaying error message if email is missing or illegal -->

            </div>

            <div class="form-group">
                <label for="textt">Message:</label>
                <p>< ?php if(isset($message_error)) echo $message_error; ?></p>
      <!-- displaying error message if message is missing or illegal -->



                <textarea type="text" name="textt" rows="22" cols="42"></textarea>
                <button type="submit" name="submit" value="Submit" class="btn">Contact us</button>
        </form>
      </div>  
</body>
</html>   
      
    
  


Server side code can't be seen by users so we had to manipulate the opening tag so you can see it, you have to remove the space at the beggining of the PHP code. (< ?php)




computer coding classes for free , with us you can easily learn programming online, our main goal is to allow students to study free and from home, we provide the best online programming courses

Navigation