#62: Advanced Form Styling & Functionality

This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. We then use PHP to optionally save the users name and email, as well as send the actual email.

Links from Video:


  1. User Avatar

    Thanks so much, been waiting a couple of days for this. Very excited its available now!

  2. User Avatar

    How about using a session instead of a regular cookie? You’d set one less cookie and your clients data would be more secure, especially since it’s storing both their e-mail and name can be considered sensitive data. You could also allow expansion for other areas if needed by just storing more variables within the session. Finally, data on the server is safer than data left on the users computer. Many of my clients still use IE 6, which have their share of cookie monsters.

    Sorry if that sounds irrelevant, but safety is a big issue with me.

    • User Avatar
      Noah Hendrix

      One caveat is that session_data is generally cleared after so long via built-in PHP garbage collection. Also it is better to give the user control over this data and not retain it on the server (for privacy concerns).

      Obviously both your approach and the cookie approach has pros and cons.

  3. User Avatar
    Chris Coyier

    I am realizing now I didn’t talk much about “serialization” like I kept saying I would. Basically what that means is that the query string that ultimately gets shipped off to the AJAX request is built dynamically.

    In this example, it ends up looking like this:


    The “name” of each input is used as the parameter and the value of it is sent as the value of that parameter.

    This is incredibly helpful! – Otherwise you’d be needing to construct this query string by hand. When inputs changed, you’d be needing to change your code that builds this query string to accomodate. With the jQuery Form Plugin, it does all this serialization work for you, so you can just change the HTML markup and not worry about it.

    I believe we could have used the serialization concept in the PHP as well… but alas I’m not that good at PHP yet.

  4. User Avatar

    Why use GET instead of POST? I see no advantages to the the GET method.

    • User Avatar
      Chris Coyier

      I understand the difference between the two, but I don’t know enough to understand why it matters, especially in the context of AJAX. I’m sure it’s important though. Feel free to enlighten us.

    • User Avatar

      I would not recommend sending a big text over the URL. AFAIK the length of the URL is limited for some browsers. If you want to send a big chunk of text it might not get to the other side.
      What if I have javascript turned off. The user will see a strange URL on the thank you page. This is if the form degrades nicely when javascript is off.

      At least that’s how I see things.

    • User Avatar
      Noah Hendrix

      If you look at from a web services perspective (i.e. Rails) GET is used when you want to receieve exisiting content. So GET would be appropriate say when searching for an item be it an article in WP or indexed websites on Google. An added benefit is that these become bookmarkable, the query is in the URL, so they can be shared.

      Transitively POST is appropriate when an item is being created or modified. An example is when creating a post, or a comment like this. The benefit of this is that more data can be sent over POST than GET in many cases.

      One notable counter-example, more the exception than the rule, is login data if I attempt to authenticate with site (secure or not) I want my username and password sent over POST so that they don’t appear in my history.

      On this specific form you would do better to use POST because the end result is creating an email that is sent to you. So if a browser has JS disabled they are submitting the form via the URL which is fine except that means if they bookmark the URL each time they navigate to the page they are sending an email to you, which is probably not desired.

    • User Avatar
      Chris Coyier

      Makes perfect sense. I’ll look into making the alterations to make it work with a POST instead and I’ll update the files as soon as I get a chance.

    • User Avatar
      Chris Coyier

      (( UPDATE ))

      I updated the example and the download to use POST instead. Clearly, POST is far superior in this usage.

      Thanks all!

  5. User Avatar
    Tim Wright

    Have you hit any snags loading jquery from google like that? It’s been hanging on me like crazy lately, I actually had to pull is down on heavier-trafficked site.

    • User Avatar
      Chris Coyier

      I have yet to have problems with it, but that’s certainly a concern. Self-hosting is probably smarter on small to midsize implementations. On bigger sites, I can imagine saving ~30k on every page load is pretty significant bandwidth savinging, not to mention faster loading (when it works).

      I just do it so I don’t have to go copy a new jQuery file into every example…

    • User Avatar

      I also tried google’s Jquery feature but the site was slower. Maybe because my server is closer to my computer then google’s server.

      People on the other side of the world might have a different experience.

  6. User Avatar

    Awesome timing, just about to revamp a whole shwack of forms for a client, let’s give ’em some fancy stuff!

  7. User Avatar
    David D.

    Gee, any chance you could include some written documentation for those of us unable to view the video? With the video not working for me — on several occasions — the tutorial is meaningless.

    Sure I can download the files and look at the demo, but that’s not the point. I guess I’m old school. I prefer written documentation that I can convert to something called paper.

    Nice work though.

  8. User Avatar
    Daniel Groves [HiddenCSS]

    Chris – you are a legend, Syncing iTunes now!

  9. User Avatar

    Nice tutorial, thanks!

    By the way, you do know there are 365 or 366 days in a year right? Not 360. But whatever.

  10. User Avatar
    Joseph S.

    No styling or validation with JS disabled… if I turned JS off I guess I could send unvalidated messages, right?

  11. User Avatar

    Just as a note, the GET method often has a much smaller limit on the amount of data transfered compared to the POST method, which may result in an error from either the browser or the server depending on how they are set up.

    Also as the data itself is expanded with GET method as many characters need to be URL encoded such as the space (%20) adding to the data transfer.

    Nice articles and love your voice : )

  12. User Avatar
    Tutorial City

    Just a feedback to Chris, I’d like to tell you that I prefer to watch the video eith the content already typed, because in this way we can learn more on the logic.

  13. User Avatar

    No offense but “Tut City” is correct – it also makes your video better because, forgive me, you tend to ramble less and your verbal delivery is better when you’ve got an outline to describe or follow. Just an observation, for what its worth.

  14. User Avatar
    Ben Lacey

    Great video!

    I love the animating of the text box if a check box is ticked / unticked!

    I might find a way of incorporating something like that into my site at some stage, or a JQuery slideToggle() for a side bar or something, then back it up using CSS hidden attribute or something

  15. User Avatar

    Nice job. I’ve been wondering how to make web forms that don’t suck.

  16. User Avatar

    Hi! I have a newbie question about checkbox array display. I was trying to make some custom on this form tutorial, but I am stuck on displaying the multi-select checkbox values.

    Here is my checkbox area example:

    <div class="rowElem">
    <div id="changeTypeArea">

    <input type="checkbox" name="test" id="c1" value="Test1" />
    <label for="c1">Test1</label>

    <div class="clear"></div>

    <input type="checkbox" name="test" id="c2" value="Test2" />
    <label for="c2">Test2</label>

    <div class="clear"></div>

    <input type="checkbox" name="test" id="c3" value="Test3" />
    <label for="c3">Test3</label>

    <div class="clear"></div>

    <input type="checkbox" name="test" id="c4" value="Test4" />
    <label for="c4">Test4</label>

    <div class="clear"></div>

    <input type="checkbox" name="test" id="c5" value="Test5" />
    <label for="c5">Test5</label>

    and array post script:

    $message .= array();
    if (isset($_POST["test"])){
    $message .= $_POST['test'] . "\n\n";

    Anyone know whats wrong on my script because now it only display “Array” when it send to my mail.

  17. User Avatar
    Eric Lightbody

    Amazing tutorial. Seriously. Your screen-casts are always top-notch. The only thing I thought of (which is probably outside the scope of this screen-cast) is having PHP validation when javascript is turned off. But, I’m somewhat new to PHP since I have worked mostly with ASP…please don’t laugh. Does anyone know of a good set of functions that does a more automated way of doing PHP validation?

  18. User Avatar

    I had a php script very similar to the one you have hear, really like the implementation of ajax though, that’s a slick trick that I need to start using more. Great screen cast.

    NOTE on screen cast
    If you start by showing simple examples of X jquery plug-in (and type that out, then the result), then show an already created script you made implementing X plug-in then you can get the best of both worlds.

  19. User Avatar

    Another reason why not using the senders email in the “from”-part in the headers using the php mail command is that it could be used for sending spam.

    Eg. if a potential spammer uses something like “mail@mail.com\r\nCC: user1@mail.com; user2@mail.com” as “his” mail-adresse and you don’t filter/escape that input it’s possible to send spam through that contact-form.

  20. User Avatar
    Sumeet Chawla

    Hey guys,
    Am having some problem with the ajax submission of the form.. I can’t seem the understand where i am going wrong.. I have also posted my problem on the forums. I would really appreciate it, if someone can take a look at it :)

  21. User Avatar
    Sumeet Chawla

    Oh and I must say awesome tutorial.. ;) great work chris as usual… and is there a way of providing edit option in comments? I kinda made a grammatical error in the above comment and can’t fix it now :P
    Thanks for the tut! really helped me a lot!

  22. User Avatar
    Permalink to comment#

    Chris, Great tutorial.

    I was just wondering, i am trying to learn javascript/jquery and would like to know what resources you used to educate yourself?

    I am finding myself doing a few tutorials here and there but dont seem to be getting any wiser from doing them. Any tips?

  23. User Avatar
    Permalink to comment#

    Hey Chris,
    love your screencasts. Can’t get away from them.
    Pls, have a look at #62. Maybe the video is broken…?!
    Best regards from Germany to the US.

  24. User Avatar

    Greetings, I’d like to know a bit more about the minlenght part. I recognize this is part of the validate plugin from javascript. BUT

    1.- I dont know where of how it is activated
    2.- wether other atributes can be called that way
    3.- if so how can I know which ones are activated

    Ive searched and I know there[s somethign related with the sules statement but I am not sure

  25. User Avatar
    Permalink to comment#

    Thanks for a great tutorial…It helped me a lot…
    I was just testing few things and I entered only numbers (like: 664467) in Your name field, it’s still sending the information. I think we need to change it to only text…

  26. User Avatar
    Permalink to comment#

    Hey Chris! Great tutorial. I love PHP but javascript/jQuery is my weak point, so when I decided to search for a form validation plugin, I was happy to see your name pop up in the search results. I’m sure I could have managed without a video tutorial, but it was a pleasure to relax a little and get the information spoon fed to me. Thanks!

  27. User Avatar
    Permalink to comment#

    Thank you for your wonderful tutorial.
    I have a question. I have searched for two days and found nothing but the raw code for jqtransform.

    I am wondering if you or anyone could help me with a show/hide using 4 select options. I have tried using radio buttons as well for the same concept in websitechange.js but it won’t work.

    I have tried about 20 scripts using $(document).ready( function () {
    But, it doesn’t work inside the form (only outside).

    I am hoping to add the added code right to the websitechange.js file if possible.

    Any help would be greatly appreciated. :o)

  28. User Avatar
    Permalink to comment#

    How about styling FORM file input fields ?

  29. User Avatar
    Permalink to comment#

    If I just wanted to use just the checkbox function to show/hide my comment box what parts do I need from the html and js.

  30. User Avatar
    Permalink to comment#

    tq very much, i like crazy people to find the answer about jqValidation and jqAjaxForm. I download ur PHP Code and relize small of code ur write. And Tq again.. :)

  31. User Avatar
    Osborn blood pressure specialist

    blood pressure specialist Juliustown

  32. User Avatar
    Permalink to comment#

    I love this form & have used it for my site, however…I am not getting my tester emails to go through. My site is now live & no matter which browser or device I use, I have no luck. Any suggestions?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.