How to Create an HTML Contact Form

HTML source code of a contact form

Like all website content, online forms are written in HTML. Below we show you the HTML code of a typical contact form, which you can use for your website and adapt as you wish.

The following HTML code represents a typical contact form, as is often used on websites. It offers users three input fields. To contact us, the user enters their name and email address. The multi-line text field allows the entry of a longer, arbitrary text message.

To insert this form into your website, copy the following HTML code and paste it into the HTML source code of your website at the desired location. You can then expand the code and adapt it to your needs. See this example as a template and as a starting point for an introduction to setting up online forms.

<form action="#" method="POST" class="my-form">
  <label for="name">Your name</label>
  <input type="text" name="Name" id="name" required>
  <label for="email">Your email address</label>
  <input type="email" name="Email" id="email" required>
  <label for="message">What would you like to tell us?</label>
  <textarea name="Message" id="message" cols="30" rows="6"></textarea>
  <div class="btns-row">
    <button type="submit">Submit form</button>
  </div>
</form>

We have reduced the HTML code to the bare minimum to make it as easy to get started as possible and to keep the source code clear and easy to understand.

Explanation of the HTML source code

Form tag

<form action="#" method="POST" class="my-form">
  ...
</form>

The form tag encloses our form and defines the area in which the corresponding input fields are located. In the opening form tag, some settings that apply to this form are made using parameter specifications.

The action attribute specifies where the input should be sent when submitted. We'll cover this in more detail later in this article when we look at setting up the submission transfer.

The method attribute specifies the method used to send the form data. You can use POST or GET, with the post method being the usual and generally the most appropriate setting.

The class entered for this example form is only used to link the following styling information to this form.

Label

<label for="name">Your name</label>

Each of our input fields consists of a label and an input or text area element. The label tag is used to label the input field. In order to create a logical connection between the associated labels and input fields, the ID of the corresponding input field is entered in the for attribute of the labels.

Input fields

<input type="text" name="Name" id="name" required>

The input tags are simple input fields for one-line text input. This type of input field is used most frequently. The type attribute can be used to define the type of data input more precisely. For example, the information email, tel, url is available to tell the web browser what type of data input is expected. The type text is used for general text input.

<textarea name="Message" id="message" cols="30" rows="6"></textarea>

The textarea tag creates an input field for multi-line text input. This is useful when users can enter a longer text. As is used here in our contact form for entering messages. The rows attribute specifies how many lines of text are visible. This field is displayed accordingly high on the website.

It is important that all input fields have an attribute name. This attribute defines the field name, which is transferred together with the filled-in content when sending.

The id is used to define an identifier for the form field. This identifier must be unique and may therefore only be used once in the entire HTML document. In our example form, IDs of the form fields are used to connect them with the labels.

If form fields are provided with the attribute required, they are treated as mandatory fields and the web browser only allows the form to be sent if all mandatory fields have been filled in.

Submit button

<button type="submit">Submit form</button>

The button element describes a button in HTML. The type attribute with the value submit means that this button functions for submitting the form. The content of the element is used as the button's label.

So much for the HTML code of our contact form. Now let's move on to customizing the design.

Styling the contact form with CSS

As is generally the case in web design, the design is adjusted using CSS. CSS tells the web browser how to place the individual HTML elements and how they should look when displayed on the website. This allows us to adapt the visual appearance to the design of the website and to design it according to our own taste.

Use the following CSS code for our example form to ensure the correct display. Our CSS example code is a template that you can use directly. In most cases, adjustments to the CSS instructions will be necessary to adapt the appearance to the design of the website. For example, to adjust the font or the different colors.

.my-form * {
  box-sizing: border-box;
  font-family: sans-serif;
}

.my-form {
  max-width: 500px;
  padding: 0 1.5rem;
}

.my-form label {
  display: block;
  padding: 1.2rem 0 0.2rem 0;
  font-weight: 700;
  font-size: 1rem;
  color: #374151;
}

.my-form input, .my-form textarea {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.7rem;
  background-color: #fff;
  border: 3px solid #D1D5DB;
  outline: none;
  border-radius: 0.5rem;
  color: #000;
  transition: 300ms border;
}

.my-form textarea {
  resize: none;
}

.my-form input:focus, .my-form textarea:focus {
  background-color: #fff;
  border-color: #2563EB;
}

.my-form input:focus:required:invalid {
  background-color: #fff;
  border-color: #E74694;
}

.my-form .btns-row {
  margin-top: 1rem;
  text-align: right;
}

.my-form button {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  border-color: transparent;
  background-color: #2563EB;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  transition: 300ms background;
  cursor: pointer;
}

.my-form button:hover {
  background-color: #3B82F6;
}

To incorporate our CSS code into your form page, you can either insert the code directly into the HTML file of your page or you can include the CSS code as a separate stylesheet file. Download the CSS code as a stylesheet here:

Add the stylesheet to your website files and add a link to the stylesheet in the HTML file containing the form. To do this, insert the following code in the head section of the HTML file:

<link rel="stylesheet" href="formular.css">

Set up a send connection

The form is integrated into the website and the display is adjusted. All that is missing for a functioning contact form is the transmission. The transmission is triggered when the website visitor clicks on the send button. The web browser then collects all the form entries and sends them to a backend, which takes care of further processing.

The web address (URL) of the backend to which the submissions are sent is entered in the HTML code of the form in the action attribute of the form tag. Example:

<form action="https://www.domain.com/formular-backend" method="POST">

There are various options for processing form submissions, depending on the application's requirements. The most common function is that a message with all form entries is sent to a specific email address. In our article Create an HTML Form That Sends an Email we show you which technical options there are for email delivery and how to set them up.

The quickest and easiest way is to use our in-house backend service. After registering with Form.taxi, you will receive an individual sending address, which you enter in the action attribute of your form. This means that when you submit your contact form, the entries are received by the Form.taxi backend and forwarded to you. In the settings area of ​​the service, you can adjust the delivery address and many other settings at any time.