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.) 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. The form posts the data to a specific URL on the server—for example, example.com/feedback-mailer.php. 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. 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. 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.) PHP feedback form <!DOCTYPE html> < > html < > head < > title </ > 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: Your message  < = = = > form action "URL_OF_OUR_PROCESSING_SCRIPT.PHP" method "post" name "form" < , ’ > !—Inside the form let s 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" </ > 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: Run the script at the specified URL. Give the script the data that was in the form. Should the script respond with anything, send that response back to the user. The script itself will take these actions: Fetch the data that the server requests. Create an email containing that data. Send that email. If everything went well, report back, “All good;” otherwise, report back, “Something’s wrong.” 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: 
<meta http-equiv= content= >
<meta charset= />
 $name = $_POST[ ];
$email = $_POST[ ];
$header = $_POST[ ];
$message = $_POST[ ]; $mes = ; $send = mail ($email,$header,$mes, ); ($send == ) { ;} { ;} 10 case 'refresh' '10; url=https://google.com/' "UTF-8" <?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' 'email' 'header' 'message' // Creating the email message that we’ll send. "Name: $name \nE-mail: $email \nSubject: $header \nMessage: $message" // Trying to send the message using the PHP mailer module. "Content-type:text/plain; charset = UTF-8\r\nFrom:$email" // If send successful: if '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: 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. 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. 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.

Facebook

Fetch

Google

Making the Snake Game in your Browser: Practicum Coding Bootcamp

Making Your Links Look Pretty With CSS: Practicum Coding Bootcamp

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Build a Simple Python Reminder App

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

How to Build a Simple Python Reminder App

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps