In this tutorial, we will create a basic HTML contact form that enables users to input their comments and feedback. We will then use PHP to display this information in the browser.
Begin by opening your preferred code editor and creating a new PHP file. Copy and paste the following code into your file, then save it as "contact-form.php" in the root directory of your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
</head>
<body>
<h2>Contact Us</h2>
<p>Please fill in this form and send us.</p>
<form action="process-form.php" method="post">
<p>
<label for="inputName">Name:<sup>*</sup></label>
<input type="text" name="name" id="inputName">
</p>
<p>
<label for="inputEmail">Email:<sup>*</sup></label>
<input type="text" name="email" id="inputEmail">
</p>
<p>
<label for="inputSubject">Subject:</label>
<input type="text" name="subject" id="inputSubject">
</p>
<p>
<label for="inputComment">Message:<sup>*</sup></label>
<textarea name="message" id="inputComment" rows="5" cols="30"></textarea>
</p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>Take note of the two attributes within the opening <form> tag:
action attribute points to a PHP file named "process-form.php". This file receives the data entered into the form when the user submits it by clicking the submit button.method attribute specifies that the form data should be sent using the POST method.The rest of the elements within the form are basic form controls used to collect user inputs. For more details on HTML form elements, refer to the HTML Forms tutorial.
To retrieve the value of a specific form field, you can utilize the following superglobal variables. These variables are accessible across all scopes within a script.
| Superglobal | Description |
|---|---|
$_GET |
Contains a list of all the field names and values sent by a form using the GET method (i.e., via URL parameters). |
$_POST |
Contains a list of all the field names and values sent by a form using the POST method (data is not visible in the URL). |
$_REQUEST |
Contains the values of both the $_GET and $_POST variables, as well as the values of the $_COOKIE superglobal variable. |
When a user submits the contact form above by clicking the submit button, the form data is sent to the server-side "process-form.php" file for handling. This file captures the user-submitted information and displays it back to the browser.
The PHP code within "process-form.php" might resemble the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
</head>
<body>
<h1>Thank You</h1>
<p>Here is the information you have submitted:</p>
<ol>
<li><em>Name:</em> <?php echo $_POST["name"]?></li>
<li><em>Email:</em> <?php echo $_POST["email"]?></li>
<li><em>Subject:</em> <?php echo $_POST["subject"]?></li>
<li><em>Message:</em> <?php echo $_POST["message"]?></li>
</ol>
</body>
</html>The PHP code provided above is straightforward. Because the form data is transmitted using the POST method, you can access the value of any form field by referencing its name within the $_POST superglobal array. To display each field's value, simply use the echo() statement.
In real-world scenarios, you cannot blindly trust user inputs; it's essential to implement validation to filter user inputs before utilizing them. In the next section, you'll learn how to sanitize and validate the data from this contact form and use PHP to send it via email.