PHP is a popular server-side scripting language that is often used in ecommerce site development. In fact, the popular Magento platform is built on PHP, as is the new LemonStand cart.
A common task on any ecommerce site is capturing shopper or customer information. In this tutorial, I am going to demonstrate a simple PHP-based customer service form that could be used to accept customer service questions and then email those questions to a customer service agent.
Since I will be working with PHP, I must either work on a web server or install a web server on my local machine. I will also need to have specified my "SMTP" or "smtpport" settings in _php.ini on that server.
The rest of the tutorial assumes that (1) you're working on a web server and (2) you have mail configured in php.ini.
The Form
For my customer service form, I wrote a few lines of basic HTML. The form asks for the shopper's first and last name and email address and provides a text field for the question. I was careful to include an id for each input, since this is what I am going to be posting to my PHP script.
<!doctype html> <html lang="en"> <head> <title>A Simple PHP Customer Service Form</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="960.css"> <link type="text/css" rel="stylesheet" href="reset.css"> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div class="container_12" id="wrapper"> <div class="grid_12" id="header"><h1>Customer Service Form</h1></div><!--end header--> <div class="grid_12" id="content"> <form class="grid_12" method="post" action="form-respond.php"> <span class="grid_2" id="first-label">First Name:</span><input type="text" name="firstname" id="firstname" class="grid_4" /><span class="clear"></span> <span class="grid_2" id="last-label">Last Name:</span><input type="text" name="lastname" id="lastname" class="grid_4" /><span class="clear"></span> <span class="grid_2" id="email-label">Email Address:</span><input type="text" name="email" id="email" class="grid_4" /><span class="clear"></span> <span class="grid_12" id="question-label">Ask a Customer Service Question:</span> <p class="grid_11"><textarea name="questiontext" id="questiontext" rows="7" cols="110"</textarea> <input type="submit" value="Submit"></input><input type="reset"></input></p> </form> </div><!--end content--> <div class="grid_12" id="footer"></div><!--end footer--> </div><!--end wrapper--> </body> </html>
Add Some CSS
To make the form easier to work with, I added some basic CSS. I am also using the 960 Grid System, since it makes rapid site layout work a snap. I have pasted my specific styles below. Again, the layout is coming from 960 GS.
h1 {margin: 10px 0; padding: 20px; background: #8c8c8c; color: #fff;}
#wrapper {margin-top: 150px;}
#firstname, #first-label, #lastname, #last-label, #email, #email-label, #questiontext, #question-label {margin-top: 10px;}
Start Your PHP
Below is the entire PHP file. It gathers the submitted form data, displays a confirmation for the shopper, and sends an email to a specified email address. Below, I will describe what the script does by section.
<?php //variable to capture the form fields $full_name_raw = $_POST['firstname'] . ' ' . $_POST['lastname']; $full_name = htmlspecialchars($full_name_raw, ENT_QUOTES, 'UTF-8'); $email_raw = $_POST['email']; $email = htmlspecialchars($email_raw, ENT_QUOTES, 'UTF-8'); $question_raw = $_POST['questiontext']; $question = htmlspecialchars($question_raw, ENT_QUOTES, 'UTF-8'); //variable for the email to customer service $to = 'armando@practicalecommerce.com'; $subject = 'new customer service question from ' . $full_name; $for_customer_service = "New question:\n $full_name, who has an email address of $email, wrote:\n $question"; $message_txt = wordwrap($for_customer_service, 100); mail($to, $subject, $message_txt); //sets up the conformation page that the customer sees $confirm = " <!doctype html> <html lang='en'> <head> <title>Question Submitted</title> <meta charset='utf-8'> <link type='text/css' rel='stylesheet' href='960.css'> <link type='text/css' rel='stylesheet' href='reset.css'> <link type='text/css' rel='stylesheet' href='style.css'> <link rel='icon' type='image/png' href='favicon.png'> </head> <body> <div id='wrapper' class='container_12'> <div class='grid_12'><h1>Thank you for your question</h1></div> <div class='grid_12'> $full_name thank you for asking your question. We will get back to you as soon as possible</div> </div><!--end wrapper--> </body> </html> "; echo $confirm; ?>
Collecting the Form Data
The first thing my PHP script does is collect the form data.
<?php //variable to capture the form fields $full_name_raw = $_POST['firstname'] . ' ' . $_POST['lastname']; $full_name = htmlspecialchars($full_name_raw, ENT_QUOTES, 'UTF-8'); $email_raw = $_POST['email']; $email = htmlspecialchars($email_raw, ENT_QUOTES, 'UTF-8'); $question_raw = $_POST['questiontext']; $question = htmlspecialchars($question_raw, ENT_QUOTES, 'UTF-8');
To get each piece of form data, I use PHP's built-in $POST. Notice that within the brackets for each post, I am specifying an input field's _id.
There are a couple of other things to notice in this code.
First, note that my variable names all use underscores. No other symbols, including dashes or hyphens, are legal in PHP variables.
Next, notice that I am taking a two-step approach to each variable. I collect the "raw" input, and then run that input through htmlspecialchars. This is to avoid a particular type of attack, wherein hackers submit HTML or SQL code into a form field, potentially taking over a site, stealing customer data, or even worse. Using htmlspecialchars, as I have, helps to prevent this kind of attack by replacing, for example, < with < so that the content of a form field submission is rendered but not executed.
Email Customer Service
PHP provides a simple mail function, which you can see at the end of the following script. Notice that it takes parameters for the "to" field, "subject" field, and message content.
//variable for the email to customer service $to = 'contact@practicalecommerce.com'; $subject = 'new customer service question from ' . $full_name; $for_customer_service = "New question:\n $full_name, who has an email address of $email, wrote:\n $question"; $message_txt = wordwrap($for_customer_service, 100); mail($to, $subject, $message_txt);
Here you will want to pay careful attention to the variable $forcustomerservice. Notice that I have wrapped it in so-called double quote, ". PHP treats these double quotes differently than it treats a single quote, ', allowing me to include variable names directly in the string without concatenation (combining strings).
Finally, mail() does the heavy lifting, so to speak, and sends the message.
Provide a Confirmation Page for the Shopper
Next, I want to let the shopper know that the form was properly submitted, so I create a dynamic confirmation page.
//sets up the conformation page that the customer sees $confirm = " <!doctype html> <html lang='en'> <head> <title>Question Submitted</title> <meta charset='utf-8'> <link type='text/css' rel='stylesheet' href='960.css'> <link type='text/css' rel='stylesheet' href='reset.css'> <link type='text/css' rel='stylesheet' href='style.css'> <link rel='icon' type='image/png' href='favicon.png'> </head> <body> <div id='wrapper' class='container_12'> <div class='grid_12'><h1>Thank you for your question</h1></div> <div class='grid_12'> $full_name thank you for asking your question. We will get back to you as soon as possible</div> </div><!--end wrapper--> </body> </html> "; echo $confirm; ?>
In PHP, I can break up the variable $confirm over several lines. I again wrapped the variable definition in double quotes, which allowed me to use the $full_name variable inline.
When the form is submitted, the script generates the confirmation page.
Summing Up
That is all there is to it. With very little code, I was able to get my PHP script to accept user input, forward that input via email, and let the user know that the input was received.
I hope this tutorial gives you ideas for your own projects.
