Grow your CSS skills. Land your dream job.

#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:

Download Video File

Comments

  1. Drew

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

  2. Matt

    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.

    • 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. 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:

    http://css-tricks.com/examples/WebsiteChangeRequestForm/index.php?req-name=Chris+Coyier&req-email=chriscoyier%40gmail.com&typeOfChange=Add+New+Content&urgency=Super+Wicked+Urgent&URL-main=http%3A%2F%2Fcss-tricks.com&addURLS=&curText=&newText=hi

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

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

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

    • Cipa

      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.

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

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

    • (( UPDATE ))

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

      Thanks all!

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

    • 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…

    • Cipa

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

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

  7. 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. Chris – you are a legend, Syncing iTunes now!

  9. Snookerman

    Nice tutorial, thanks!

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

  10. Joseph S.

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

  11. Sarah

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

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

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

  16. liang

    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>
    </div>
    </div>

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

    http://css-tricks.com/forums/viewtopic.php?f=5&t=2690

  21. 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. 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. Olli
    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.
    Olli.

  24. mememe

    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. Saswata
    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…
    Thanks.

  26. Mike
    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. Soma
    Permalink to comment#

    Hi,
    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. Permalink to comment#

    How about styling FORM file input fields ?

  29. Akamerc
    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. 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. blood pressure specialist Juliustown

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

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".