Creating a Working HTML Contact Form

Free HTML Contact Form Code

A contact form is a must if you want to hear from visitors and collect their contact details directly from the contact page of your website. Facebook pages and email newsletters are two key places to use contact forms. Here, we show you how to generate code for an HTML contact form, including a CSS script for styling, and a PHP script that will send form responses and contact details to you while providing a great user experience for your site visitors.

The HTML contact form code is located below. Feel free to copy our HTML and CSS code and add it to your contact us page. Further down, you can see how the contact form code is generated and how you need to process it with PHP code.

Creating a contact form in HTML: Tutorial

1. Create the HTML markup

First, we’ll 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 HTML contact form and give it a nice look.

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

Here’s what the HTML contact form will look like:

It’s a simple contact form in a single line that doesn’t seem to fit modern websites, aesthetically speaking. So, let’s head on and improve its looks with CSS.

2. Style your contact form with CSS

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.

Styling your contact form requires a basic understanding of CSS. However, you can forget about CSS when designing your form on 123FormBuilder using our form designer within the Themes section of your account.

If you still want to write the CSS yourself while coding your contact form, here’s a helpful CSS script you can use.

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

Here’s what the HTML contact form will look like with the above CSS code:

3. Add the PHP contact form script

Once we have the HTML code for the contact form and have added the styling, we just need to add a PHP script to verify and process the form.

Creating the PHP script requires a basic understanding of PHP, but you can use our free HTML contact form code generator to speed up the process. And it’s free!

<?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!";
        }
    }  
?>

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 right format.

For security reasons, ensure your HTML contact form uses an SSL certificate or is embedded on a secure web page. You should also consider CAPTCHA, as it will prevent spammers from abusing your form with bots.

That’s all it takes to generate simple, fully functional HTML code for contact us forms. Pretty easy, right? If you need to take your HTML forms to the next level, you can do that too.

Ready-to-use HTML contact form templates

If you need a contact form template that works on all mobile devices, fits your website, and has a customizable success message, browse our available form templates on 123FormBuilder.

Create more than contact forms using a template or building it from scratch in our form builder.