Dave PC Guy » coupon

Custom E-mail Form

Admin — Thu, 15 Oct 2009 19:14:43 +0000

AH! So I have to create a custom e-mail sending form. He wants me to create a webform that will ask for a person’s name and e-mail address. Once those are input, an e-mail will be sent to the person’s e-mail account with a thank you message. Meanwhile, the website will reload with a custom coupon that bears their name. I’ll need it printable so I’ll have to add a print button as well.
Sounds simple enough, right?.. right?

First off, go create a coupon. After you’re done with that, we can start working. Make sure the “name” field is left out though, we’ll add that in later with some CSS. Originally, I wanted to send the coupon in the e-mail, forcing the customer to input the right e-mail address but I realized that most e-mail clients do not support CSS and especially not the “position: absolute;” property and value.

Tip: I update the script periodically, and have numerous times while writing this tutorial. None of the scripts mentioned in this post are necessarily WRONG but at the bottom of the page is the current “release” that I’ve created. The images may not correspond directly with the code they represent.

Setup

Alright, here’s what you’ll need to do. You need to download MIME (MultiplePurpose Internet Mail Extensions), which is an e-mail extension for php that allows you to send HTML e-mails. If your site operates under c-panel, like mine is, then just scroll down, find the PHP extension icon. Search for “MIME” and install the packages. If you need to install them manually, search through google “Installing MIME on” your OS. I cannot really help you out more than that because I am not an expert on PHP extensions. There are multiple guides online though that WILL help you out.

installing MIME

Press Install

Once you press install, the package will automatically install. It may ask if it can install other dependent packages, simply OK it.

Basic Form

Modified Mail Form

Let’s start scripting. I advise you to create a mail.php form that you can “include ()” or “require()” into your existing website. It’s much neater this way and the PHP won’t get in the way of your layout. Here’s the basic form I created for our purposes:


Name:
 

E-mail address:
 

Message (optional):

I used the “$_SERVER['PHP_SELF']” variable for the action so that we won’t have to create yet another script page to use the information. The “name” field will translate to $_POST['name'], the”e-mail address” into $_POST['email'], and the optional “message” into $_POST['optmessage']. There is nothing much more to it. I used maxlength for the name 41 characters because my full fictional name, “Captain Soren William Alexander Janus VI.”, is exactly 41 characters long . 40 characters for the e-mail seems sufficient enough as well. 140 character message is the same as twitter’s max tweet. There is nothing much else to this.

Are you feeling “Loopy”?

Let’s move on. We need to create a loop that will ensure our data has been entered and that we are not dealing with a blank form. The purpose of this basic loop is to show the initial form for the user to submit the data to, reload the form if any errors were made during submission (ie invalid entries), and send the email in the end.



Form goes here



Something entered was wrong, please re-enter your information:
form goes here.

Confused? Don’t be. The beginning tells us if the form has been previously submitted, if not, the form will load. The second part after “elseif” checks if all the data entered is correct. After all the conditions have been met, we progress to the last “else” which will execute the mail sending.

“Validate This!”

If you look above, you’ll see a strange function called “isEmailAddress”. I set this function up using a script I found. Here is the function:

function isEmailAddress($value) {
        return eregi('^([a-z0-9])+([\.a-z0-9_-])*@([a-z0-9_-])+(\.[a-z0-9_-]+)*\.([a-z]{2,6})$', $value);
    }

It basically checks if the e-mail is in the correct format. It also makes sure that only a single e-mail address has been entered and that it does not contain any malicious code.

Tip: If you wish to add database support to this script, you’ll have to use a validation function for the name and message as well!

Next part of validation are the “empty()” and “trim()” functions. “Empty()” is self-explanatory. You entered the variable name and the function will check if it is empty or not. If it is, the function returns TRUE. “Trim()” works similarly except here it takes out all the extra spaces and such. If it equals ‘ ‘ or an empty space, then it will return TRUE. The “elseif” statement is setup so that it checks the e-mail and name value.

Tip: If you have some time on your hand you can create a function that will check for each of these statements like: function CheckValue ($var) { if (empty($var) {return TRUE;} if (trim($var) == ‘ ‘) { return TRUE;} }

Second Form

Incorrect entry

You have a choice here. Under “elseif ()”, you can create new “if” statements and inform the user of what exactly is wrong. For example if the name is empty, you can create an if statement like this:

if (empty($_POST['name'] || trim($_POST['name']) == ' ') { ?>
 echo "You left the name field empty";

I like to keep the user in the shadows and put all of the validation together using the || which means “or” and the same original form will show up with the message “Error: Please enter a valid e-mail address and your name”. Add the following form under “elseif()” between the php tags:

Error: Please enter a valid e-mail address and your name


Name:
 

E-mail address:
 

Message (optional):

It’s the same form with a little message on top.

Everything “Else”

So all the variables go through, the script is validated. What now then? Now we’ll send the e-mail and refresh the site. I am using e-mails for a good reason. Whenever a user asks for a coupon, I’ll have a copy of their name and their e-mail address for future reference. I COULD use a database system but I’m a lazy person. I’ll point you in the right direction if you wish to do that though. Instead, let’s focus on what I already have done.

We should set up our variables first, writing out $_POST['email'] is quite a hassle. Plus, we have to set up the e-mail variables as well. Also note that this is in the last else {} section:

//variables

$to = $_POST['email'];
$subject = "Coupon from the Chiropractors";
$name = $_POST['name'];
$optmessage= $_POST['optmessage'];
$opt = wordwrap ($optmessage, 70);

The mail function works like this:

mail (to, subject, message, headers)

So we set up the “$to” variable which we will direct to the e-mail. We’ve also set up the subject of the e-mail and put $_POST['name'] into the $name variable for later use. Next, I transferred the optional message into $optmessage variable which I then word-wrapped into $opt. You have to word-wrap your e-mail message and the longest line can only have 70 characters. Using the “wordwrap ()” function and the parameter “70″, we’ve accomplished that. Let’s write the message:

$message = " Chiropractic

Dear $name,
Thank you for visiting us at ourWebsite.

Please print out your coupon and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

optional message:
$opt

Your e-mail: $to

Note that e-mail clients have different support of HTML and CSS. Don’t include any XHTML, that’s way too complicated. This is the reason why I did not put the coupon into the e-mail. Most e-mail clients do not support the “position: absolute”. Alright, let’s setup our header variable. With headers, you can define who the e-mail is from, where to reply to the e-mail, send different copies, and most importantly, use MIME.

 //header information
$from = "no-reply@davepcguy.com";
$headers = "From: $from" . "\r\n";
$headers .= 'MIME-Version: 1.5.2' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "BCC: reply@davepcguy.com" . "\r\n";

I used an e-mail address I set up through c-panel. Set it up the same way you set up any other e-mail account. And you won’t even have to include the password in your script. Let’s break down the header.

The first header establishes from where the e-mail will be sent. Always break the lines when setting up the header variable using “\r\n”. Next, set up your MIME and its version. The newest one should be 1.5.2 but check your version under the PHP addons/modules in your c-panel. If you can’t make it work, use “MIME-Version: 1.0″. Next, set the content-type. Just copy the above, there should be no other alternative. The script will also send a BCC (Blind Carbon Copy) of every e-mail to my own e-mail address so that I can keep records. Let’s send it then!

//functions
$mail_sent= mail("$to", $subject, $message, $headers);

All that work and it’s summed up in one single line, amazing, eh?

The Script After

Hmm…I think I should give the user the coupon finally, don’t you think? They’ve done SO much work. Well, let me set up the message then:

//announcement $sent= "

Dear $name,
Thank you for visiting us at Website Here is your coupon

$name

Please print this coupon out and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

P.S. please print out your coupon immediately or save this page because it will not be available after you close out. If you're having any trouble, please contact our webmaster.

Optional Message:
$opt

"; echo $mail_sent ? $sent : "Mail failed"; echo $sent; } ?>

Haha, I know, it looks complicated, doesn’t it? Well not really, the “$sent” just sets up a variable with the html code I plan to use in my webpage. Beware, you’ll have to adjust this according to your own webpage. the echo $mail_sent ? $sent: “Mail failed”; is a short hand for an if loop ” if ($mail_sent) {$sent} else { “Mail Failed”};” then the $sent variable will echo out.

final page

Extras

database support
print
extra validation

This is how I finished out my script. I don’t plan on doing too much to it other than making it printable. I’m thinking about making a pop-up window that will display all of that information. Let’s review some of the extras you can add.

Database Support First, you can add database support. Simply make a new database in MySQL (using PHPmyAdmin) and set up two columns, one for name, and the other for name. Set up the table or use this SQL command if you can, creating the database might be tricky, but you should be able to use the “CREATE TABLE” part. If you can’t, just set it up manually using the values shown:

CREATE DATABASE coupondb;

CREATE TABLE `coupons` (
    `id` int(11) NOT NULL auto_increment,
    `name` varchar(255) NOT NULL default '',
    `email` varchar(255) NOT NULL default '',
    PRIMARY KEY  (`id`)
) TYPE=MyISAM;

You can probably make a third column for an order (1., 2., 3.) or for the date and time. Add this at the beginning of the “else{}” :

//MySQL variable
$host = "localhost";
$user = "user";
$pass = "password";
$db = "coupondb";

//connect
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");

// select database
mysql_select_db($db) or die ("Unable to select database!");

First, set up the host variable ie, where the database is. I’ll trust my WordPress senses and leave that with localhost. You’ll have to create a new username and password as well as a database manually using c-panel or a different site manager your hosting provides you. Input the user and password. Change the “die” variable to something like “internal server error” or something, this is just for educational purposes. I got it off Zend Dev Zone again. Make sure you put this BEFORE the e-mail sending (ie the mail() function) because it’s senseless to send the e-mail but not make a database entry. Here’s the basic query:

 // create query
    $query = "INSERT INTO coupons (name, email) VALUES ('$name', '$to')";

    // execute query
    $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());

    // close connection
    mysql_close($connection);

And there you go, database support added. Check out my full script on the bottom for the full implementation with the duplicate entries check as well as other features.

Print Let’s check out how to print all this stuff out. I found a neat piece of JavaScript that can accomplish this. It’s a bit tricky and I still can’t get it to show the best results but, it seems to work well nonetheless. You can find it here. Add the header part into the real header where you’ll use this mail.php script. Then, modify the $sent variable:

$sent= "

 Dear $name,

Thank you for visiting us at Website
Here is your coupon

 $name 

 Please print this coupon out and present it on your next visit. Thank you, and we hope to see you soon!
 Sincerely, Alexander 
 P.S. please print out your coupon immediately or save this page because it will not be available after you close out.
If you're having any trouble, please contact our webmaster. 
Optional Message: 

$opt

   
";

Change the width to suit your needs. And I am completely aware there is a million different divs just in this script (you should see the pages I code, million more divs) but they are mostly mandatory. You can switch the “div” around the “$name” variable to . You’ll have to spend some time adjusting this, the width of the page, the margin, as well as the different positions to suit your needs. It worked for me almost perfectly

Extra Validation Okay, so if you want to use a database with this form, you’ll need some extra validation as a precaution against SQL injection. We’ve already validated the e-mail address and I won’t be validating the optional message just yet. So let’s validate the name. I used a function from the same script I cited when I used the e-mail validation function:

// check whether input is alphabetic
    function isAlpha($value) {
        return preg_match('/^[a-zA-Z]+$/', $value);
    }

Add this function to the beginning of the document and add another || to the elseif () {} part of the loop saying “!isAlpha($_POST['name'])”. Also, warn the user that they can use only letters for the name and no periods or other characters nor numbers. The optional message SHOULD be validated but I am not certain how to go about it just yet. I’d like to let the user be able to use some personalized html code so I won’t look into it too much. Also, I am not storing that message so I don’t have to fear an SQL attack.

Conclusion

I hope this shed some light on how you’d create an e-mail form as well as how to use the mail() function. As you can see, the possibilities with PHP are endless. I’d like to also inform you that it took me several hours to write this script with numerous trial&error runs. I’m self-taught, and mostly used the PHP manual as a reference. I hope this helped and that you have fun trying this out for yourselves!

I’d appreciate any comments regarding the security of this script as well as usability. I, myself, am about to launch the script on one of my pages so I’d like to know what people have to say about it.

Final Script with all its features added: Note that I will update this part of the post as necessary when I find bugs and optimize it.



Please enter your name and e-mail address. The name field supports only alphabetic characters (letters).

Name:
 

E-mail address:
 

Message (optional):
 




";
 }
 if (email($_POST['email'])){
 echo "Please enter a valid e-mail address in this format: account@email.com. 
";}
?>


Name:
 

E-mail address:
 

Message (optional):
 



 

 Dear $name,

Thank you for visiting us at Website
Here is your coupon

 $name 

 Please print this coupon out and present it on your next visit. Thank you, and we hope to see you soon!
 Sincerely, Alexander 
 P.S. please print out your coupon immediately or save this page because it will not be available after you close out.
If you're having any trouble, please contact our webmaster. 
Optional Message: 

$opt

   
";

//MYSQL QUERY
//check for duplicates
$duplicate = mysql_query("SELECT * FROM coupons where email='$to'");
$affected_rows = mysql_num_rows($duplicate);
if($affected_rows >= 1)
{
echo $sent;
echo "Note: If you have already entered your e-mail address before, you will not get another e-mail message. 

This is to prevent spamming.";
die('');
}
else {
// create query
 $query = "INSERT INTO coupons (name, email) VALUES ('$name', '$to')";

 // execute query
 $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());

 // close connection
 mysql_close($connection);

}

//html message
$message = "


Chiropractic



 Dear $name,

Thank you for visiting us at ourWebsite
 Please print out your coupon and present it on your next visit. Thank you, and we hope to see you soon!
 Sincerely, Alexander 
optional message:

$opt

Your e-mail: $to 

";

 //header information
$from = "no-reply@davepcguy.com";
$headers = "From: $from" . "\r\n";
$headers .= 'MIME-Version: 1.5.2' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "BCC: reply@davepcguy.com" . "\r\n";

//functions
$mail_sent= mail("$to", $subject, $message, $headers);

//announcement

echo $mail_sent ? $sent : "Mail failed";
echo $sent;
}

?>

Share and Enjoy:

Coupon design

Admin — Sun, 11 Oct 2009 00:32:39 +0000

Remember a couple weeks ago I mentioned I would be making a website for a chiropractor? Well, here it is. I finally got my client to approve the hosting and the domain. I’m using JustHost for the hosting and I installed a preliminary wordpress template. It’s the easiest way to start up a website. I used a free template I found online.

My client does not wish to have a blog, of course, so I’ll be creating a static website soon enough. Anyways, one of the things my client wants me to do is make coupons, so let’s do that!

My plan is to hopefully create a nice vector coupon design in illustrator, make a PHP script that will send it to a recipient’s e-mail with THEIR name on it. I’m not sure how I’ll be able to do that cross-browser and all that but we’ll make it together!

Coupon

Let’s start with the design. I want it to be large enough so that it basically renders a print page useless. If it’s too small, I always feel like I’m wasting a lot of paper just to print one thing so if it’s large enough, it doesn’t feel like such a waste. I’m thinking it should be about as large as an index card, maybe a bit larger.

Document Setup

I created the new document with a 4×6 dimensions (6×4 when viewed this way). I started up with the little rectangle that signifies the size of my image. Now, let’s turn on the grid by going to view > show grid, and view > snap to grid.

Rounded Rectangle Tool

Next, let’s make an actual rectangle in the image. I used the rounded rectangle tool. Because of the “snap to grid”, you’ll be able to start exactly on the top-left corner and drag all the way to the bottom-right corner in one single stroke. Leave your mouse clicked and press either the top or bottom arrow to make the corners more or less rounded. I like them rounded just enough so that they leave one square of the grid uncovered in the corners. Let go and you’ll have a nice rectangular base we can start working on.

no fill

Click on the rectangle and switch to no-fill (the circled square above) while clicking on the fill palette. This makes sure there will no background. Make sure your stroke is black (palette to the right) and 1pt wide. This should be your result so far:

progress 1

Ah, the hard part is over! Haha, just kidding. Alright, well you see the square grid? Let’s add a couple of elements. I want to include a small text on the bottom that will explain limits of the coupon. I created a guide that’s two squares from the left and another guide two squares from the right. To create a guide, go to view>rulers and then simply drag from the left or the top, right or down, and you should see a guide. Leave it where you please. I started typing the small texts four squares from the bottom (no guide required). I used Myriad Pro and a 12pt font with a center alignment. Tip: start typing where the middle grid-line is. I typed two lines of text and here’s my result:

small text

Next let’s add the title of the company. I created another guide that’s right where the first grey grid line from the top is or the 3-inch marker. I started the text one square below the top and the text-box one square from each side. Text is center-aligned, Myriad Pro, and with a 36pt value. After I added the title, I added a second part of the title. The name of the company is”Georgia Chiropractic Group”, and the name of the practice is “at Sixes Road.” I added this text one square to the left of the center vertical line and one square above the guide. I used Myriad Pro, left aligned, and with a 24pt font. Next, I added a circle with its origin five and a half squares to the left of the right side and on the guide line and it’s three and a half squares long in its radius. Here’s the result:

title

Let’s add the name part. I want to create a custom coupon for each customer (using a php script and some CSS in my next tutorial) so I need to create a name field. Originally, I intended to have the name above a line, but I found it cumbersome, especially with the use of CSS and PHP so I think all I need for now is just a place holder. I used a rectangle with a one point stroke and placed it one square below our horizontal guide and started the rectangle two squares right from the left side (our left vertical guide). The box reaches the second thicker grid-line left from the right side. I added a name and the underline for demonstrational purposes only. Here’s the result:

name box

So far so good, now let’s added the phone number and the address of the business. If, for some reason, your business does not have a single address or a phone number, you can add mock barcode. If you need the barcode AND the address, you’ll probably have to shrink the box where the name goes, and shrink the “purpose-text” of the coupon as well. I want the coupon to say “$25 Adjustment”, if your coupon is supposed to say “$25 off”, it will take up less space and thus allow you to fit in the barcode. Another alternative way is to shrink the logo, or put the logo as a background to the name box, or any other part of the coupon, such as the “purpose text” itself.

Anyways, I added the address two squares below the textbox and the phone number two squares below the address. And again, I followed the left vertical guide we set up earlier. Here’s the result:

address

Also, note that I don’t remember the address nor the phone number of the business, and I’ll have to change that later. Now to the right, I propose I add that “purpose text” I was talking about. As you can see so far, I don’t want to add any color nor any special effects. I might later on, but not at the moment, it makes it easier this way. It’s far too hard to describe where I placed the text so just check the picture below.

purpose text

It’s done with a 40pt font, Myria Pro, center-aligned. Now let’s add some “fun” to the coupon because now all it is is just text and a circle that will become a logo later on. Go to a barcode generator. Use any barcode mode you wish to, I used the default and its default settings. Click generate, and open the picture below in PNG (click on PNG right above the barcode), transfer the picture into Illustrator. Next, stretch and shrink it, making it non-usable but still just as much fun, and put it under the purpose-text. Here’s what I got:

barcode

And here’s my final result:

final

That’s it though, save the picture as a .png file and upload it to your website. In my next tutorial, I’ll cover how to add custom names through some PHP and CSS knowledge. Don’t forget to erase the textbox and the name from the coupon. (ie Alexander, the line below it, and the box around it) We’ll add all that with CSS later.
I hope you enjoyed my tutorial!

Share and Enjoy: