Designing a stylish contact form for your portfolio

CrazyLeaf Editorial

Follow us on Twitter @crazyleaf. More from us → zabox.net (design news portal & community)

You may also like...

65 Responses

  1. Good.. I really appreciate.

  2. Fox says:

    Cool, I saved it.

  3. 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

  4. Marcel says:

    Somehow it doesn’t work for me even though I followed instruction to the letter

  5. Alex says:

    @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.

  6. Marcel says:

    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 !

  7. DarkShadow says:

    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?

  8. Alex says:

    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.

  9. Sarah says:

    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!

  10. Alex says:

    That’s what this article is about. It explains how to make a contact form that sends visitors messages to your inbox.

  11. Sarah says:

    Right, but does it open a mail program? And am I able to redirect users to a thank you page?
    Sorry for the confusion!

  12. Alex says:

    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

  13. Sarah says:

    Oh got it now! Thank you. Last question I promise, where do you save the contact.php file?

  14. Alex says:

    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).

  15. arturo says:

    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

  16. Kimmo says:

    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.

  17. Alex says:

    @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.

  18. Shabbir says:

    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

  19. Angie says:

    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

  20. Alex says:

    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.

  21. Angie says:

    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

  22. Alex says:

    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.

  23. Angie says:

    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

  24. Alex says:

    Hey Angie. Archive all the files into a zip archive and send them using our contributors form here : http://www.crazyleafdesign.com/blog/contributors/

  25. Angie says:

    Alex, you rock! thanxs

  26. Angie says:

    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

  27. Neateye says:

    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

  28. Jon says:

    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

  29. Dan says:

    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 = ‘[email protected]’ ;

    But it doesn’t seem to work. Help please! 🙂

  30. Alex says:

    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.

  31. Dan says:

    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.

  32. Alex says:

    I understand. I had a few problems with Yahoo Mail also. Glad to see it’s not the form 🙂

  33. Greg says:

    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.

  34. Alex says:

    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.

  35. it was a very useful for my works! 🙂 Thank you!
    10 by 10!!!

  36. Anand says:

    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 [email protected], [email protected], [email protected]. Please help!

  37. Alex says:

    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.

  38. J says:

    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

  39. J says:

    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

  40. Ryan says:

    what do I name the css file? I couldn’t find this information on this tutorial.

    Thanks!

  41. Alex says:

    @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" />

  42. James says:

    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 ;

  43. James says:

    It’s ok! Got it working… I was testing it offline, and so the url value was wrong… silly me!

  44. Joanna says:

    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…

  45. Joanna says:

    And I’d also like to add option buttons for Yes or No..

  46. era says:

    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″

  47. era says:

    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?

  48. era says:

    I found problem my contact.php file. I solved this problem.
    Thx for your script

  49. Sam says:

    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!

  50. PMN says:

    Hey,

    How to get feedback form data into my server.
    I need entire form input details into my server as EXCEL file.

    Help me..

    Regards,
    PMN

  51. Hi Alex,

    I tried using the form you provided, following each instructions carefully. I believe I never missed out anything but the form still does not function properly. You can check the form I created using the tutorial you provided at http://www.chocolatesbybenoit.com/christmas.html.

    The problem is whenever I click send, without entering any information, it just loads back to the $formurl location. I have both error.html and ordersuccess.html created as well.

  52. patrick says:

    Thanks for sharing this post. I already have a contact form a bit like this one, but with no color scheme like yours. I will test this soon as I get home. I kinda like the hovering in the form fields. looks nice. thanks

  53. patrick says:

    yep, it works fine. no problems whatsoever. thanks

  54. Ben Stokes says:

    Thanks for the post, the script looks really simple as well. I may try this on some of our new projects.

  55. Lee says:

    Hi, I have had a go at this but i receive this message once the send button has been clicked:

    Warning: Cannot modify header information – headers already sent by (output started at /home/r0g47637/public_html/contact.php:8) in /home/r0g47637/public_html/contact.php on line 42

  56. Ashton says:

    Hi. Thanks for this tutorial. I really like it but i am having some trouble. Everything works perfect except i never actually receive any emails. Any help that you can give me on this would be greatly appreciated. You can see it on my site at http://www.ahdesignsonline.com/cleanweb/contact.php

    PS. I haven’t styled it yet cause i want it to work first

  57. Alex says:

    Hey Ashton. Try do download the files we are using on our website and just modify them to suit your needs (your email, subject etc). The download URl is here : http://www.crazyleafdesign.com/contact.zip

  58. Ashton says:

    Hey thanks. i downloaded your one but still no change. Everything acts like it works but it never sends an email. I feel like i have tried everything.

  59. Alex says:

    Ashton, send me your contact.php file you are trying to use on your website to this email address : crazyleafdesign.com [at] gmail.com

  60. Glen says:

    I am having the same issue as ashton. I never receive an email. Can someone help me out?

  61. dimitra dimitra says:

    hiiiii

  62. dimitra dimitra says:

    kkkk

Leave a Reply

Your email address will not be published. Required fields are marked *

Shares