In this guide we'll show you how to create a simple HTML contact form 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.
Remind – Responsive Email Template with Editor is a live online email template editing tool that lets you create email templates easily. Without the knowledge of the html I just mounted as you click, then you can create a template. 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. After the design gets approved, it is assigned to the email developer who transforms the PSD or AI or PDF file into a pixel perfect HTML email. This file is loaded in the ESP and deployed after thorough testing for flawless rendering.
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. Istat 3 02.
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 FormHTML 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.
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.
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.
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.
Best Email Design
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
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
Html5 Email Template
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
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
Example
Try it Yourself »The <form> Element
The HTML
<form>
element is used to create an HTML form for user input:The
<form>
element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.All the different form elements are covered in this chapter: HTML Form Elements.
The <input> Element
The HTML
<input>
element is the most used form element. An
<input>
element can be displayed in many ways, depending on the type
attribute.Here are some examples:
Type | Description |
---|---|
<input type='text'> | Displays a single-line text input field |
<input type='radio'> | Displays a radio button (for selecting one of many choices) |
<input type='checkbox'> | Displays a checkbox (for selecting zero or more of many choices) |
<input type='submit'> | Displays a submit button (for submitting the form) |
<input type='button'> | Displays a clickable button |
All the different input types are covered in this chapter: HTML Input Types.
Text Fields
The
<input type='text'>
defines a single-line input field for text input.Example
A form with input fields for text:
Html Email Design Bried
![Html5 email designer Html5 email designer](https://chocotemplates.com/wp-content/uploads/2012/06/high-color-big.jpg)
<form>
<label for='fname'>First name:</label><br>
<input type='text' name='fname'><br>
<label for='lname'>Last name:</label><br>
<input type='text' name='lname'>
</form>
Try it Yourself »<label for='fname'>First name:</label><br>
<input type='text' name='fname'><br>
<label for='lname'>Last name:</label><br>
<input type='text' name='lname'>
</form>
![Email Email](https://www.templatemonster.com/blog/wp-content/uploads/2018/05/Passion-HTML-Email-Online-Builder-Newsletter-Template.png)
This is how the HTML code above will be displayed in a browser:
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
The <label> Element
Notice the use of the
<label>
element in the example above. The
<label>
tag defines a label for many form elements.The
<label>
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
<label>
element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.The
for
attribute of the <label>
tag should be equal to the id
attribute of the <input>
element to bind them together. Radio Buttons
The
<input type='radio'>
defines a radio button.Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<form>
<input type='radio' name='gender' value='male'>
<label for='male'>Male</label><br>
<input type='radio' name='gender' value='female'>
<label for='female'>Female</label><br>
<input type='radio' name='gender' value='other'>
<label for='other'>Other</label>
</form>
Try it Yourself »<input type='radio' name='gender' value='male'>
<label for='male'>Male</label><br>
<input type='radio' name='gender' value='female'>
<label for='female'>Female</label><br>
<input type='radio' name='gender' value='other'>
<label for='other'>Other</label>
</form>
This is how the HTML code above will be displayed in a browser:
Checkboxes
The
<input type='checkbox'>
defines a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
<form>
<input type='checkbox' name='vehicle1' value='Bike'>
<label for='vehicle1'> I have a bike</label><br>
<input type='checkbox' name='vehicle2' value='Car'>
<label for='vehicle2'> I have a car</label><br>
<input type='checkbox' name='vehicle3' value='Boat'>
<label for='vehicle3'> I have a boat</label>
</form>
Try it Yourself »<input type='checkbox' name='vehicle1' value='Bike'>
<label for='vehicle1'> I have a bike</label><br>
<input type='checkbox' name='vehicle2' value='Car'>
<label for='vehicle2'> I have a car</label><br>
<input type='checkbox' name='vehicle3' value='Boat'>
<label for='vehicle3'> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:
The Submit Button
The
<input type='submit'>
defines a button for submitting the form data to a form-handler.The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's
action
Multimarkdown composer pro 4 5 12 commentary. attribute.Example
A form with a submit button:
<form action='/action_page.php'>
<label for='fname'>First name:</label><br>
<input type='text' name='fname' value='John'><br>
<label for='lname'>Last name:</label><br>
<input type='text' name='lname' value='Doe'><br><br>
<input type='submit' value='Submit'>
</form>
Try it Yourself »<label for='fname'>First name:</label><br>
<input type='text' name='fname' value='John'><br>
<label for='lname'>Last name:</label><br>
<input type='text' name='lname' value='Doe'><br><br>
<input type='submit' value='Submit'>
</form>
This is how the HTML code above will be displayed in a browser:
The Name Attribute for <input>
Notice that each input field must have a
name
attribute to be submitted.If the
name
attribute is omitted, the value of the input field will not be sent at all.Example
This example will not submit the value of the 'First name' input field:
<form action='/action_page.php'>
<label for='fname'>First name:</label><br>
<input type='text' value='John'><br><br>
<input type='submit' value='Submit'>
</form>
Try it Yourself »<label for='fname'>First name:</label><br>
<input type='text' value='John'><br><br>
<input type='submit' value='Submit'>
</form>