Sometimes the small things really are the best things. These simple icons add a cue to each field so it’s easy to tell at a glance what sort of information is required.Īnd if you’re looking for something a little unique try adding a different iconfont into the mix. With more fields you get more hesitation and users just want to fly through forms without a hitch. I always recommend adding icons into forms, especially for larger designs. With Font Awesome icons and some basic responsive styling this contact form is truly one of a kind. You can also try using a 3rd party framework built over Bootstrap for a more customized design. If you’re running a BS3 layout definitely considering reworking your forms like this.
It uses a few restylings on the input fields and the submit button to create a lovable Bootstrap form that you’d never know was Bootstrap’d. This BS3 form does things right by building on top of the Bootstrap framework. Whenever I see a Bootstrap site with the same generic styles I can only imagine the designer was too lazy to customize or too focused on the experience to care. The default Bootstrap styles are pretty boring and they’ve really been used to death at this point. Plus whenever you select an input field a friendly octopus shows up for a greeting.
But the little animated fishies are a whole other story animating into view from a background image. The entire page background uses a repeating pattern to create the waves of the ocean water. Take a trip into the ocean in this very unique contact form built with an aquatic style. Truly an inspiration for all you material designers out there. It’s also a pretty lightweight form and the material design elements should render the same in all browsers. It runs on Sass and Pug for CSS/HTML preprocessing. If you like the minimalist style of Google’s material UI then check out this material form created by Jon Uhlmann.
#Html form snippit android#
Material design concepts were aimed towards Android apps but rapidly spread onto the web.
#Html form snippit for free#
Plus these are all hosted for free so you can copy and play arouns with the code to your liking.Įveryone knows about Google’s material design language over its rise to fame these past few years. You’ll find many different color schemes, input field styles, typographic styles, and so much more. It’s a collection of 10 form designs with free source code. If you’re stuck for design ideas, this collection might help. But aesthetics are also important since trustworthy designs are always more engaging. It’s crucial to make sure your forms work, so usability is #1. Every website usually needs some type of form, whether it’s a checkout page or a simple contact page.
0 kommentar(er)
