Make a Feedback Form with PHP [A How-To Guide]

Written by evgeniy-lebedev | Published 2020/02/23
Tech Story Tags: html | learning-to-code | learning-html | php | practicum-by-yandex | web-development | programming | php-top-story

TLDR Make a feedback form with a website, a PHP engine, and some mailing magic. You can complete this mini project in under 15 minutes while also learning the most useful fundamentals of the interactive web. A form is a special place on a page that can collect data from the user and send that data to the server. The form posts the data to a specific URL on the server—for example, example.com/feedback-mailer.php. The server will then send the HTML back to the client.via the TL;DR App

It’s time for a web project that has real-life uses.Today I’ll show you how to make a feedback form using a website, a PHP engine, and some mailing magic. Why?

Because you can complete this mini project in under 15 minutes while also learning the most useful fundamentals of the interactive web:
●      Getting some data from a user
●      Sending that data to a server
●      Processing that data on the server
and generating a response

So, let’s start with this simple project, and then you can build on it.

Defining the client-server relationship

In this project, we’ll follow this plan to send data from client to server. (To review some key terms: the client is your computing device, and the server manages all the requests from devices on a network.)
  1. There will be a webpage with a form in it. A form is a special place on a page that can collect data from the user and send that data to the server.
  2. The form posts the data to a specific URL on the server—for example, example.com/feedback-mailer.php.
  3. Once the server sees the request being made to a .php file, the server runs that file in a PHP interpreter and passes the data from the form to the file. All this happens on server side; the client cannot access this process.
  4. A PHP file is basically an HTML file that the server can send to the client. But in that HTML, there is some code that can ‘see’ the data from the client and work with it as regular variables. We’ll use that code to send out an email reporting some results.
  5. To output data from the PHP, we’ll need a command called ‘echo.’ This command outputs everything back into the HTML file. The server will then send the HTML fi-->le back to the client.

Creating the webpage

We’ll start with a bare-bones webpage—nothing fancy. (As you read the code below, note that in HTML, we can write comments in between the
<!—and --> symbols. Anything I write in between those symbols is an explanation of our code; these comments will not be rendered by the browser.)
<!DOCTYPE html>
<html>
<head>
  <title>PHP feedback form</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  <!—We can add some styles later. -->
  </style>
</head>
<body>
  <!—Here be our form. -->
</body>
</html>
Now, let’s add the form. As we mentioned above, a form empowers us to collect data and send that data over the web to a server; the server processes the data. Observe the code:
<!-- Begin form, and specify where it’s going to send our data and how. -->
<form action="URL_OF_OUR_PROCESSING_SCRIPT.PHP" method="post" name="form">
  <!—Inside the form, lets put some input fields. -->
  <input name="name" type="text" placeholder="Your name"/>
  <br>
  <input name="email" type="text" placeholder="Email"/>
  <br>
  <input size="30" name="header" type="text" placeholder="Subject"/>
  <br>
  <textarea cols="32" name="message" rows="5"> Your message
  </textarea>
  <br>
  <!—Let’s add a button that submits this form to the server. -->
  <input type="submit" value="Submit" />
</form>

Adding the processing script

We’ll be using a PHP script. PHP is a scripting language for websites that is widely supported and easy to use in cases like ours. When the server receives our request from the form and notices that this request contains a PHP script, the server will take these actions:
  1. Run the script at the specified URL.
  2. Give the script the data that was in the form. 
  3. Should the script respond with anything, send that response back to the user.
The script itself will take these actions:
  1. Fetch the data that the server requests.  
  2. Create an email containing that data.
  3. Send that email.
  4. If everything went well, report back, “All good;” otherwise, report back, “Something’s wrong.”
  5. After 10 seconds, go somewhere else
For the purposes of this demo, we’ll just send the email to the same email address that we input into our form. For a project you’re putting into production, you might want to change the email address that will receive the message to something else—for example, your administrative email address or the email address of a customer support line.
We’ll need to make a file with a .php extension, and once we’ve written everything we need, upload the file to a certain place on our web server. So, let’s name our file feedback-mailer.php. Here’s the code that goes inside. (Note that we’ll write our comments after // when using PHP)
Now, let’s add the form. As we mentioned above, a form empowers us to collect data and send that data over the web to a server; the server processes the data. Observe the code:
<!-- After 10 seconds, redirect to a different page. In this case, Google. -->
<meta http-equiv='refresh' content='10; url=https://google.com/'>
<meta charset="UTF-8" />
<!-- The PHP logic begins. -->
<?php
// Time to get the variables from the user’s request. Once we execute these four commands, we’ll have the user’s data in our variables.
$name = $_POST['name'];
$email = $_POST['email'];
$header = $_POST['header'];
$message = $_POST['message'];
// Creating the email message that we’ll send.
$mes = "Name: $name \nE-mail: $email \nSubject: $header \nMessage: $message";
// Trying to send the message using the PHP mailer module.
$send = mail ($email,$header,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
// If send successful:
if ($send == 'true')
// ‘Echo’ returns some text back to the webpage.
{echo "Message sent";}
// If send fails:
else {echo "Something went wrong";}
?>

Testing the software

To test this piece of software, we need to upload the .php file to a web server that runs PHP. It’s 2020, so almost any web-hosting server will run it. I could also install a local PHP environment and make requests over it.
Having uploaded the file, we need to find out its URL and place it in the <form> tag:
<form action="URL_OF_OUR_PROCESSING_SCRIPT.PHP" method="post" name="form">
This makes sure that once the form is sent, it is sent to the correct URL, and the data in the form gets processed by the script that we wrote.
Finally, we can open our HTML page from anywhere (a local computer or a website), and just… use it.

What else?

From here on, there’s a lot we can improve:
  1. We can validate forms to make sure that the user always inputs a subject, an email address, or a message in the body of the email. Or we can change the PHP script so that it is less sensitive to this data. For example, if user doesn’t provide a subject line, we can put some default text in the PHP.
  2. It’s a good idea to protect the script from multiple requests from the same address or user. Otherwise, someone can abuse our service and send out spam.
  3. We can use some awesome web development techniques called AJAX to make the form respond to the user without reloading the page.

But for now, congratulations on creating some very useful software with PHP. PHP is the same script that Facebook, Wikipedia, and WordPress use, so be proud of yourself.

Written by evgeniy-lebedev | Chief Marketing Officer Practicum Coding Bootcamp, edtech expert, practicum.com
Published by HackerNoon on 2020/02/23