Simple Form Html Template

admin 11/22/2021
81 Comments
  1. Simple Html Email Form Template
  2. Free Form Templates For Word
  3. Simple Order Form Template Html
  4. Simple Form Html Template Free

Stunning html5 and fully responsive template for desktops, tablets and mobile. This is the ONE to go for, clean html code with CSS and mobile-friendly, this is probably the best of our simple html templates. View Elements Download Elements. Notice the use of the element in the example above. The tag defines a label for many form elements. The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element. The element also help users who have difficulty clicking on very small regions (such as radio. Fixed Header Table CSS Template. We are starting the list with the simple, yet often necessary.

Need a simple website template for your own website? Download these free website templates to create a website with a simple layout! Includes basic HTML templates, CSS templates and more. Easy to customize these professional looking web templates.

In this guide we'll show you how to create a simple HTML and PHP contact form to email using easy to understand code.

One of the most useful pages of any website is the HTML contact form page. No website should be without a contact form.

Scroll down a little to see our form created using HTML for the front-end. Further down you will see the PHP code for the form processing at the back-end - this is used to take the form submissions and send it to you by email.


Index of this page:

The form shown below is a 'bare-bone' version only, however, if you want to look at a fuller version, please download our free contact form

Already have a form and need some help?

We offer installation, upgrades, fixes, and customisations. Get in touch to see how we can help.

Form created using HTML

You can copy and paste this directly into your HTML page, or use it as a basis for your contact us page.



The CSS styles to use with the HTML form above

File Name: contact-form.css (you must save using this name exactly)

The PHP Code which captures and Emails your website form

The PHP code below is very basic - it will capture the form fields specified in the HTML form above (Name, Email, and Message). The fields are then sent off to your email address in plain text.

Note: You need to edit 2 parts of the script below. You need to set your email address (this will not be available for anyone to see, it is only used by the server to send your email). You can also specify an email subject line (or just leave the one which is there).

File Name: contact-form-process.php (you must use this filename exactly)

Save the files above. Once you edit the form to fit with your design, you are ready to try it out.


How the HTML form will look

Download free contact form using the link below. This version contains many more advanced features.

Download Free Contact Form

HTML form field examples

To add new fields to your form, just copy and paste the field type you need from the examples below.
We have included a breakdown of different HTML Form tags.

HTML Form Tags

HTML website forms should be enclosed inside the FORM tags. There are various parameter options available, the most common ones are:
action - this allows you to tell the form where to go once submitted (usually the filename of a script which will read and process the form data which has been submitted).
name - it's usually a good idea to give your forms a name, this is used to uniquely identify your form on a given page.
method - the value of this should be POST or GET. Forms should usually be set to use POST (as GET will attach the form data onto the page URL which is almost always a bad idea for security reasons). There are some other methods available, but we will not discuss these here.

Form

HTML Text Field - Single Line

This is without doubt the most common field you will find.

Text field in action


HTML Textarea (multiple lines text field )

The multi-line text field (commonly known as a textarea field) is more suitable to takes a larger block of text from your visitors. This is ideal for messages.


HTML Radio Buttons

When you want your users to pick one item from a short-list, the radio button set is ideal.

Radio button group in action



Free form templates

HTML Check box fields (checkboxes)

When you want your visitors to pick one or more items from a short-list, then checkboxes are ideal.

Checkboxes in action



HTML File Upload Field (field selector)

Sometimes it may be good to offer your website users the option to upload a file. For this, you could use the HTML field type file. If you are using this option you also need to include an additional option to the FORM tag enctype='multipart/form-data'


HTML Password Field

If you ever need to ask your users to enter a password into a form, then you should use the special text field type password. Using this option will mask each character as the user types, allowing them to type in secret.

Password field in action


HTML drop-downs (also sometimes known as 'selects' or 'combo-boxes')

When you want your visitors to pick something from a list, you could use a drop-down list. These are sometimes known as option selects, select fields, or combo-boxes. By default only one option can be selected, however, you can allow multiple selections by including the word multiple to your select tag (this will also alter the appearance of the field).

HTML Drop-down select field in action

Select Something:

HTML Submit button

Finally, every form should allow the user the option of submitting the form data. Form submissions are usually handled by using an HTML button. The button field is an input type field (as text and password fields are), however, these special fields are of type submit. To specify the text which appears on the button, we use the value parameter to state our value (in the example below we state 'Send Form').


HTML Reset button

Occasionally you may want to allow your visitors to reset a form back to its default state. This is accomplished by using the input type of reset. As with the Submit button, you specify the button text using the value parameter. Reset buttons are not very common these days but can still be useful under certain circumstances.

Reset button field in action

Contact pages are an essential part of almost any website. The relationship with your clients/customers, receiving feedback, customer support and other forms of online communication can be facilitated by a well-coded contact form.

Of course, it is possible to simply mention your email address on your contact page, but this may be an inconvenient sometimes, as scrapers can easily gather your email address and you will soon be flooded with spam emails. An HTML & CSS contact form protects you from this, thus preventing a significant number of spam emails from reaching your inbox.

There are many tools you can use in order to add a sleek custom form on your contact page. For WordPress, there are WordPress plugins you can use, and other CMS systems may offer similar tools, however, if you have some coding knowledge, you can easily use one of these free HTML & CSS contact form templates.

These uniquely designed custom form templates will make your contact page stand out! Some of them even have additional features, such as maps! Check out the free HTML & CSS contact form templates below and choose your favorite!

Contact Form 1

Contact Form 1 is a modern and interactive contact form template with mail icons that move along with your cursor and other cool visual effects. This type of contact form is perfect for interactive websites. It also has field validation and it’s completely responsive.

Simple Html Email Form Template

Contact Form 2

Contact Form 2 has some lovely colorful accents. This is a full-width form template with subtle animation effects. The button is in a colorful gradient that changes once you hover it and can be easily modified by you to fit your website’s color palette.

Contact Form 3

Contact Form 3 is another cool contact form template that’s extremely versatile. It has an interesting new feature added, a dual option for your message, so the user can either use it as a contact form or as an inquiry form. It also comes with a photo background and a bright green color. These can be easily customized.

Contact Form 4

This contact form is similar to the one presented above, but unlike that one, it has a neon-colored gradient in the background and a simple, white color for the main elements of the form. This well-coded contact form supports field validation and is easy to integrate into any platform you use.

Colorlib Contact Form

Colorlib Contact form is a simple, yet effective contact form template with indicators for the field labels, field validation and a minimalist design.

Contact Form 5

Contact form 5 has a nice structure for a contact form and it’s a good fit for blogs or magazine websites. It’s black and white, simple and clean. The fonts used are bold and the overall design is responsive and easy to use even on small screens.

Contact Form 6

Contact Form 6 is a unique contact form design with a creative layout. The background isn’t static, but instead, it is an interactive map powered by Google Maps. The shadow effects are also interesting. Check it out in action!

Contact Form 7

Contact form 7 has a more corporate style, with a minimalist design and a straight-forward layout. It offers the option of sending the user a copy of the message, by ticking the box at the bottom of the form. This form can even be integrated with an email marketing tool or a CRM system for immediate response.

Html

Contact Form 8

Contact Form 8 is similar to the map form above, but has a cleaner, lighter design. The map in the background is also interactive and powered by Google Maps and the form remains open. There is also the option to send the message as a copy, like in the form above.

Contact Form 9

Contact Form 9 another colorful form, a combination between two of the contact forms mentioned above. The background is an interactive Google Map, but it’s covered by a beautiful neon gradient. The message form is simple, with just three fields, and with subtle shadow effects.

Contact Form 10

Contact Form 10 is a simple and modern contact form template that you can install on your website for free. This flexible HTML & CSS contact form is easy to customize, so you can add new fields if you need to.

Contact Form 11

Contact Form 11 has a bold design with bright colors and beautiful vector illustrations. The background is purple, but the colors can be easily changed with some CSS tweaking. The texts can be seen clearly even from mobile devices.

Responsive Contact Form with Map

Lentie Ward is the designer behind this unique contact form template. This form was made with Haml and SCSS technologies and also some JavaScript. The result is a sophisticated form template with a cool map in the background. If you want to offer your visitors a spectacular experience on the contact page, make sure you use this form.

Html

Contact Form Bootstrap 3

This contact form was created with the help of Bootstrap by designer Shuvo Habib. It’s clean, simple, and full-width. It has all the basic info you would need from the users.

Simple order form template html

Responsive Contact Form

This responsive contact form template was designed by Lisa Wagner. It is mobile-optimized, has a dark layout and perfect for support sections on your website. The colors can be easily modified with some CSS tweaks.

Free Form Templates For Word

CSS3 Contact Form

This CSS3 contact form was created by Hong Liu and it is entirely responsive. It also has a great colorful border, which gives it a retro vibe. It’s perfect for any website with a light color palette.

HTML5 Contact Form

Simple Order Form Template Html

Here’s another HTML5 full-width contact form . The design has an interesting approach for each field’s labels. The colors may be too bright, but this can be easily changed with some CSS modifications.

Minimalistic Form

As the name states, this is a minimalist form, with a clean, ultra-simple design. This form design was created by Matheus Marsiglio and contains only three basic fields – for email, name and message.

Pen a Day Contact Form

Pen a Day contact form is a lightweight design perfect for feedback forms on websites. The layout is clean and basic and has every field needed for a suggestion box.

Appointment Contact Form

Do you need an appointment contact form? This template is for you! Created by Andrew Wright, this modern CSS3 and HTML5 contact form gives you the possibility to easily manage appointments and book clients for your business! There’s even a feature that lets users specify the best time for reaching out.

Quick Minimal Contact Form

This quick and easy to use minimal contact form was created by Erin Masson. It has an interactive design for filling in the contact details. It can be easily adapted to any website’s color palette.

Pleasing Contact Form

Just as its name states, this contact form template has a pleasing design. Developed by Grandvincent Marion, this well-crafted contact form lets you collect a lot of info about your potential customers/clients through detailed fields arranged in a boxed layout.

Contact Form by Colorlib

This pretty free contact form template is paired with a large image on the left side of the page. It has the basic fields for a contact form and a simple design. Plus, at the bottom of the form are some neatly-arranged social media icons.

Elegant Contact Form

This elegant contact form created by Mark Murray, uses the Compass framework. This modern design can be easily adapted to any CMS your website is using. Give it a try!

Clean Contact Form

This clean contact form template was designed by Nick Haskell and also uses the Compass framework. Unlike other free contact forms from this list, this template uses a background image at the top of the form. Its design is visually appealing and professional.

Simple Form Html Template Free

You may also like: