This tutorial will show you how to design a stylish, custom contact form for your website / portfolio from scratch. It will cover all the aspects of the design including the CSS and HTML coding and PHP programming.
The result will be a fully functional, personalized contact form and will look like this :
As you can see the contact form consists of 2 parts : one containing the contact information of the sender, labeled “Your contact information” and one part regarding the sender’s message, labeled “Your message“. Each part represents, as you will see below, a fieldset tag, and both are integrated in a form tag. The form also integrates a very simple and basic captcha system that you will see works pretty well, considering most spammers aren’t concerned about portfolio websites, so they don’t use advanced spam robots to trick these contact forms. A more advanced captcha system can be developed using a database and an array in PHP or can be found can be found on the internet (for example here).
For the HTML part you will need some basic knowledge of some HTML tags like : form, fieldset, label and input. As I said before the form is composed by 2 fieldsets. The first fieldset, “Your contact information“consists of 3 text inputs, namely “Name“, “E-mail“, “Subject“. As you can see in the code below we are using labels to name the inputs and p tags to align them 70px to the right (this can also be done via the CSS file).
The most important thing regarding the input tags is their name attribute. We named each input according to what it does, “name“, “email“, “subject“. Remember these as we will use them in the PHP file.
The second fieldset contains the message box defined by a textarea tag with 7 rows and 50 cols (these are attributes that define the textarea’s height and width) . It also includes the input for the captcha and a special kind of input, for the submit button. For this fieldset too it’s important to remember the name attributes of each input and textarea, namely “comments“, “spam” and “submit“.
<form action="contact.php" method="POST"> <fieldset> <legend>Your contact information</legend> <p style="margin-left:70px |
As you can see the form calls a file called “contact.php“. This is the PHP file that we’ll actually use to send the email message.
We created the HTML form. It’s time to dress it up a little. We”ll do this by defining proprieties for the inputs and textareas in the CSS file.
As you can see we defined 3 proprieties for the inputs and textarea, one in the normal state, one on hover (when the mouse is over it) and one on focus (when you actually click on it and start typing text). The hover and focus states are identical in this case, but you can define them individually. As you can see when we hover over the inputs and textareas this image 
is loaded in the top right corner. Also the color of the border changes from #666666 to #000000. There are virtually unlimited possibilities on what you can in terms of style with these textareas and inputs and depends only on one’s creativity.
input, textarea { border:1px solid #666666; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px; background:#fff; } input:focus, input:hover,textarea:focus, textarea:hover{ border: 1px solid #000; background:url(../images/contact_crazyleaf.gif) top right no-repeat; } label { margin:2px; } input { width:300px; } .button { margin:0 0 15px 0; background:url(../images/div_back_contact.gif); color:#000; font-weight:bold; width:310px; } |
Minor alignment adjustments are also a must so everything aligns perfectly. The contact form is the last thing standing between you and the client. You want it to be as perfect as it can be.
This is the really tricky part.
First off you need to create a file (with Notepad or other text editor) called contact.php You can name this file anyway you like, just remember the name of the file must be identical to what you input in your action attribute on your HTML form. Additionally you have to create 2 more HTML files, one called thankyou.html, and one error.html. The first file will be loaded if the information from the form has been send successfully and the second one in there were errors.
The PHP file consists of multiple parts. The first part defines some constants, like the email address the information will be sent to ($mailto), the URL that contains the HTML form that is collecting the information ($formurl), the URL of the thank you page ($thankyouurl), and the URL for the error page ($errorurl).
The second part reads the information sent by the HTML form. Remember when I said it’s important to remember the name attributes of each input and textarea? Well, this is where we use them. This part of the script takes each value inserted in each input and textarea and inserts it into a PHP variable.
The third part verifies with two PHP if instructions if the required fields have been completed and if the basic captcha has been entered correctly. If so the script passes to the final part, if not the error page will be displayed.
The forth and last part of the script composes the message and sends it to you (to the mail address defined in the first part of the script, in the configurable area).
<? $mailto = 'name@name.com' ; $subject = "Contact form message - Crazyleafdesign" ; $formurl = "http://www.yoursite.com/contact.html" ; $errorurl = "http://www.yoursite.com/error.html" ; $thankyouurl = "http://www.yoursite.com/thankyou.html" ; // -------------------- END OF CONFIGURABLE SECTION --------------- $name = $_POST['name'] ; $email = $_POST['email'] ; $subject = $_POST['subject'] ; $comments = $_POST['comments'] ; $spam=$_POST['spam'] ; $http_referrer = getenv( "HTTP_REFERER" ); if (!isset($_POST['email'])) { header( "Location: $formurl" ); exit ; } if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="56728") { header( "Location: $errorurl" ); exit ; } $name = strtok( $name, "\r\n" ); $email = strtok( $email, "\r\n" ); $subject = strtok( $subject, "\r\n" ); if (get_magic_quotes_gpc()) { $comments = stripslashes( $comments ); } $messageproper ="---------- Crazyleafdesign.com message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\n\n\nMessage : " . $comments; mail($mailto, $subject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" ); header( "Location: $thankyouurl" ); exit ; ?> |
That’s about it. The form is complete. You can see it in action on our site.
A custom contact form with an upload field will be available in one of our future tutorials.
You might also like these similar articles:
 |
 |
 |
 |
 |
 |
 |
 |
User Links Friends We recommend Sponsor
by 
July 15, 2008 at 12:03 pm
Good.. I really appreciate.
July 17, 2008 at 4:11 pm
Cool, I saved it.
July 18, 2008 at 12:14 pm
Nice contact form, looks really good, I think you should have another post adding abit of ajax to it so it can give you suggestions, I think that would be a good read.
My last blog post : Wordpress 2.6 available
July 21, 2008 at 10:47 pm
Somehow it doesn’t work for me even though I followed instruction to the letter
July 21, 2008 at 11:35 pm
@Marcel … I just sent you a message using the contact form on your website. It worked like a charm. Let me know if there is anything else I can help you with.
July 21, 2008 at 11:41 pm
I got it working now.
Only sometimes I get the message ‘No input file specified’
I will figure it out.
Thanks for the code it looks very nice !
August 13, 2008 at 7:27 am
HEy i have a problem!!
Warning: Cannot modify header information - headers already sent by (output started at /home1/justacar/public_html/contacto.php:2) in /home1/justacar/public_html/contacto.php on line 34
??¿?¿?¿
Whts wrong?
August 13, 2008 at 12:05 pm
Usually this error is caused by empty white spaces between php start and end tags. You can see here a list of possible problems : http://www.tech-recipes.com/php_programming_tips1489.html . If you still can’t make it work let me know.
August 26, 2008 at 5:06 pm
I am trying to use this html snippet, but I can’t figure out if it is possible to have the contact form sent directly to my email without opening the user’s mail program. Your help is appreciated!
August 26, 2008 at 7:21 pm
That’s what this article is about. It explains how to make a contact form that sends visitors messages to your inbox.
August 26, 2008 at 7:43 pm
Right, but does it open a mail program? And am I able to redirect users to a thank you page?
Sorry for the confusion!
August 26, 2008 at 8:32 pm
No problem. It doesn’t open a mail client. It just sends the mail and then redirects the user to a thank you page. You can test it from a “sender” point of view here : http://www.crazyleafdesign.com/contact.html
August 26, 2008 at 9:29 pm
Oh got it now! Thank you. Last question I promise, where do you save the contact.php file?
August 27, 2008 at 1:36 am
No problem, Sarah. You can ask as many questions as you like. That’s why we are here. The contact.php file is saved in the same folder as the contact.html file (the file containing the HTML form).
October 10, 2008 at 9:02 am
dear alex,
thank you very much for this script. it was very helpful for me due that I am inexpert in this matter. it works perfeclty.
best regards from buenos aires
arturo
October 17, 2008 at 11:05 pm
Hi!
This may seem like nitpicking, but I’d rather be safe than sorry with these things. It would be safer not to use the visitor provided e-mail address as the reply-to address without validation. The provided address may not be valid which may result in the SMTP server refusing to send the mail. Instead, you should try trimming off the preceding and trailing whitespace of the provided e-mail address and validating the resulting string against a regular expression. If the address passes validation it’s safe to use as a reply-to address.
You should also include some metadata, like the sender’s ip address, into the messages and - just to be sure - store the whole form data on the server with timestamps and ip addresses. Also, you need to make sure you handle all possible error situations and check every major operation for errors. You never know what may go wrong.
October 17, 2008 at 11:47 pm
@Kimmo … You are absolutely right. This tutorial was focused more on the “design” aspect of the contact form and provides a basic contact method for your website. For a more advanced approach you must use some kind of validators and spam protection. I’m working on a version which will solve all these aspects.
January 15, 2009 at 12:00 pm
Hi,
Thanks for the excellent tutorial. But somehow it didn’t work from my end. Everything is working fine. I meant if I keep empty field then it goes to the error page and if I put the right thing then it goes to the thank you page. So the condition is working fine. But I dont get e-mail. I have used my gmail Id for “$mailto = ‘……@gmail.com’ ;”.
Can you please tell me what could be the problem? I am not so good in PHP. so your help will be highly appreciable.
My dev version is under:
http://shabbirhossain.com/dev/mail
Thanks,
Shabbir
January 27, 2009 at 10:43 am
Designing a stylish contact form for your portfolio
Hey guys,
This is awesome! But guess what ? I can’t get it to work. I tried send a message and what I get is ” The blog you were looking for was not found” Maybe the stylish contact doesn’t work on blogs?? Would you be able to help me out?
Thank you guys
A
January 27, 2009 at 12:23 pm
Hey Angie,
The contact form wasn’t designed with blog usage in mind. It was made for a normal website. Let us know what blogging platform do you use and we’ll see what we can do about it.
January 27, 2009 at 4:24 pm
Thanks Alex,
So I’m currently using blogger.com. The form showed up beautifully on the page, but as I said running a trial to make sure the form worked it sent me to a no show page. Blogger anables you to use java and html tags.
Thanx again
January 27, 2009 at 5:45 pm
You have to create a thankyou.html and error.html page, upload them to your website and then modify in the contact.php file $thankyouurl and $errorurl variables point to the location on your server where the thankyou.html and error.html files are.
January 28, 2009 at 12:57 am
Hmmm, I don’t know. I have these ones made up already. Maybe I should send you the php, css, html codes I copied from you plus my add ons??? WHat do you think? I can’t really see were the mistakes are. : ( Thanxs
January 28, 2009 at 9:59 am
Hey Angie. Archive all the files into a zip archive and send them using our contributors form here : http://www.crazyleafdesign.com/blog/contributors/
January 28, 2009 at 5:14 pm
Alex, you rock! thanxs
January 29, 2009 at 8:54 pm
Hey Alex, trying to get the file into a zip archive has been a hassle, so here you have the url (below). Maybe I have html, css, php mistakes and that’s why isn’t working on the blog. Who knows. What’s wrong if them? Thanks
http://docs.google.com/View?docid=dfqkkw99_36gpspj6fd
April 1, 2009 at 1:35 am
Hi Mate… thanks for the info on ‘contact forms’, works well with my site. cheers. Was wondering if you can help with an ‘upload-input’ form. one that will be relatively safe for me and my server? is it possible? id much appreciate if you can drop me a msg. Thank again.
Neateye.
ifixurpics.com
April 7, 2009 at 3:07 am
This was exactly what I was looking for! In fact it was a little better. When I put the edited the scripts and put them on my site, everything worked perfect except the css that makes your example look so good. What do I need to do to get the css to recognize and influence how the HTML code renders the form. Thanks,
Jon
June 2, 2009 at 3:40 pm
Hello,
Firstly thanks for this tutorial - it works really well and was so easy to set-up.
Couple of questions though if you don’t mind!
1) As you can see on the URL, my submit button is really wide - how do I make this ‘normal’ button size?
2) If you fill in the form and press send, it shows my html page (thankyou.html) as successful, however I am still not recieving messages to my email address.
(I have this line in my PHP page)
$mailto = ‘danielsharp469@btinternet.com’ ;
But it doesn’t seem to work. Help please!
June 2, 2009 at 4:46 pm
Hey Dan,
1) In your style.css file seach for the class “button” and add a property : width : 100px; or whatever you would like to width to be.
2) I have sent you an email with the contact.php file we are using for our website.
Let me know if it’s working now.
June 9, 2009 at 11:46 am
Hi.
Thanks for your reply. I’ve tested it again with the email address and it won’t go through, so that will be about the 50th time I’ve tried it.
I then tested it with my hotmail email and it arrived within a couple of seconds - so it looks like their is a problem with my btinternet email, not the form! I will have to look in to it.
June 9, 2009 at 11:53 am
I understand. I had a few problems with Yahoo Mail also. Glad to see it’s not the form
July 9, 2009 at 2:31 am
Alex, how do you get the form to send the “success” message back to the page that the contact form is on? I do not want to go to a thankyou.html page. I would like to put the “success” message right back on the same page under the contact form itself without having to go to a different page.
July 9, 2009 at 2:10 pm
Greg … the form is such created that it forwards the user to another page using PHP’s header function. I would have to think about your request and come up with a solution.
July 17, 2009 at 10:58 pm
it was a very useful for my works!
Thank you!
10 by 10!!!
July 22, 2009 at 12:07 pm
Hi,
Firtsly, Thanks for the stylish form. It looks really gud.
I have just finsihed uploading my website onto the server which also contains the contacts page that has the form. I seem to have problems recieveing mails even though I have tried using 3 diffrent mailto IDs. The mail IDs I have tried are info@anandshenoydesigners.co.uk, shenoy.anand@gmail.com, ana_arch@yahoo.com. Please help!
July 22, 2009 at 6:52 pm
I’ve uploaded the contact.php file we are using on our website and it’s working. You can download it from here : http://www.crazyleafdesign.com/contact.zip . You just need to personalize the file with your email and text.
July 26, 2009 at 1:13 pm
Hi
I haven’t uploaded my contact form yet, do I have to do that for the .php file to work?
Because when I click on the ’send’ button the contact.php file comes up, the actuall codes, not the ‘thankyou.htm’ file… What can be wrong?
Thanks
July 26, 2009 at 4:44 pm
Hello again!
Now I have enabled php with MAMP and when I test the contact form and write in every line and click on the “send” button it all just gets erased and I don’t get the email!!
What should I do, can I perhaps send you a zipped file with my files so you can point out the error?
Thanks
July 29, 2009 at 7:10 pm
what do I name the css file? I couldn’t find this information on this tutorial.
Thanks!
July 29, 2009 at 10:50 pm
@Ryan … You can name the CSS file any way you like. Just include in the HTML file hosting the form this line : <link rel="stylesheet" type="text/css" href="The_Name_You_Like.css" />
August 27, 2009 at 8:17 pm
Hi, thank you for designing this form. Good job. I’m trying to use it, but I keep getting this come up when i click submit… what am i doing wrong?!
\r\nReply-To: \”$name\” \r\nX-Mailer: chfeedback.php 2.04″ ); header( “Location: $thankyouurl” ); exit ;
August 27, 2009 at 11:48 pm
It’s ok! Got it working… I was testing it offline, and so the url value was wrong… silly me!
September 27, 2009 at 12:49 am
I am trying to move the boxes over for certain parts of the form so it’s not a long list of items to fill out and they are more like two or three next to eachother: city, state, zip all next to eachother but with the label text for each above them…
September 27, 2009 at 12:52 am
And I’d also like to add option buttons for Yes or No..
September 28, 2009 at 11:52 am
using contact form when i send message then it cannot go thanyou page. It give a message
” Warning: Cannot modify header information - headers already sent by (output started at /home/shahid/public_html/contact.php:9) in /home/shahid/public_html/contact.php on line 38″
September 28, 2009 at 11:55 am
using contact form when i send message then it cannot go thankyou page but i created contact.html,contact.php,thankyou.html,error.html. It go to contact.php file and delivered a message which is given below:
” Warning: Cannot modify header information - headers already sent by (output started at /home/shahid/public_html/contact.php:9) in /home/shahid/public_html/contact.php on line 38″
pls tell me what will i do?
September 28, 2009 at 12:19 pm
I found problem my contact.php file. I solved this problem.
Thx for your script
October 1, 2009 at 10:11 pm
http://www.prangopalroy.com/contact.html
I am testing with this tutorial for a form on this website.
But it just wouldn’t work!!
I tried using different email addresses in the mailto: section… …@gmail.com, …@hotmail.com,…@rediffmail.com
but not once did the email go through on clicking send on the form
PS: i havent created the thankyou and error html files, though i have mentioned their paths in the php file. could that be the problem? but the script works so far as trying to open them correctly as expected. But no mail is going thru
Please help!