How to create html contact forms and 30+ best free modern ones for you

Nowadays, marketers and conversion experts are speaking on how a form should be designed to improve results and conversions. In this article, we will discuss about how to create free html contact form code. Moreover, we have collected modern free HTML contact forms, to help you choose the best one.

Basic rules for creating a proper free html contact form code

  • Only focusing on the details you need. For bigger organizations, let the user select the services and departments. Because it let the message reach the correct person and process the request faster.
  • Keep the designs as simple as possible. The color combinations and the text colors on the form need to be designed carefully in order to read the texts easily.
  • Let the users know what information they need to provide in a particular field. Providing examples in the fields is the best practice. For example, xyx@company.com in the email field.
  • Don’t just mark the error. If the user misses a field, give information on what type of data needed in that field.

How To Create a free html contact form code

Step 1. Add HTML

Use a <form> element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:

Example

<div class="container">
  <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>

Step 2. Add CSS:

Example

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

30+ Modern free html contact form code

Colorlib Contact Form

easy to use contact form

The Colorlib Contact Form is a simple and practically applicable contact form template. Because of this simple design, you can use this contact form template on any type of website, landing pages, and applications. The form field labels are used smartly to show the important fields and optional fields. Moreover, you can change the font and font size easily based on your design needs. Like most other free free html contact form code in this list, this one is also done using the latest HTML5 and CSS3 script.

Info / Download

Colorlib Reg Form v1 – Free html contact form code

clean form template with useful elements

This is a multipurpose form template, that can be used for registration purposes and contact forms. In the default design, the creator has used a clean white background. In this contact form, you get drop-down options and calendar input options along with the normal text fields. If you are looking for free HTML code contact form with easier input options, this template might impress you. T

Info / Download

Contact Form 1

contact-form-1

Contact Form 1 is an interactive form template. Rather than giving a boring static contact page, you can use this interactive form. The mail icons to the left moves according to the mouse movement, it is a small gimmick factor but it works. Visual effects on the form fields are really useful, this free html contact form code indicates the user on which field they are editing. Form fields you get with this contact form are name, email, subjects and message field. All the fields support field validation, when the user misses a field it is indicated by an exclamation mark.

Info / Download

Free Contact Form 2

contact-form-2-free-html-contact-forms

Contact Form 2 is a colorful free html contact form code. This full-width form template helps you to create a contact page easily or you can use the contact form alone in your existing template. The big rectangular form gives you ample amount of space to add as many form field as you want. In the default demo, you have the form field for name, email, and message. Subtle animation effects are given in the form fields to indicate user in which field they are adding information. The call to action button uses gradient color, which interactively changes on hovering over it.

Info / Download

Form 3 – Free html contact form code

Contact Form 3 is a versatile contact form template. You can use this as a contact form or you can use this template as an inquiry form. If you are searching for an adaptive contact form for your corporate website template, this contact form will be the best choice. In the form, users are provided with the options to choose the type of form they want. A background image is used to fil the full-page design of this template if you want you can change this to your choice. Form fields common in both the forms are name, email, and message field.

Info / Download

Contact Form 4

Contact form 4 is a trendy looking free html contact form code. The use of bold texts and gradient color scheme make it the best match for modern HTML website templates. On the bright gradient background, the white form looks elegant and easily gets user attention. The call to action button also uses gradient color scheme, which interactively changes on hovering over the button. The form fields you get with this template are name, email, message, budget, and message. For the budget and the services section, you have the option to include drop-down menu option. Fonts used in this template are bold and legible to read both in the desktops and in mobile devices.

Info / Download

Contact Form 5

Contact form 5 is a magazine style template. Thus it makes the best fit for the news website templates and magazine templates. This professional free html contact form code template impresses the user with bold texts and clean background. The clean white background increases the legibility of the texts, so when the user is inputting data they can easily read it. With this template, you get form fields for name, phone number, email, services, and message. The required fields are marked with asterisks symbol. Even if the user misses a field it is indicated by bold red texts.

Info / Download

Contact Form 6 – free html contact form code

Contact Form 6 uses a well thought out creative design. Instead of providing a static background an interactive map is used. This map is powered by the Google map, so you get all the familiar map interaction options. If you are searching for a different contact form template for your restaurant website templates or other service-oriented templates, this would be the best choice. The glowing mail icon indicates the user to click to interact. The big contact form gives you ample amount of space to add form fields. Shadow effects used for the call to action buttons gives a floating design feel.

Info / Download

Contact Form 7

Contact form 7 is a corporate style simple html contact form template. Some of the companies let the user select the option to send a copy of their request. This helps the user to make sure what was the request they send. When you communicate back to the user, this copy will be very helpful. With this template, you have the checkbox option for “send a copy to email” option. All you have to do is to integrate this template with your CRM or email marketing tool for immediate response. Instead of just using the field labels this template uses icons to indicate the field type elegantly to the user.

Info / Download

Contact Form 8

Contact Form 8 is actually a light version of the Form 6 version mentioned above. This free html contact form code also uses an interactive Google map background, but the contact form remains always open. The contact form you get with this template is simple and generic, you can collect user’s name, email, and message. With this template also you have the option to include “send a copy to email” option. If you need more field with this template you can add it easily by editing few lines of code. Speaking of the code, this template uses HTML5, CSS3, and Bootstrap framework. Like most other free contact form templates on this list, this template is also mobile responsive.

Info / Download

Form 9 – Free contact form html

Contact Form 9 is a colorful rendition of the contact form version eight mentioned above. Instead of presenting a raw map, they use a gradient overlay. By opting to the full page view the user can see a clear map and can find your office location easily. Coming to the contact form design, this template uses a clean design. The form fields are not marked by a definite boundary; instead, they use shadow effects. All the form filed supports field validation, errors are marked in a red bold message, which can be dismissed by the user easily.

Info / Download

Contact Form 10

Contact Form 10 is a simple looking modern free html contact form code template. Where this template excels is with its subtle animation effects. The modern web elements with rounded corners, when combined with this visual effects, make this template unique and visually appealing. With this template, you get well coded HTML5 and CSS3 framework, which is flexible and easy to customize. Since this template follows the universal Bootstrap standard, adding this template to your existing website isn’t a big issue.

By default with this template, you get form fields like name, email, phone number, and message. The error messages are indicated as an exclamation mark, that too after hitting the submit button.

Info / Download

Contact Form 11 – free html contact form code

Contact Form 11 is a bright contact form template with bold texts. If you aren’t a big fan of vivid colors you can easily customize it by editing few lines of CSS codes. The big square contact form helps you to add big form fields, the bold fonts makes sure that the user sees the texts clearly. All the required fields are marked with a traditional asterisk symbol. A small minor bug with this template is message section. After clicking the message field, the size of the field varies and you have to reload to fix this.

Info / Download

Form 12

Contact Form 12 is similar to the first free html contact form code mentioned above. If you are using this template for your personal website, instead of the mail icon you can use your brand or your image. This completely working website template reduces your frontend work. Based on your need you have customized the look and the form fields. The clean white background makes the grey color form fields look distinctive. Out of the box the form is scaled for the small screen devices, so interacting with the form and adding data from mobile devices is easy with this template.

Info / Download

Contact Form 13

contact-form-13-free-html-contact-forms

Contact Form 13 follows a split screen design. It is one of the few free html contact form codes in this list that uses split screen design. With the split screen design, this template made use of the full-page provided to it effectively. To the left, you have the option to include interactive Google map with a dark theme and to the tight, you have the space for the contact form. In the middle of the map, you have a holder to display your contact number.

Info / Download

Contact Form 14free html contact form code

contact-form-14-free-html-contact-forms

Contact Form 14 is a simple contact form template. With this template, you get a neat contact form and a bright gradient background. If you need you can customize the template. The template uses HTML5, CSS3, and Bootstrap framework. For developers working with this template is a breeze. Customizing and integrating this template to your mailing or CRM platforms won’t be a big issue. Visual effects play the key role in this template.

Info / Download 

Form 15

contact-form-15-free-html-contact-forms

Contact Form 15 is another modern looking simple and free html contact form code. If the user finds the form as intrusive, they can use the full-screen view to see the map clearly. In the contact form at the top bar, you have the option to include a background image, where you can add an image related to contact form or any of your brand banner. In the form, you get fields like name, phone, email, and message. The form is mobile responsive out of the box.

Info / Download

Contact Form 16

contact-form-16-free-html-contact-forms

Contact Form 16 is one of premium quality free html contact form code for corporates. If you are looking for a contact form for your one-page template then this the best choice for you. In the demo, the contact form is designed to be a dismissible lightbox window form. This form is also basically designed for such purpose only. In the form, you have the fields for name, email, phone and message box. The form field uses icons and labels to indicate the users what details to be given in each field.

Info / Download 

Form 17

contact-form-17-free-html-contact-forms

Contact Form 17 is one of big split-screen style free html contact form code. The split screen design gives you space to add contact form as well as your contact details. In case of emergency, the user can use your other alternate contact details to reach you. In the left bar, you have the option to add images related to your site. Since in the default layout this template uses a building image, you can use this template as such for a construction website template and architecture website template.

Info / Download

Contact Form 18

contact-form-18-free-html-contact-forms

Contact Form 18 is also a split screen style contact form, but this template uses the full screen. The html contact form looks clean and the neat layout makes the text legible and easy to read. With this template, you also get a drop-down field for the services. Other fields are a usual name, email, and message as you get in many forms. You also have the option to add social media profile links to just below the call to action buttons. The contact form is mobile optimized so the work of making the form responsive is reduced with this template.

Form 19 – free html contact form code

contact-form-19-free-html-contact-forms

Info / Download

Form 20

contact-form-20-free-html-contact-forms

Contact Form 20 is the light version of the form nineteen mentioned above. The free html contact form code is not a complete ditto it has few of its own unique designs. On the top of the form, you have the option to add mail icon. The form follows a pristine white color scheme which looks great and is also easy to read the texts. This template also uses an interactive map as the background. To indicate the user which field they are currently editing visual effects are used. The template uses latest HTML5 and CSS3 framework, for developers working with this template will be an easy job.

Info / Download

Responsive Form With Map

Responsive-Contact-Form-with-Map-template

If you are having office locations in different countries or in different places, using a contact form with a map will help the user easily get the details of the office they are interested in. The designer of this template has given tabs at the bottom of the map widget to let the user easily switch between the places they want.

Info / Download 

Simple Flat Contact Form

flat-style contact form

As the name implies, this one is a simple free html contact form code that you might have seen on many websites. If you are not into fancy stuff and like to keep your contact form in a familiar format, this code snippet will come in handy for you. Animation effects are almost null in this contact form, which makes this code snippet feather-light and loads faster. The entire code snippet is shared with you on the CodePen editor. You can edit the code and visualize it on the editor before taking the code to your website or application.

Info / Download 

Responsive Form

regular contact form design

This one is another practically applicable simple contact form design. More than enough space is in each form field so that users can easily see the texts they are adding on the form field. A dropdown option is also given in the form to make the input action a lot simpler. The code script is also kept simple enough for easy and quick customization.

Info / Download

Contact Form by Aina

minimal contact form

The developer Aina has given un a minimal contact form design. Though it is a minimal form template, the creator has used little animations to make it interactive. All animations are very simple, so you don’t worry about the slow loading. In the default script, the creator has used a few lines of javascript to make the animations smoother.

Info / Download 

Form HTML + CSS

modern website contact form

The creator has tried a ying-yang style design in this form design. Apart from the dark and light dual color scheme, the free html contact form code has a simple usable design with swift animation effects. You can take this form designs as a base and can create your own custom full-page contact form design. The biggest advantage of this full-page design is you have more than enough space to add more elements.

Info / Download 

Contact Form by Iulian Savin

animated contact form

The developer Iulian Savin has given a fun animated free html contact form code design concept. When you click the “email me” button, the envelope opens gently, and the contact form flies in. Everything works smoothly in this design. It will have been great if the creator has included the sending animation and the email discard animations. But we still have the code snippet for this design. By keeping this code as a base, you can create your own custom animated contact form with the features you want.

Info / Download

Clean Form

Clean-Contact-Form-template

As per the name, this free html contact form code is very clean and simple, which makes this html contact form the best option for all types of websites and applications. Basic form fields like name, email address, and a text box is in this template. But if you need, you can add your own fields. The form is perfectly working from the front-end, all you have to do is to take care of the backend integration. On top of the contact form, you have space to add image background, in which you can add your brand or service related images.

Info / Download

CSS3 Contact Form

CSS3-Contact-Form-template

CSS3 Contact Form is a unique looking proper contact form. All the important fields are marked with an asterisk symbol and is clearly mentioned at the bottom of the contact form. In the default form itself, you get necessary form field for today’s need like email address and website. Letters are made bolder so that the user can easily read the input details.

Info / Download

Quick Minimal Form

Quick-Minimal-Contact-Form-template

Quick Minimal Contact Form is a simple letter style free html contact form code, which will give a different experience to the user. Dotted lines and neat vector icons give an artistic look to the contact form. Hover effects and text box input animation effects are used to indicate the selected input box. To make this design, the developer has used HTML5, CSS3, and Javascript framework. The code structure keeps being simple for quick and easier customization.

Info / Download

Colorlib Reg Form v30

split-screen-style form template

If you are looking for free HTML contact forms with split-screen design, this template might impress you. The creator has used split-screens with equal spaces, so you don’t have to cramp your form fields in this design. Moreover, more than enough space given in each form field for the user to interact with the form. The other part of the split-screen is for adding a short bio with a call to action button. In addition, if you are planning to use this type of free html contact form code on a medical website, you can use the info part to add emergency contact details and a link to the immediate assistance.

Info / Download 

Colorlib Reg Form v18 – free html contact form code

form template with an image background

In this form example, you have an image background. Since the creator has used an almost neat background image, the letters are visible and easy to read. If your background image seems to hinder the text visibility, then you have to adjust the font style and font size based on your design needs. All the basic optimizations are in this form template. So that you can use this template in your mobile responsive website without any issue. Using well-optimized free HTML contact forms like this will make your job easy and let you concentrate on the customizations and integration part.

Info / Download

The final line

Above all, as you can see, in this blog, ArrowHiTech discusses about how to create html contact forms and give modern free HTML contact forms with the hope to help you make the most informed and right choice. In case you still have not chosen, then don’t hesitate to CONTACT US, we will surely give you the most suitable advice.

Tags

Share