Create a Working HTML Contact Form

Are you looking for an HTML contact form code? You’re in the right place! Follow our tutorial and create a simple contact form using HTML and CSS in just a few minutes.
Or, if you’re looking for a quicker solution, try our contact form generator. No coding knowledge required! Sign up for FREE and generate your HTML contact form code instantly.

Image showing a 123formBuilder contact form template

Trusted by 35,000+ clients, from small businesses to large enterprises

Free HTML Contact Form Code for Your Needs

Suppose you want to establish a direct line of communication with your website’s visitors and collect their contact information. In that case, a contact form is an indispensable tool you simply cannot do without. This is especially true if you’re trying to build your brand’s online presence.

Creating a simple yet effective contact form using HTML, CSS, and PHP scripts is quite easy. By generating customized HTML code, injecting CSS styles, and setting up PHP scripts, you can collect visitor responses and contact details while providing them with a seamless user experience.

Feel free to copy our HTML and CSS code from this page and add it to your Contact Us page. Further down, you can see how the contact form code is generated and how to process it with PHP code.

Image showing a 123formBuilder contact form template

Creating a Contact Form in HTML: Step-by-Step Tutorial

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

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

When 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. 
Special form elements include 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.

Image showing the 123FormBuilder platform with an editable contact form template

123FormBuilder HTML Contact Form Features

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

  • 30+ form elements: first name, last name, email, dropdown list, short text (for the subject line), product field, multiple-choice, multiple pages, Google map, page 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

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

Image showing a few of the 123FormBuilder platform features

Security Measures for Your HTML Contact Form

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. 

Using 123FormBuilder as your contact form generator is even easier! And we take care of all the data collection security. We offer SSL encryption, CAPTCHA, and form validation to ensure all emails are correctly formatted. Plus, we are:

To guarantee that your forms are safe and secure in a compliance environment, we use additional security methods like SPF and DKIM. You can use multi-factor authentication and password protection when handling visitors’ sensitive information.

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.

Image showing online form security measures like GDPR, Hipaa compliance, ISO 9001, ISO 27001 and Captcha verification.

Templates you can start with

Our platform provides form templates ready for customization with brand elements, conditional logic, and question branching.

Browse 2,000+ form templates

Frequently asked questions

How do you create a contact form in HTML?

What is a contact form in HTML?

How do I link a contact form to an email in HTML?

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

Build the perfect HTML contact forms with 123FormBuilder HTML form generator.

Create Your HTML Contact Form