Creating a Working HTML Contact Form

If you’re looking for an HTML contact form code, you’re in the right place. Create a simple contact form in minutes with HTML and CSS by following our tutorial.

However, if you want to build your HTML contact form quickly, use our contact form generator which doesn’t require any coding knowledge. Sign up for FREE and generate your HTML contact form code immediately.

html contact form code

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.

Build great HTML contact forms without coding

123FormBuilder is a versatile and user-friendly online form builder that generates advanced HTML contact forms in minutes – so you don’t need to waste your time coding them, but instead, focus on other parts of your website. Moreover, you can generate your HTML contact form for free.

As soon as you sign up to 123FormBuilder, you can start building and customizing your HTML form with a few clicks. Our HTML form builder automatically generates the HTML code you can add to your contact page or any other web page. You’ll find special form elements to use such as Google Maps, CAPTCHA, social buttons, and more, plus you can customize your form design. All forms are mobile-friendly, so you can be assured you have a mobile-responsive contact form.

Create a working contact form on 123FormBuilder and benefit from these features:

  • 30+ form elements: first namelast nameemaildropdown listshort text (for the subject line), multiple-choiceGoogle mappage break (for pagination), custom submit button
  • More functionalities: CAPTCHA image verification, form validation, custom JavaScript
  • Beautiful contact form design: apply your own HTML and CSS code to style form elements like input and message fields and match your color scheme, or choose from our contact form templates
  • A dedicated support team that will help you design your contact form HTML-free and collect new leads

All of these features and more come with our simple HTML contact form code generator. Don’t hesitate to try it out!

See our knowledge base for more step-by-step tutorials on creating powerful web forms with built-in form validation. Give that “contact us” form the feeling of a human being that is greeting and sending your visitors’ messages to you.

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.

Frequently Asked Questions

How do you create a contact form in HTML?

You can easily create a contact form in HTML by following our tutorial or using our drag-and-drop contact form generator that doesn’t require coding skills.

What is a contact form in HTML?

An HTML contact form is a tool for receiving email messages and collecting new contacts from your website.

You can link a contact form in an email by hosting the form on your website and sharing your web page’s link or using 123FormBuilder to generate the form’s direct link in the email body.

How do you create a form in HTML and send it to email?

You can generate the contact form code using 123FormBuilder and paste its form link into an email. To do that, sign up to 123FormBuilder and create your contact form using drag and drop. Afterward, copy the form link from the Publish section, and paste it into the email you want to send.