Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to create a html contact form. Copy and paste and jobs a goodun.

Discussion in 'Website Design Forum:' started by Jazajay, Dec 11, 2009.

  1. Jazajay

    Jazajay Active Member

    Please see the solution if you get a 500 error due to a bad server configuration.

    Below is a fully functioning XHTML contact form that will validate to strict and is accessible to people with disabilities.
    Please read user notes at the bottom to get it to work on your site, easy steps and you don't need to be a geek to get it to work.

    Post 5 contains an upgraded version with styling, and some minor improvements using some CSS3 that degrades nicely.

    User notes
    1. Please keep the last comment in out of curtsy, but you don't have to if you want to seem amazing to your boss. ;)
    2. All you need to do is edit the bolded lines, html comments explain what needs changing and that's it just copy and paste it and you have a fully working contact page for your site.
    3. The file needs to be saved as a php file so something like contact-me.php, not .html or .asp as we are using PHP code.

    Aren't I nice it even validates.
    If anyone would like any improvements just let me know, or if you run into problems, and I'm sure me or someone on here will help you out with them.

    Jaz :)
  2. Thought I would make this one a sticky thread, Jaz :)
  3. Jazajay

    Jazajay Active Member

    Aww cheers buddy, that will save me having to dig through DF's achieves to find it when I need to link to it as it seems to be a frequent question. :)
  4. exactly :) also means if / when you have an update to it you can put it in here :)
  5. Jazajay

    Jazajay Active Member

    User notes
    # Minor styling added,
    # A few minor changes to the email script,
    # A few minor changes to wording and error messages, this one is more user friendly and more designer/non programmer friendly,
    # Uses some CSS3 but degrades nicely,
    # CSS won't validate but it passes XHTML W3C validation at strict.
    # The 2 hacks are to fix the Opera margin-top, which covers the heading in Opera if not applied.
    # IE conditional for IE 7 to move the margin up more.
    # IE 6 conditional to move the feedback box up and apply space to the top of it.
    # Tested and works in Safari 4, Opera 10, IE6, IE7, IE8 and FireFox 3 on PC.
    # The file needs to be saved as a php file so something like contact-me.php, not .html or .asp as we are using PHP code.
  6. Harry

    Harry Senior Member

    Do you think it's wise to enforce your less than ideal naming conventions on others? You use them for reasons you understand and can justify, but for someone who's probably not as advanced as you, I'd seriously suggest sticking to the norm…
  7. So are we all creating code to share, now...?
  8. tim

    tim Senior Member

    @MCB Web Design

  9. Jazajay

    Jazajay Active Member

    I thought id's such as feedback and error where for other ppl, I would call them e1 and f`1 TBH. The reason I haven't put main or content in is because the said code will go into someone elses site so thats for them to do, let me know what your on about any way and I'll edit it for everyone. :)

    I've just seen post after post after post about this, and then another member linked to my contact form when another member asked about the sameish problem, so I thought I would make a post that I can then link to as a solution for the community as a whole, as that solution wouldn't work for everyone as it had his specialist captcha in, didn't you contribute slightly to this any way in optimizing code? Chris has however kindly made it a sticky as it is a topic a lot of ppl on here ask about a lot. :)

    It was more to save me time in just writting the same code over and over again TBH.
    By the way I do appologise I thought for some mad second that this was the web coding and development help forum?
    My mistake. ;)
  10. Jazajay

    Jazajay Active Member

    Did you mean the labels?
    Yeah my fault didn't change them over, done now cheers fella well spotted. :)
  11. I thought it would help everyone to have this set as a sticky :) mainly because it might be a common problem. :) If there are loads of objections to this I will unsticky it :)
  12. bentzak

    bentzak Senior Member

    whatever the opposite to object is, im that, support? in favour? this is some good shizzle right here! its what DF's all about i thought! i believe jazajay was refering to me with the previous post, i tell ya one thing if this was up then it would of saved me and him heaps of time. i thank thee for the generosity! that rhymes, unintentional.

    im sure i will be borrowing this code on current and future projects, and as soon as i have figured out what half of it means and have maybe written some of my own, i too will share, could be a bit of a wait tho.

    i say again, as far as im concerned, this is truly appreciated. jaza, you da man.

  13. Jazajay

    Jazajay Active Member

    In the last 4 pages in this forum alone there is ~
    # which has 7 replies, 90 ppl viewed it.

    # which has 20 replies and 307 views

    # which has 33 responses, 181 page views.

    # which has 6 replies and 51 views.

    Now take into account this thread has only been up for 22 hours and Sat being a slow day in forum views on the whole and this thread already has 79 views which is more than 1 of the help threads thats been up for a 3 days.

    Taking them to a total of 66 replies and 700 ppl viewing them.

    And most of the other threads are about individual problems/general questions and I know I've replied to threads on this before as well and I've been a member for well over a year now. But if ppl have an issue with it I don't mind Chris removing it then I, or other members if they like, will just link to it when anyone asks about how to create a contact form, same solution to the same problem as in ppl who need it will still see the code. At the end of the day I like to think DF has a good community not a community like some, where the top members dominate. Here everyone can contribute with out the fear of being belittled and as I have learnt stuff from members on here, don't have a problem saying that either, I wanted to give something back and as this seems to be asked a lot I saw the perfect opportunity. :)

    Doesn't Harry do the same anyway, but links to his own site?
    I don't have a problem with that as some of the CSS I've used in this form I've "borrowed" from his helpful post that link to his site showing a great example to a members problem, I also changed my how to code accessible XHTML data tables in my accessibility web coding thread to also link to his site as a great example of a well coded one for blind users so members can see the actual visualization of a good coded one. :)

    Aww cheers Bentzak and yeah it was you I was referring to, but that's what I was trying to do you know be helpful to members who have helped me out in the past, just because I don't reply to a thread doesn't mean I don't learn from a thread.

    I would advice you to bookmark that now though, but your more than welcome. :D

    But I am glad it has helped. :)

  14. Jazajay

    Jazajay Active Member

    To get it to work.

    Hay guys to get it to work the file needs to end in .php not .html, .asp or whatever it must be called something like contact-me.php for it to be parsed properly.

    If anyone runs into any issues please let me know and I'll help you through it. :)
  15. Jazajay

    Jazajay Active Member

    O if anyone would like to test it in any of the Mac or mobile phone browsers that would be great even if it looks fine it would still be nice to know. If you do please say which browser version and if it's a Mac or mobile device. Any code fixes for those browsers would also be appreciated if it is out slightly.

    Thanks to anyone who takes the time to improve this for every one, it will be appreciated and credit will be given wheres credits due. :)

  16. bentzak

    bentzak Senior Member

    i just tried it on my iphone, waiting on the email. will let ya know if it comes through.

  17. bentzak

    bentzak Senior Member

    no luck

  18. Jazajay

    Jazajay Active Member

    There shouldn't be a problem with the form sending on any device as along as the server you test it on has an active email client TBH because as soon as the form is submitted the server, not the device sends the email. :)

    I meant more doe's it look correct in the iphone and other devices though or is it out in some areas. :)

    Cheers for testing though.
  19. tbwcf

    tbwcf Active Member

    Hey Jazz how would you go about adding extra fields ie: telephone number...? I added in the html part:
    but it doesn't show when uploaded so I figured I needed to do something in the php if / else statements above but my attempts haven't worked.... :/

    P.S - Got it working great in its original state!
  20. tbwcf

    tbwcf Active Member

    Scrap that - missed a bit further down

Share This Page