Development

Beautiful Forms – Design, Style, & make it work with PHP & Ajax

March 9th, 2009

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.

Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.

Today we wanted to share with you some great steps to get the perfect form: we will go through designing and usability you need to keep in mind, styling your form, spicing it up with some nice javascript effects, validating user’s input and finally getting it to work using PHP and Ajax.

1. Designing & Planning out your Form

Fancy Form Design Using CSS

A very useful CSS tutorial for making fancy forms with good usability.

beautiful forms

Web Application Form Design

Read these guidelines to help you better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.).

beautiful forms

Web Form Design Patterns: Sign-Up Forms

A very interesting analysis of 100 popular web-sites where web-forms (should) matter. The second part of this analysis can be found here.

beautiful forms

Sensible Forms: A Form Usability Checklist

Follow these guidelines, and you’ll be off to a good start for creating sensible forms by using a form usability checklist.

2. Styling Beautiful Forms

How to create perfect form markup and style it with CSS

This post will explain different choices when marking up the forms, and the CSS styling involved in making them cross-browser compatible.

beautiful forms

Check out the vertical layout
the horizontal layout

Justify elements using jQuery and CSS

Justify elements using jQuery and CSS by calculating the width of a largest label and apply it to all labels. The jQuery function below does exactly this:

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();   
    });
    $("label").width(max);
});

beautiful forms

CSSG Forms Collection

5 uniquely designed and coded web form styles.

beautiful forms

Check out the demo here

FORM elements design using CSS and list (ul and dl)

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. This post will explain another way to design FORM using list elements <ul> and <li>.

beautiful forms

XHTML/CSS web forms: 5 simple techniques

This post explains 5 simple techniques for creating web forms.

beautiful forms

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

beautiful forms

Check out the demo here

2. Spicing up your Form

Changing Form Input Styles on Focus with jQuery

This tutorial will show you how to spice your form up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

beautiful forms

Check out the demo here

Form field hints with CSS and JavaScript

This tutorial will show you how to get a nice effect, as you tab through each input field, some helper text appears in box out to the right.

beautiful forms

Check out the demo here

Context highlighting using jQuery

Learn how you can easily improve the user experience by highlighting the current context to enable users to focus only on a current action.

beautiful forms

Check out the demo here

Improve form usability with auto messages

This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.

beautiful forms

STYLING FILE INPUTS WITH CSS AND THE DOM

File inputs (<input type="file" />) are the bane of beautiful form design. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

beautiful forms

Check out the demo here

Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a sliding login/signup panel for your website using Mootools 1.2.

beautiful forms

Check out the demo here

FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

beautiful forms

Check out the demo here

Validating Forms

Validation Hints for your form

As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field’s validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.

beautiful forms

Form.Check

A mootools script that allows you to validate different form fields before submission, Validation include: On leave a field & On submit the form. The message is displayed over the field, only one tip at once, tips don’t flash on submit if errors remain with the ability to close tips.

beautiful forms

fValidator

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. Here’s a brief list of the most important features: Works perfect with iMask as it’s complement, Multiple forms per page supported, Number of verified fields is not limited, Number of filters per field is not limited.

beautiful forms

Check out the demo here

Validate

Validate is a mootools form validator script, having the following features: optional onFail function, optional onSuccess function which will overide the form submition, this can be used to validate an ajax form, onBlur validating, shows errors next to item or in a list.

beautiful forms

Check out the demo here

PHP & Ajaxifing Forms

ProtoForm

ProtoFormClass is a Prototype class that allows you to very easily validate the forms fields and send data in ajax. Features include: 1) Check required fields (input, textarea, radio, select, checkbox) and validate Email, Date, Telephone number and Url. 2) Send data and show response with Ajax, highlight the form field on focus and on error. 3) Lightweight (only 4KB), unobtrusive and cross-browser (tested on Firefox, Opera, Safari, Internet Explorer 6/7)
4) allows you to validate more form on the same page.

beautiful forms

Check out the demo here

Submit A Form Without Page Refresh using jQuery

In this tutorial you will learn how to submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background).

beautiful forms

Check out the demo here

LightForm ::: Free Ajax/PHP Contact Form

LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.

beautiful forms

Check out the demo here

Autosuggest / Autocomplete with Ajax

The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar).

beautiful forms

Check out the demo here

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: ,

102 comments for „Beautiful Forms – Design, Style, & make it work with PHP & Ajax
  1. insic on March 9th, 2009 at 10:27 pm

    wow! awesome list. and nice forms

    • shakeel on October 27th, 2009 at 10:27 pm

      nice same to u?

    • geekboy on November 9th, 2009 at 4:25 pm

      nice face. i love u

  2. Jean-Baptiste Jung on March 9th, 2009 at 10:36 pm

    Very good list of resources here! Forms are a very important but often neglected point of a website.
    I might use some of them in my newly created “digg-like site for WordPress” http://wpvote.com !
    Cheers Noura!

  3. Janko on March 10th, 2009 at 1:24 am

    Wow, great list! Thanks for including my articles :)

  4. joule on March 10th, 2009 at 2:09 am

    Dude, it’s great

    i will use this into my website

    thank you for sharing.

    • Tara on October 19th, 2012 at 1:14 pm

      Great article and good forms, thanks.

  5. Nicolas Crovatti on March 10th, 2009 at 2:33 am

    I was looking for it for a new webapp! Perfect timing and some very good pointers.
    Thank you !

  6. Brandon Cox on March 10th, 2009 at 3:00 am

    I love it – awesome suggestions for form resources. Thanks!!

  7. saurabh shah on March 10th, 2009 at 3:37 am

    wow ! awesome list …

  8. Moschos on March 10th, 2009 at 5:02 am

    Great info!! Hope you’ll keep them online for years

  9. Mike Raymond on March 10th, 2009 at 5:07 am

    Bravo! Thanks for sharing.

  10. V1 on March 10th, 2009 at 5:18 am

    No Spry Validations? :P

  11. Martin Gonzalez on March 10th, 2009 at 6:46 am

    Very nice!! Thanks.

  12. jeff on March 10th, 2009 at 6:57 am

    definitely a nice list, but something screws up the page so it renders weird.

  13. Jeromy on March 10th, 2009 at 7:02 am

    Another great list!

    This is one of my remaining tasks for the work I have been doing to customize/design my blog. I think a big challenge for someone like me is that I have zero training in any of this stuff. I have truly been “flyin by the seat of my pants”. CSS remains my more elusive lesson.

    Cheers!

    Jeromy (AKA Hillbilly)

  14. Will Fitch on March 10th, 2009 at 7:04 am

    Wow. You’re a very talented designer. Great job!

  15. Lowg on March 10th, 2009 at 7:40 am

    Hmmm very nice ;) i really like this.Tnx a lot and keep up the good work.

  16. jason on March 10th, 2009 at 7:56 am

    This is a very useful article. I’m redesigning my site at the moment and was looking for inspiration on the contact form.

  17. Eric on March 10th, 2009 at 9:29 am

    Thanks for the great tips.

  18. Team Nirvana on March 10th, 2009 at 12:02 pm

    Awesome stuff there. Would have felt content with the provided plugin for WordPress cform. Even though, it is the best and the easiest to use.

    Now, there would not be such a surprise when I see some forms which are amazing, because, you have let us know all the trade secrets behind those jazzy and well placed form.

    Thanks for sharing this.

  19. Sklep Zoologiczny W?dkarski on March 10th, 2009 at 3:34 pm

    I assume you search stuff for your posts twenty for seven… Right? ;)

  20. neondragon on March 10th, 2009 at 3:47 pm

    How about Uni-Form? (http://sprawsm.com/uni-form) It’s a framework for form design, I’ve started using it recently and it’s great!

  21. Michael on March 11th, 2009 at 1:09 am

    Very nice, thank you!!

  22. html slicer on March 11th, 2009 at 8:31 am

    Excellent!
    i found File Button Styling very long! Now i have it!

    Thanks!

  23. Caroline Jarrett on March 12th, 2009 at 4:16 am

    Thanks for pulling together this great collection.

    I’d really encourage people to spend some of their time thinking about the questions they are asking and what their users want to tell them. No matter how lovely your form looks, if it asks questions that the user doesn’t want to answer then it won’t work.

    • sen on April 26th, 2011 at 2:04 pm

      hi all i tuday stady in intitut of technology fo cambodai

      as student 3 year .now day ,i have working as intenship
      in campany smartbusinessgroups

  24. strony internetowe on March 12th, 2009 at 5:51 am

    nice stuff!!

  25. Zero-x19 on March 12th, 2009 at 9:12 am

    THXXXXXXXXX

  26. Randy on March 12th, 2009 at 10:55 pm

    This is fantastic! Thanks!!

  27. math on March 13th, 2009 at 3:43 am

    thx, really useful to me.

  28. Hezi on March 14th, 2009 at 3:56 pm

    wonderful!

  29. Juarez P. A. Filho on March 15th, 2009 at 7:40 pm

    Really impressive list. I love form design and code. Great new stuff to learn more and more. :)

  30. Bastian on March 17th, 2009 at 10:29 pm

    Cool! Just cool!

  31. Rainer Bendig on March 19th, 2009 at 4:30 pm

    Thanks for that cool collection

  32. strony internetowe on March 24th, 2009 at 2:34 am

    great stuff

  33. tttt on March 26th, 2009 at 10:44 pm

    ttttt

  34. stef on March 29th, 2009 at 1:10 pm

    thanks, very useful.

    • priti on April 24th, 2009 at 11:33 am

      nice pointers.. really nice forms.. thanks..

  35. alx on May 2nd, 2009 at 4:58 pm

    hi.
    I would like to ask something…..cuz no one did answer this one.
    i;m a beginner ..so
    i;m using Show/hide a nice Login Panel using Mootools 1.2 on my Index.html
    so..
    how can i add now a register sistem? to the page?
    plz ..
    do i have to make a new page and add a form…..and?…
    plz plz

  36. shafeeq on October 20th, 2009 at 1:25 am

    It’s a Awesome Site , with a neat and Tidy Way to Explain the Working of the Application,
    it’s code and all the stuff, I really Appreciate the People Here for their time and patience.
    From now on words i don’t ping anywhere, except Here

  37. driver58 on October 22nd, 2009 at 2:38 am

    Question: When exactly was the Flash indexing algorithm implemented? ,

  38. Loy98 on October 23rd, 2009 at 1:59 am

    The large and important and very much discussed question is: How can the events in space and time which take place within the spatial boundary of a living organism be accounted for by physics and chemistry? ,

  39. Atasözleri on December 21st, 2009 at 5:48 am

    Thank you Noupe! Very nice telling and good archive.

    They are very good.

  40. Sareesh on January 1st, 2010 at 10:07 pm

    Its really nice collection. Thanks buddy sharing your knowledge.

  41. Vijay on January 12th, 2010 at 10:33 pm

    Great forms, Nice tutorials……….Thanks. I will have them on my site very soon.

    Keep up the great work.

  42. Raman on January 26th, 2010 at 11:28 am

    Nice Job

  43. Kaitora on February 23rd, 2010 at 3:04 pm

    That’s a nice set of forms. Thanks for resources

  44. Danny Maireroa on March 17th, 2010 at 7:33 pm

    Thanks heaps, I was for some inspiration for a fancy form, and this is exactly what needed.

    You are too kind.
    CHEERS :)

    • NguyenLan on April 6th, 2010 at 12:42 am

      hey, very useful for me…
      thanks guy!

  45. Rolf on June 26th, 2010 at 2:02 am

    Really Nice Collection, thanks for sharing

  46. Waleed on July 25th, 2010 at 9:18 pm

    Create a #registration #form using #HTML5 and #CSS3 http://bit.ly/brbTDz

    • John Bryan on October 22nd, 2012 at 1:11 pm

      Was just googling for something to show one of our new web designers who has got a bit spoilt with gravity forms on wordpress and we need something nice for a html site and stumbled onto this. Had to drop in a thanks as it really helped us out and save us hours :)

      Nice one!

      John

  47. Newquay on August 13th, 2010 at 3:34 am

    Hey, nice selections of forms. Thanks for putting them all in one place!

  48. rawz0ne on September 15th, 2010 at 10:22 pm

    Tnx! Wonderful list of form creations :)

    bookmarked for future reference….

  49. hami on October 3rd, 2010 at 8:28 pm

    Thanks,very nice collection of forms.

  50. Mark on November 10th, 2010 at 8:56 pm

    Very nice collection. The company that designed my logo had a nice looking contact form, check it out at logodoctor.co.uk

  51. Brett Widmann on November 21st, 2010 at 4:00 am

    These are very nice forms. I like the variety of styles given. Thanks for sharing.

  52. Lambert Chavannes on November 28th, 2010 at 6:37 pm

    Awesome Web form… Thanks for sharing!

  53. Dan Hatton on November 30th, 2010 at 2:44 pm

    Thanks for the list, the combination of all these are going to help me create really nice forms.

    Dan

  54. Indonesia Property on December 22nd, 2010 at 4:39 pm

    Amazing…. really really nice forms Style……… thank you

  55. mindxstudio on January 31st, 2011 at 6:34 pm

    Thanks a lot for such good stuff.

  56. Jeune gay on February 11th, 2011 at 5:08 pm

    Thank for this GOOD article !!!!

  57. King Kong on March 22nd, 2011 at 5:48 am

    Nice effort man, thankyou very much for compiling such a good collection of forms.

  58. Lokesh on March 26th, 2011 at 6:41 pm

    This site is good.
    Reading a little about Human Computer Interaction will help us design more efficient forms. :)

  59. srikanth on April 4th, 2011 at 4:46 pm

    Good love you keep it up

  60. quiche on April 13th, 2011 at 8:46 pm

    Very nice list and some beautiful forms… will give it a try!

  61. Robin on April 20th, 2011 at 11:18 pm

    There is a nice and open source all-in-one package you might want to check out; it’s called ValidForm Builder!

    PHP generates XHTML 1.0 strict forms and validates both client and server-side the contents!

    See the website for more information

  62. navin on April 25th, 2011 at 3:27 pm

    nice

  63. Anoir Hama on May 19th, 2011 at 1:18 am

    Cool Forms with Validation

  64. ryn on May 28th, 2011 at 7:56 am

    good jobs bro, and many cretive design login form.. thank for share

  65. Abdelkader Soudani on August 9th, 2011 at 2:16 am

    nice collection, thanks for sharing!

  66. Shibby on August 17th, 2011 at 12:05 am

    Very nice forms. i will definetly use some of the things i’ve seen here.
    Thanks.

  67. bioser on August 22nd, 2011 at 3:49 pm

    Very nice forms. i will definetly use some of the things i’ve seen here.

  68. masis on September 1st, 2011 at 12:42 pm

    Great list. I have already saw some of them but I have not enough experience to make such forms by myself, I need more knowledge og html, php, css etc. Now I’m using this email php form but I hope in nearest future I could do such forms by myself.

  69. STB on September 16th, 2011 at 4:22 pm

    Great. Just great. Thanks for your lists and references.

  70. Jay Boodhun on September 20th, 2011 at 11:33 am

    Very useful, thanks a lot :)

  71. William Luke D. Tupas IV on November 16th, 2011 at 10:00 am

    Awesome work guys! keep up the good work!

  72. Piyush Agarwal on November 19th, 2011 at 11:17 pm

    Great list…really helpful. Thanks. :)

  73. Adrian on November 23rd, 2011 at 10:35 am

    Nice collection of form related articles here, thanks for sharing.

  74. Dheeraj Bansal on December 1st, 2011 at 7:16 pm

    Really awesome designs. Finally my search for registration form design ends at your bog.
    Thanks again

  75. Yesta Desamba @Graphic Design on December 31st, 2011 at 3:51 pm

    great tutorial, very useful thnx:)

  76. srinivasarao marturi on January 4th, 2012 at 1:01 pm

    great tutorial… it;s very useful

  77. Sukhwinder Singh on January 9th, 2012 at 7:11 pm

    Great Form Resources. It’s really helpful.

  78. Brinn on February 13th, 2012 at 11:24 am

    Thanks! great inspiration for a site we’re working on for an outsourced marketing company with multiple complex web forms

  79. Jotish Suthar on March 1st, 2012 at 9:05 pm

    Thanks a lot. Was really very useful for my online project.! Impressed lot of teachers. And a very great site.!

  80. yuppie on March 23rd, 2012 at 9:19 pm

    absolutely fantastic

  81. Mukesh on March 29th, 2012 at 4:24 pm

    They are really good .. ;) good collection ;)

  82. Helen Neely on May 10th, 2012 at 5:16 pm

    This is a fantastic tutorial on creating truly eye-catching forms. For a beginner like myself, this is a nice way to start learning web development.

    Nice work.

  83. Lee on May 26th, 2012 at 3:25 pm

    A great list, since 2009 and still so many sites suck with their contact forms. A broken link needs to be updated to https://github.com/lipidity/FancyForm :)

  84. adir on June 19th, 2012 at 8:39 am

    wow… its very nice design… thanks

  85. noa on June 20th, 2012 at 2:28 am

    looks good!!!

  86. Satish on June 20th, 2012 at 8:26 am

    Its nice and good……

  87. anze harej on June 28th, 2012 at 5:17 pm

    Wow, wonderful forms, great inspirations…

  88. ayan on July 20th, 2012 at 4:07 am

    nice tutorial. It’s really difficult to handle a form.

  89. micheal on August 21st, 2012 at 8:23 am

    Please someone help me build me a comment page like this one!!!!!!!!!!

  90. jenny on August 23rd, 2012 at 11:43 pm

    very nice list of form styles. form makes the sophistication in your web design imo. Thanks for the list, i could use one of these

  91. chandra on September 4th, 2012 at 8:05 am

    Great list of forms styles.

  92. mahesh on September 13th, 2012 at 3:57 pm

    hi i’m mahesh from india and i am very happy to use w3 school.

    this is very useful for the web developers.

  93. Sagan on October 5th, 2012 at 4:41 pm

    This list is awesome! I really like the Niceforms idea, which will let me keep a consistent look thought my companies pages… Thanks.

  94. Mike on January 8th, 2013 at 12:09 pm

    Stunning collection yar! This design will be helpful for everyone. Thanks

  95. Tom on June 11th, 2013 at 4:20 am

    The latest form plugin/library that i found out is one called customformsjs and it is available to download on bower or on the jquery pluggin repo. It works on all browsers and the author runs unit testing to guarantee that, suports 1.6+ and 2.* variants of jquery, the code is super clean and it is easy to understand what he was trying to do.
    customformsjs.com or on jquery page plugins.jquery.com/customformsjs it seems he has also a trello board which gives great visibility for future releases