Finally! A Feedback Form using psd2css Online

This is possibly the most requested tutorial yet. A way to create a feedback form so your users can leave their thoughts, ideas and/or requests privately for you.

We have a video tutorial that shows off a more advanced example of the technique, but I'll describe a simpler way to get a form that sends you email here too.

First, the video:

Here is the modified page working:
http://psd2cssonline.com/tutorials/feedback/index.html

Here is the PSD file used to make that page:
http://psd2cssonline.com/tutorials/feedback/feedback.psd

Here is a zip file of all the generated and modified code so you can see how it was tweaked:
http://psd2cssonline.com/tutorials/feedback/FeedbackCode.zip

The Key to the Feedback Form

The most important part of getting a feedback form to work is of course the script that takes your users form input, and generates an email to you out of it. There are lots of scripts that do this and many of them are free. The one I've used for these examples is a formmail.php script that can be downloaded from a website called Tectite. You can get the script and the documentation here: http://www.tectite.com/formmailpage.php

For as complicated as that script looks, it's really very easy to use. At the most basic level, you just change one line of code in the script, put it on your website somewhere, and make a form for your users to fill out. The form part is easy - just use psd2css Online to convert a form you design in Photoshop to code. You do get to add a couple of lines by hand to the generated code to get it to use the formmail.php script, but it's not too bad.

Or you can get a little dirtier and do what we showed in the video. How nice are all those fading effects and the thank you note?

Either way, the line you need to change in the formmail.php file is the $TARGET_EMAIL line (roughly line 240 in the formmail.php file). You need to modify the line to represent the email address that you want the form contents to be emailed to. Here is what that section looks like now for my examples:

/* Help: http://www.tectite.com/fmdoc/target_email.php */
//$TARGET_EMAIL = array(EMAIL_NAME."@yourhost\.com$");
$TARGET_EMAIL = array("^shaun@psd2cssonline\.com$");

I commented out the old $TARGET_EMAIL line (I like to leave the original lines in but commented for reference while editing my new version). I added a line that looks about the same put has my email address in there instead. There is some decoration there as you can see, but it's pretty easy to see what you need to change to get your email address in there instead.

That's it for formmail.php. No more modifications required.

Then in the simplest case, you just add a few lines of code to the form that is generated by psd2css Online. These are lines that the Tectite version of formmail.php needs to do it's thing. Tectite provide a very straight forward example of a form that works with their script (it even has comments in the HTML - what a great idea! ;) ). You can add the same exact lines to the form generated by psd2css Online and it works great.

I'll create a simpler example and post the link and code here as well soon.