There are numerous ways of achieving this, with numerous wild and wonderful programming languages, but we’re going to use a scripting language called PHP.
Step 1: Create a PHP page
If you use the extension “.php” instead of “.html” for your web page, the server hosting the page will know to execute any PHP sitting within it. So, to start, simply save an empty HTML page as “contact.php”.
Step 2: Create a form
You can read about the ins and outs of forms in the HTML Beginner Tutorial. To jump straight in, let’s use the following super-stripped-down form HTML:
<form method="post" action="contact.php"> <textarea name="message"></textarea> <input type="submit"> </form>All quite straightforward, right? The action="contact.php" bit tells the page to send the form’s content to itself when the form is submitted. Crazy, huh? We’re doing everything here with the same page…
Step 3: Send the form’s data in an email
At the very top of the page, even before the Doctype, we are going to enter a smattering of PHP to handle the form data:
“<?php” marks the start of the PHP and “?>” marks the end. The server will attempt to execute everything in between as PHP.
This code checks if form data has been sent and, if it has, it uses the mail function to send the data as an email to “” with the subject “Form to email message” and the message body that is the same as the form field with the name “message”. The email will appear to be from “”.
Recap
You can try this out once you upload it (it requires the server to run — you won’t be able to run it locally).
Here’s what’s happening:
- Once the form has been submitted, the page will send the data to itself.
- The page will check if data has been sent and, if it has, it will send it on as an email.
- The browser will load the page’s subsequent HTML, including your form.
Further steps: A basic “Contact us” page
OK, how about making this a bit more like a “Contact us” form? We can add sender name and sender email address to the message and also include a confirmation message, to let the sender know their message has been sent. Here’s the whole shebang:
This time we’re:
- Checking the form has been sent (this time by looking for the form field named “submit”) and, if it has…
- Setting a bag-load of variables:
- Your email address
- The email subject
- The sender’s name (taken from the form)
- The sender’s email address (taken from the form)
- The message (taken from the form)
- Sending the email, using all of those variables
- Setting a variable for a confirmation message
- Loading the HTML, including the confirmation message
If the page loads and no form data has been sent then no email will be composed and no conformation message will be set so all that will happen is loading of the page’s HTML.
A simple HTML5 contact form template with CSS to style the form. Copy and paste code.
This is a simple HTML5 contact form. It does not use any CSS frameworks or libraries but the css below has some code to reset the default browser styles. The rest of the CSS is simple. It styles the input element and the textarea element and adds a button element. The code can be copied to any HTML web page. Remember to copy the CSS code to your CSS file as well. The styles were generated with help of TailWind CSS.
Code
<div class="form-container"> <form id="contact_form"> <div class="mb-3 form-row"> <div class="mr-3 form-col"> <label for="name_input">Your Name:</label> <input type="text" name="name" id="name_input" placeholder="Name" /> </div> <div class="form-col"> <label>Email:</label> <input type="email" placeholder="" /> </div> </div> <div class="mb-3"> <label>Message:</label> <textarea rows="6" class="w-full border border-gray"></textarea> </div> <div class="mb-3"> <button class="btnx" type="submit">Send</button> </div> </form> </div> <style> /*CSS Reset code. to reset browser defaults */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ } body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /*Form styles start*/ .mb-3 { margin-bottom: 0.75rem; } .mr-3 { margin-right: 0.75rem; } .w-full { width: 100%; } .border { border-width: 1px; } input[type=text], input[type=email] { height: 2.25rem; width: 100%; border-radius: 0.25rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } input[type=text]:focus, input[type=email]:focus { border-width: 2px; --tw-border-opacity: 1; border-color: rgb(96 165 250 / var(--tw-border-opacity)); outline: 2px solid transparent; outline-offset: 2px; } textarea { width: 100%; border-radius: 0.25rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); padding: 0.5rem; --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } label { display: block; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); } .form-container { width: 100%; } .form-container { margin-left: auto; margin-right: auto; padding: 1rem; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .form-row { display: flex; width: 100%; } .form-col { width: 50%; } button.btnx { border-radius: 0.25rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(107 114 128 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 2rem; padding-right: 2rem; padding-top: 0.5rem; padding-bottom: 0.5rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } button.btnx:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } button.btnx:active { --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } </style>How to Use
Simply copy the code to your web page HTML.
Back-end processing and record keeping
You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:
Using Ratufa backend
- Go to ratufa.io
- Press the "Connect your form" button
- Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
- Test your form. Ratufa will display the submissions - to the right side
- Copy the combined code to your web page
Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.