How To Create An HTML Contact Form From Scratch

/ no-code hacks
Jack Delaney

Having a contact form on your website is just as important as having a phone in your office. In a world where convenience is king, it allows your customers (and potential customers) to get in touch with you at any time of day.

Even the most basic contact forms offer a great way to capture leads, grow your email list, and connect with your audience. There’s just one roadblock: HTML.

HTML (Hypertext Markup Language) is the standard code used to make most of the websites and apps on the internet. And as with any language, except for the language of love, it’s not something you can just learn in one night.

The good news is that you can create an HTML contact form without dedicating your life to coding. So don't worry if you don't know your UTF-8 from your SRC - in this post we'll guide you through everything you need to know to start building an HTML contact form today.

Before we begin, take a second to consider if you really need to create a form using HTML. Things are much simpler when you use a form building tool like Paperform - you’ll create a better-looking and more-powerful contact form in a fraction of the time.

Five Steps To Creating An HTML Contact Form

  1. Choose an HTML editor.
  2. Make a file with .html extension.
  3. Make a file with the .php extension.
  4. Generate the PHP code to capture form data.
  5. Create your HTML contact form.

1. Choose An HTML Editor

example of a html editor (Sublime Text)

To create HTML code, you need an HTML editor. It helps convert the code into whatever you’re trying to make - in this case a contact form.

Think of an HTML editor like a special word processor specifically for creating things for web pages. You use any text editor to create HTML code, but dedicated editors offer way more convenience and functionality.

There's no shortage of great HTML editors. Some popular options include:

  • Codepen
  • Notepad++
  • Kompozer
  • Sublime Text 3
  • Atom
  • CoffeeCup
  • Brackets

Any of the above tools will do the job, but there are hundreds of options if you're the type that likes to look for the perfect solution. Most are free, so you can try out a few and see which works best for you.

2. Create A New File With The .HTML Extension

Next, you have to give your operating system the head’s up that you’re creating a new HTML file. Luckily, this step is really simple. All you have to do is create a new file with your HTML editor and save it with the ‘.html’ extension.

Just name the file and follow it with .html. When you’re dealing with code it’s best to keep things clear, so we suggest naming the file ‘contact_form.html’ or something similar.

Once you’ve named it, type <html> into the text field. This announces to the editor that you want to create HTML code. It’s sort of like when you play Charades and gesture the category you’re doing before you start acting it out.

Your editor will automatically generate the following code for you. It’ll be the same whether you’re creating a simple contact form or an entire HTML website.

<!DOCTYPE html>
<html>
<head>          
      <title></title>
</head>
<body> 
    
</body>
</html>

Still Want To Build Your Contact Form With HTML?

Use Paperform instead — free 14-day trial

14 Day Free Trial, No CC Required

3. Create A New File With The .PHP Extension

Now you have to create another file. Though this time you have to save it with the '.php' extension. This one looks after the form submission process and makes sure the data you collect from your respondents goes where you need it to.

Without the PHP file your form is like a car without an engine - the data isn't able to go anywhere. Seeing the point of contact forms is to collect information, this makes it kind of essential.

The PHP file is connected to your form by a line of code in your HTML (we'll get to that in the next step). You can see what it looks like below:

<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">

4. Generate The PHP Code To Capture Form Data

So the PHP file enables you to capture data (name, email, message and any other input type you’ve included). It then delivers it straight to your email address as a plain text message.

Below we’ve included PHP code that, in technical terms, validates user inputs on the server-side. To translate that from gobbledygook: it makes sure everything works. It also generates any error and confirmation messages that users may get when they fill out your form.

Copy and paste the below code into the .php file. All you need to do is add your own email, subject line and success message (they're outlined within the code).

<?php
if (isset($_POST['Email'])) {

    // EDIT THE FOLLOWING TWO LINES:
    $email_to = "you@yourdomain.com";
    $email_subject = "New form submissions";

    function problem($error)
    {
        echo "We're sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br><br>";
        echo $error . "<br><br>";
        echo "Please go back and fix these errors.<br><br>";
        die();
    }

    // validation expected data exists
    if (
        !isset($_POST['Name']) ||
        !isset($_POST['Email']) ||
        !isset($_POST['Message'])
    ) {
        problem('We're sorry, but there appears to be a problem with the form you submitted.');
    }

    $name = $_POST['Name']; // required
    $email = $_POST['Email']; // required
    $message = $_POST['Message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email)) {
        $error_message .= 'The Email address you entered does not appear to be valid.<br>';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";

    if (!preg_match($string_exp, $name)) {
        $error_message .= 'The Name you entered does not appear to be valid.<br>';
    }

    if (strlen($message) < 2) {
        $error_message .= 'The Message you entered do not appear to be valid.<br>';
    }

    if (strlen($error_message) > 0) {
        problem($error_message);
    }

    $email_message = "Form details below.\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Name: " . clean_string($name) . "\n";
    $email_message .= "Email: " . clean_string($email) . "\n";
    $email_message .= "Message: " . clean_string($message) . "\n";

    // create email headers
    $headers = 'From: ' . $email . "\r\n" .
        'Reply-To: ' . $email . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

    <!-- INCLUDE YOUR SUCCESS MESSAGE BELOW -->

    Thanks for getting in touch. We'll get back to you soon.

<?php
}
?>

5. Create Your HTML Contact Form

All that’s left is create your form. We’ve included a template that will generate a basic HTML contact form for you. Just copy the code directly into your editor of choice.

<!DOCTYPE html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <h3>Contact us</h3>
    <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
            <label for="Name" class="fcf-label">Your name</label>
            <div class="fcf-input-group">
                <input type="text" id="Name" name="Name" class="fcf-form-control" required>
            </div>
        <div class="fcf-form-group">
            <label for="Email" class="fcf-label">Your email address</label>
            <div class="fcf-input-group">
                <input type="email" id="Email" name="Email" class="fcf-form-control" required>
            </div>
        <div class="fcf-form-group">
            <label for="Message" class="fcf-label">Your message</label>
            <div class="fcf-input-group">
                <textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
            </div>
        </div>
        <div class="fcf-form-group">
            <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send</button>
        </div>
</body>
</html>

If you’re new to HTML it’s a good idea to get the general gist of what the code means. Otherwise you could be creating a super evil A.I. and not even know it.

The “input” tag defines where users can enter data, while the “label” command represents a caption for an item in the user interface (like where it says ‘Your Name’ above an entry field). "H1" marks the heading, and "div" acts like a bookmark separating different segments of the code.

One of the most important parts is the "form action" linking to the PHP file. Without this to link the HTML with the PHP file, your form is just doing a good impression of a contact form. It'll look right, but it won't actually work.

When you’ve entered the code it will generate a form that looks like this:

A html contact form with fields for name, email address and message

Contact forms often have dropdown boxes as well as regular form fields. You can easily add one of your own with the following lines of code:

 <label for="contact reason">Contact Reason</label>
    <select id="contact reason" name="contact reason">
      <option value="sales">Sales</option>
      <option value="help">Help</option>
      <option value="billing">Billing</option>
    </select>

You can also add a checkbox, which is a useful way to get customers to opt-in to your email newsletter.

<input type="checkbox" id="newsletter" name="newsletter" value="newslettersignup">
  <label for="newsletter">Join our newsletter</label><br>

The end result is the super functional - super, super, ugly - form below:

a html contact form on a blue background

How To Make Your HTML Look Less Boring

As you can see, your HTML form isn’t exactly going to win any UX design awards. It resembles something from the internet in the nineties. It’s ugly, dull and difficult to handle, kind of like a battered old car.

The best solution for this is to use a dedicated form builder like Paperform to help you create beautiful forms without having to learn CSS. With Paperform you can build a contact form in minutes without writing a single line of code.

If you’re set on using an HTML form, the way to make it look better is by using CSS. CSS is the code that styles web content. Think of your HTML as a mannequin and CSS as the clothes that you'll put on to make it look good - it’s your path to a form that doesn’t look like Bill Gates made it in the early days of Microsoft.

Fonts and Colors

If you're going to have a contact form you want it to suit the aesthetic of the rest of your website. With a basic understanding of CSS styling you can do that, as well as make your form more readable and visually appealing.

There are a huge array of font and color options to choose from. Here's a helpful list. Keep in mind that styles will vary depending on the browser you use - for example, fonts might look slightly different on Chrome compared to Safari.

Below we’ve added some CSS to change the font type, size, weight and color.

.fcf-body {
    font-family: -apple-system, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #0000ff;
    text-align: left;
}

With this code your form will look like this:

a simple html contact form on a blue background

Padding and Margins

Every HTML element is wrapped in its own invisible box. A way of visualizing this is through the “box model”, which is handy when learning adjusting the design and layout of HTML elements.

The box model consists of: margins, borders, padding and the content of your form. It looks like this:

Four squares visualizing the box model of HTML design - margin, border, padding and content

Here’s a quick breakdown of the different elements:

  • Content - Where your text or images appear.
  • Padding - Adjusting this clears an area around your content.
  • Border - A visible border that wraps the padding and content.
  • Margin - Adjusting this clears an area outside your border.

By tweaking these you can change the way users interact with your form and how it looks on the page - from the size of the submit button to the width of the input fields.

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #5DADE2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
}

Code like the one above will transform your form into something a bit less ugly.

A completed html contact form on a blue background

Why HTML Probably Isn't The Right Solution

Learning to code with HTML is an awesome skill to have, but let’s face it: if you’re a small business owner it's hardly a top priority to bootstrap your own simple contact or registration form.

Do you want to spend hours watching tutorials and learning about php scripts and HTML5 to make a contact form with basic functionality and a poor user experience? It just doesn’t make sense. It's like going to culinary school just to make a piece of Vegemite toast.

Luckily there’s an alternative that saves time, looks great and offers a better experience both on the backend and client side: using an online form builder. Online form builders make building responsive contact forms a breeze.

With Paperform you can easily create beautiful forms without any knowledge of HTML, JavaScript or any other Markup language. The process is intuitive, so you can focus on what really matters. Customization is effortless too -  tweak fonts, colors and anything else about your form's design with absolutely no form code required.

Whether you want a basic contact form, a fullscreen contact page, or a form you can embed on your WordPress website, Paperform has you covered. Choose from one of our web templates, or start from scratch. It’s up to you.

To show you just how easy it is, we created the contact form below in a few minutes. No CSS. No coding. Just Paperform’s powerful form building tools.

Save time and effort. Get started today with Paperform’s 14-day free trial - no credit card (or HTML code) required.

Try Paperform Now!

14 Day Free Trial, No CC Required

Order Management And Processing: A Guide For eCommerce Businesses

In this guide, Jake from Red Stag Fulfillment outlines all you need to know about order management, including the best tools to manage your order proc...

Jake Rheude

Customer Retention: 8 Strategies That Build Loyalty & Boost Profits

Learn how you can increase your customer retention rate to boost your profits, cut costs and build a loyal customer base that returns again and again....

Jack Delaney

How To Build Brand Loyalty With A Customer Rewards Program

By setting up a customer rewards program you can turn single time customers in to loyal brand advocates—in this guide we show you how.

Raul Galera

5 Steps To Creating An Effective Employee Development Plan

In this guide we show you how an employee development plan can help boost productivity, increase retention and send profits through the roof.

Jack Delaney