Simple HTML Contact Form for PHP Based Website
Apparently, user engagement is a good thing for a website's ranking, i.e. to help with Search Engine Optimisation (SEO). A commenting system could be used, such as Disqus or the Facebook Comments plugin, but the integration and management can be painful, and free versions often carry bloated clickbait advertising. Even paid for commenting systems may need constant attention. Another option is to roll your own commenting system, but you will be dealing with high levels of spam, trolling and misuse. For a small website maybe a simpler option is required.
One longstanding and simple solution to provide engagement with website visitors is to have a form for them to send in a message or contact details. A simple box for a website visitor to ask a question, or provide a comment can be provided. In this tutorial article a simple HTML contact form for a message, passed to PHP code on the web server, is used for user engagement. It's not complex and so no form generator has been used. Each time the form is filled in and submitted it passes the form data back to the web server for processing. The submitted data can be logged for processing or sent to a web site maintainer before being added to a web page. For example, the PHP code on the server can be used to generate an email to the person tasked with handling user queries and contacts. Email is easy to filter and mark as spam. However, a contact form is best implemented with a good anti-spam measure, for example CAPTCHA.
The term CAPTCHA is contrived from "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA is a test to see if a human or a bot (robot software) is accessing a website. See the Tek Eye article reCAPTCHA Code to Download for Demo and Test for an example of implementing Google's reCAPTCHA. Another CAPTCHA solution is hCAPTCHA from Intuition Machines, which is used to help identify objects and can generate some revenue for your website.
What is Needed for the Simple Website Messaging Form?
This simple website user engagement form requires a HTML page (web page) with a HTML form, and the website's web hosting server supporting PHP, which most do. A PHP script to process the data and send the result to the web site visitor is required. The process that is followed is shown in this image.
The HTML contact form in this tutorial has two boxes, one for a name for the person sending the message, and one for the message itself, and a send button. The boxes are filled in by the website visitor who then clicks a send button. A HTTP POST action occurs to send the data from the two boxes to the PHP script on the web server. The PHP on the webserver then processes the data and sends back a web page to show the result.
A HTML Page with a Contact Form
Start with a basic web page (see Hello World in HTML for an example). Then the HTML form is defined as follows:
- A header (
h1) tag starts the form page inside the
- A pair of
formtags wraps the whole HTML form.
actionattribute on the form is the address of the PHP script that will process the data (here in the same web server folder as the HTML form page).
methodattribute is set to
postso that data is hidden from the browser address bar when submitted (the default method of get is an alternative).
- For the name field a HTML
inputtag of type text is used, with a maxlength set.
- For the message field a HTML
textareais used, again, with a maxlength.
- The textarea is set at 70 columns wide with 4 rows.
divwraps each field field to help with layout.
labelis provided for each input.
- The button is displayed using an
inputof type submit.
- Some style attributes help with the layout.
- Both the name field and message field are marked as required.
Here is the HTML with the basic form.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML Form Demo</title> </head> <body> <h1>Send a comment or question...</h1> <form action="handle-form.php" method="post"> <div> <label style="width: 60px; display: inline-block;">Name:</label> <input type="text" name="name" maxlength="50" required=""> </div> <div style="margin-top:1em;"> <label style="width: 60px;">Message:</label> <textarea style="vertical-align: top;" name="message" cols="70" rows="4" maxlength="1000" required=""></textarea> </div> <input type="submit" value="Send"> </form> </body> </html>
This is what it looks like running in a browser.
Basic Processing of HTML Form Data on the Web Server
When the form is filled in and the button pressed than the browser sends the form data to the handle-form.php script on the server. The data is accessed using the PHP
$_POST array indexed via the name attribute from the HTML form. Here is a basic PHP script file that prints out the data entered:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML Form Demo</title> </head> <body> <p>Processing feedback...</p> <?php if(isset($_POST['name'])) echo "<p>Welcome ".$_POST['name']."</p>"; if(isset($_POST['message'])) echo "<p>Your message is: ".$_POST['message']."</p>"; ?> </body> </html>
The use of the
isset() function means that if the web address of the handle-form.php is entered by someone directly into a browser, the nonexistent data does not result in empty messages being echoed.
Running the Simple HTML Form on a Web Server
Save the HTML web page with the form, and the handle-form.php script to a web server that is running PHP. Most hosting packages provide PHP by default. Alternatively, run PHP on a local computer, such as a Windows machine. Point the browser at the HTML web page, fill in the form, press submit and see the resulting web page from the PHP script.
Note: If this example was tested on a live website, then remove it once the testing has finished. It needs further code to protect from abuse, including checks on the data entered and some form of anti-bot checks, such as reCAPTCHA.
- Install PHP on Windows with Web Platform Installer
- PHP Sanitize POST Data, Clean Up Input
- reCAPTCHA Code to Download for Demo and Test
- Get URL in HTML for PHP Backlink
- PHP Mail Script for Testing Email Sending
- For a full list of all the articles in Tek Eye see the full site alphabetical Index.
Author:Daniel S. Fowler Published: Updated: