Easy and Simple Contact Form in Html
How to
create a simple
HTML contact form
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:
- HTML Form Code
- CSS Styles Code
- Form PHP Processing Code
- Example HTML Form
- Form Tag
- HTML Text Field
- HTML Textarea Field
- HTML Radio Buttons
- HTML Checkboxes
- HTML File Upload
- HTML Password Field
- HTML Drop down menus
- HTML Submit Buttons
- HTML Reset Buttons
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
Want to learn the fundamentals of contact forms and a short history of HTML forms? then read the definitive guide to contact forms.
You can copy and paste this directly into your HTML page, or use it as a basis for your contact us page.
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>contact form</title> </head> <body> <link href="contact-form.css" rel="stylesheet"> <div class="fcf-body"> <div id="fcf-form"> <h3 class="fcf-h3">Contact us</h3> <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php"> <div class="fcf-form-group"> <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> <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> <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 Message</button> </div> <div class="fcf-credit" id="fcf-credit"> Simple HTML email form provided by <a href="https://www.majesticform.com" target="_blank">MajesticForm</a> </div> </form> </div> </div> </body> </html>
The CSS styles to use with the HTML form above
File Name: contact-form.css (you must save using this name exactly)#fcf-form { display:block; } .fcf-body { margin: 0; font-family: -apple-system, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; padding: 30px; padding-bottom: 10px; border: 1px solid #ced4da; border-radius: 0.25rem; max-width: 100%; } .fcf-form-group { margin-bottom: 1rem; } .fcf-input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; } .fcf-form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; outline: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .fcf-form-control:focus { border: 1px solid #313131; } select.fcf-form-control[size], select.fcf-form-control[multiple] { height: auto; } textarea.fcf-form-control { font-family: -apple-system, Arial, sans-serif; height: auto; } label.fcf-label { display: inline-block; margin-bottom: 0.5rem; } .fcf-credit { padding-top: 10px; font-size: 0.9rem; color: #545b62; } .fcf-credit a { color: #545b62; text-decoration: underline; } .fcf-credit a:hover { color: #0056b3; text-decoration: underline; } .fcf-btn { display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .fcf-btn { transition: none; } } .fcf-btn:hover { color: #212529; text-decoration: none; } .fcf-btn:focus, .fcf-btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .fcf-btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .fcf-btn-primary:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; } .fcf-btn-primary:focus, .fcf-btn-primary.focus { color: #fff; background-color: #0069d9; border-color: #0062cc; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } .fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } .fcf-btn-block { display: block; width: 100%; } .fcf-btn-block+.fcf-btn-block { margin-top: 0.5rem; } input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block { width: 100%; } 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)<?php if (isset($_POST['Email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "you@yourdomain.com"; $email_subject = "New form submissions"; function problem($error) { echo "We are very 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 are 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 --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> 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
Contact us
This versions below contains many more advanced features.
Download Contact Form Pro
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.
Learn much more about HTML5 form fields on our new definitive guide.
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 action="index.php" name="myform" method="POST"> Example form field: <input type="text" name="example"> </form>
HTML Text Field - Single Line
This is without doubt the most common field you will find.
<form action="index.php"> Enter your name: <input type="text" name="your_name" minlength="2" maxlength="60"> </form>
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.
<form action="index.php"> Message: <textarea name="message" rows="5" cols="30"> </form>
Textarea field in action
HTML Radio Buttons
When you want your users to pick one item from a short-list, the radio button set is ideal.
<form action="index.php"> <input type="radio" name="color" value="red"> Red<br> <input type="radio" name="color" value="white"> White<br> <input type="radio" name="color" value="blue"> Blue<br> <input type="radio" name="color" value="green"> Green<br> </form>
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.
<form action="index.php"> <input type="checkbox" name="fruit" value="apples"> Apples<br> <input type="checkbox" name="fruit" value="oranges"> Oranges<br> <input type="checkbox" name="fruit" value="pears"> Pears<br> <input type="checkbox" name="fruit" value="peaches"> Peaches<br> </form>
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"
<form action="index.php" enctype="multipart/form-data"> Select a file to upload: <input type="file" name="selectedfile"> </form>
File input type (file upload) in action
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.
<form action="index.php"> Enter your password: <input type="password" name="password"> </form>
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).
<form action="index.php"> Select Something: <select name="something"> <option value="Google">Google</option> <option value="Bing">Bing</option> <option value="Yahoo">Yahoo</option> </select> </form>
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').
<form action="index.php"> <input type="submit" value="Send Form" name="submit"> </form>
Submit button field in action
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.
<form action="index.php" name="resettest"> Enter your name: <input type="text" name="your_name"><br> <input type="reset" value="Reset Form" name="submit"> </form>
Reset button field in action
jessopscrepativen1988.blogspot.com
Source: https://www.majesticform.com/form-guides/html-email-form
0 Response to "Easy and Simple Contact Form in Html"
Post a Comment