#21: Walkthrough of Contact Form

In some ways, the Contact Form is the "Hello, World!" application of web designers and web developers. It is nothing that hasn't been done before a million times, but it is symbolic of being able to control the design of a page as well as make a page truly functional. In this screencast I talk about contact forms in general as well as quickly walk through the design, creating, and functionality of Contact Form.

Links from video:


  1. Michael
    Permalink to comment#

    Cant tell you how helpful your videos are. Just amazingly insightful and useful for the everyday developer.

  2. Alan Murray
    Permalink to comment#

    I’m loving your videos, too.

    Hey, can you tell me where “contactengine.php” came from?
    Did you write it, or scoop it from somewhere.

  3. Varun P.
    Permalink to comment#

    Hi Chris! I’m an undergrad from Berkeley and I just wanted to thank you for all your videos and tutorials. They are unbelievably helpful :)

  4. It´s me
    Permalink to comment#

    Hey there….

    I might be a little late on this post, but I´m a beginer, so bare with me please. The form is not validating on my test site. The demo link isn´t validating either. Did something change since this was posted a while back?

  5. Andre
    Permalink to comment#

    Hi Chris,

    I read online that spammers can actually hijack your contact form and use your server to send out mass emails to people because of vulnerabilities in the php mail function. Is there anything you can suggest to prevent that?

    For example, I know about captcha, which requires the user to correctly type in the characters displayed in an image before submitting. This is great to prevent bots, but not really for an individual that would need to only send out a handful of mass emails.

    I read online one suggestion would be to parse the file in your php script to check if there are any links in any of the fields by looking for “http” and return an error if any were found. A spammer can still get around that if they are persistent enough.

    Do you actually try to prevent this or is this just something that someone doesn’t really need to lose any sleep over?


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.