Create a Working HTML Contact Form

1. Create the HTML markup

The first step is to generate the HTML code for a basic contact form that asks for a Name, Email, and Message with the appropriate input fields.

There are two input types we use:

Text – This element is for typing short text like name and email

Textarea – This element is for typing a long text like the message

After we build the HTML markup, we’ll use the CSS script to style the basic HTML contact form and give it a nice look. Our first result is a simple contact form in a single line that doesn’t fit modern websites, aesthetically speaking. So, let’s head on and improve its looks with CSS.

<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
  <div class="row">
    <label class="required" for="name">Your name:</label><br />
    <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
    <span id="name_validation" class="error_message"></span>
  </div>
  <div class="row">
    <label class="required" for="email">Your email:</label><br />
    <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
    <span id="email_validation" class="error_message"></span>
  </div>
  <div class="row">
    <label class="required" for="message">Your message:</label><br />
    <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
    <span id="message_validation" class="error_message"></span>
  </div>
    
    <input id="submit_button" type="submit" value="Send email" />
</form>

<stsyle>
#contact_form {
  background-color: #405d27;
  padding-top: 20px;
  padding-bottom: 20px;
  }
.row label{
  color: #FFFFFF;
  font-size: 18px;
  margin-left: 10px;
}
input[type=text], textarea {
  text-align: center;
  background-color: #82b74b;
  border-radius: 10px;
  margin: auto 0;
  color: #FFFFFF;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 5px 5px 10px #3e4444;
  }
input[type=text] {
  height: 25px;
}
input[type=submit] {
  background-color: #ff7b25;
  color: #FFFFFF;
  border-radius: 10px;
  font-size: 18px;
  margin-left: 10px;
  box-shadow: 5px 5px 5px #3e4444;
}
</style>

2. Style your contact form with CSS

Did you know that CSS can help you enhance the design of your contact form and make it visually appealing? CSS stands for cascading style sheets and is a programming language that you can use to improve the design of your contact form and make it look appealing.

Although it requires some basic understanding, you don’t need to worry about writing CSS yourself while designing your form on 123FormBuilder. Our form designer within your account is intuitive and easy to use. 

However, if you prefer customizing your form, we have got you covered with a helpful CSS script that you can use while coding your contact form.

3. Add the PHP contact form script

When creating a contact form for your website, adding a PHP script is crucial to verify and process the form. However, not everyone understands PHP well, which can be daunting. But don’t worry, we have a solution for you! 

Use our free HTML contact form generator to speed up the process and make it hassle-free. Plus, it’s FREE! Try it and see how easy it can be to create a functional contact form for your website.

To process the inputs of your HTML contact form, download this PHP script.

In addition to HTML and PHP code, you can use jQuery to validate fields and show error messages on form submissions. It’s not mandatory, but it will help your HTML contact form users understand what they did wrong and help you collect information in the correct format.

<?php
$action=$_REQUEST['action'];
if ($action=="") /* display the contact form */
    {
    ?>
    <form action="" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="action" value="submit">
    Your name:<br>
    <input name="name" type="text" value="" size="30"/><br>
    Your email:<br>
    <input name="email" type="text" value="" size="30"/><br>
    Your message:<br>
    <textarea name="message" rows="7" cols="30"></textarea><br>
    <input type="submit" value="Send email"/>
    </form>
    <?php
    } 
else /* send the submitted data */
    {
    $name=$_REQUEST['name'];
    $email=$_REQUEST['email'];
    $message=$_REQUEST['message'];
    if (($name=="")||($email=="")||($message==""))
        {
        echo "All fields are required, please fill <a href=\"\">the form</a> again.";
        }
    else{        
        $from="From: $name<$email>\r\nReturn-path: $email";
        $subject=" Message sent using your contact form";
        mail("youremail@yoursite.com", $subject, $message, $from);
        echo "Email sent!";
        }
    }  
?>