Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

A Feedback Form using psd2css Online

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.

Here is the modified page working:

Here is the PSD file used to make that page:

Here is a zip file of all the generated and modified code so you can see how it was tweaked:

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:

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: */
//$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.

Fade out to Thank You message

Hey Shaun, great tutorial but I'm having one issue...

When I set the " function(data){ ("#home-21").fadeOut("slow"); " code line to fade out the overlaying _form layer so that the thank you underneath can be seen, it does not, and will not, work. I've tried changing things in the PSD before converting to make it more similar to this tutorial's psd but I can't for the life of me get it to work.

PLEASE help with my "dead" submit button, I'm getting 15 emails from every person because they don't know their message sent!

Thanks in advance

What does a guy gotta do for

What does a guy gotta do for some customer support?

not receiving the form submissions

Hi Shaun!

I made a form on my homepage like in the feedback tutorial.

I set the formmail.php as required, I put it on my ftp server where my site is.
I set the psd2css.js as showed on the video tutorial for the submit button to call formmail.php action and for the submission form to display "thank you, you've submitted your message".
And I edit the index.html code for the item 'feedback_form' to have the action "formmail.php"

Now the thing is that when I submit a message with the form and that I press the submit button, I've got the expected message "thank you, you've submitted your message" but nothing comes in my mailbox.

I tried with two different email addresses and nothing occurs. Everything works as expected except that I don't receive the form submissions in my mailbox.

What's wrong?

feedback link inline with other links

Hi there, how do I stop the feedback link from moving around the page when I re-size the window? I would like it to be inline with the rest of my menu items.

Thank you,

HI Shaun

Hi Shaun

i've downloaded your PSD file and its and convertet it via psd2cssonline whitout doing anything to it, and its does the same as with my psd file, the feebackform (folder inside the psd file) keep showing? shut i hide it in the psd file? and another ting the feed butt "feedback_link_fixed" is ref. to this adress feedback.html in my and in your file, but there is no feedback.html in any of the folders including the one i've downloade

what am im doing wrong??

Take care Mike

IE Feedback Form

The Feedback form in IE6 does not work at all on my end or for the html feedback page you provide. It seems to break it all up and separate it making it unuseable? Can you help me with this?

inputtext and textarea

Hi, how do you get the inputtext and textarea box to disappear when you hit the submit button? Also how can you make the form require a valid email address before it sends the message?

Thanks in advance.

Relocating the ajax form

HEllo I am having trouble controlling the location of the ajax feedback form it spawns off to the left how do i control where it ends up? in my psd i have it centered perfectly and it ends up to the left in the final design didnt see any mention ofthis in the tutorial

Hi Chrisone23 - I have to

Hi Chrisone23 -

I have to assume that the _form layer is not inside the _center layer. But it's tough to say without seeing your PSD file. Can you post it? Thanks.


It’s really very

It’s really very interesting post to create a feedback form using psd2css online. Thanks for sharing useful tutorial. I like it much.

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content