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.

HTML Form Processing

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 body tags.
A pair of form tags wraps the whole HTML form.
The action attribute 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).
The method attribute is set to post so 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 input tag of type text is used, with a maxlength set.
For the message field a HTML textarea is used, again, with a maxlength.
The textarea is set at 70 columns wide with 4 rows.
A div wraps each field field to help with layout.
A label is provided for each input.
The button is displayed using an input of 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.

HTML Contact Form

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.

HTML Contact Form

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.

Tek Eye

Simple HTML Contact Form for PHP Based Website

What is Needed for the Simple Website Messaging Form?

A HTML Page with a Contact Form

Basic Processing of HTML Form Data on the Web Server

Running the Simple HTML Form on a Web Server

See Also

Do you have a question or comment about this article?