If you know good examples of nice form design, let me see them. I'm particular interested in 'small' forms in 'cards' or 'panels' (Bootstrap 3). Could be login or update profile information etc.
I'm looking for something clean and visually appealing so both structure and effects.
First off, if it's bootstrap, it's inaccessible crap -- hence the pet name "bootcrap" and the general advice to go find a stick to scrape that off with before you go tracking it all over your website's carpets.
Second, styling inputs is very haphazard cross-browser in implementation, so don't get your heart set on one exact appearance, particularly if you want to have SELECT elements involved.
Third, don't get TOO caught up on appearance as what it looks like is only a small piece of ACTUAL design, no matter how many artsy fartsy types dicking around in Photoshop or Illustrator have deluded themselves into thinking that's all it means.
ACTUAL design must include concepts like specifications, tolerance, accessibility -- just as with other types of design like electrical design, mechanical design, and architectural design. GOOD design must be equal parts art and engineering... sadly far too many people have come to neglect the engineering side of things.
Remember that before you even THINK about styling your form, you should have it's full semantic markup completed FIRST so that it is functional and navigable without CSS, or even style on things like screen readers (software that read the page aloud to you), braille readers, morse puffers, and so forth. That's what HTML is FOR, saying what things are, NOT what they look like...
... and that means a parent fieldset around inputs the user can change the value of. (or subgroups of same). That means ACTUAL labels with a FOR attribute pointing at the input they are... well... FOR. That means a legend or appropriate level heading ((the latter is easier to style, so screw legend)* for fieldsets wrapping multiple inputs of the same name (like a radio button set).
Some things to remember? Placeholder is NOT a label. IF you can't make a form work without scripting FIRST, you probably shouldn't be making a form... and above all remember that you cannot ever trust ANYTHING sent from the client, so treat client side validation as an enhancement not actual functionality and double-check shit server-side.
From there, style it however you like without changing the markup significantly. You can add DIV and SPAN when/if needed since they're semantically neutral, but only when needed... the same should be done with classes -- you already have ID's and parent containers like fieldsets, so only add classes for elements that are not the same as their kin.
There are SO many forms that are very pretty, but are inaccessible rubbish... that's why you also need to be sure you follow things like the WCAG. (Web content accessibility guidelines) That means font sizes in EM across your ENTIRE layout (unless having a image interaction like underneath gilder-levin) -- you declare font size px on body you've gone and screwed it! -- that means LEGIBLE colour contrasts... and that also means avoid fancy webfonts that could compromise legibility thanks to inconsistent rendering across browsers.
Some good links on the topic: https://www.w3.org/WAI/intro/wcag http://baymard.com/blog/false-simplicity 456bereastreet.com/archive/200704/lame_excuses_fo…
Above all remember, functionality and accessibility FIRST. The best design is one that is transparent to the user -- they shouldn't even notice it is there since if they notice it, it probably means you screwed up! WORSE, you might be distracting them from what they visited the site for -- getting to the content or actually filling out your forms!
Christopher
Developing
Are you searching for Bootstrap Snippets? There are a few Sites like http://bootsnipp.com/ or http://bootdey.com/bootstrap-snippets etc.
Otherwise i would just search through Behance or Dribble to find some awesome UI Inspirations.