7 Great Tools to Help You Build Your Own HTML5 Forms
Forms can be one of the most complex aspects of your front-end development work. They’re far more complicated than most of the items that you’ll work with from both an HTML and CSS perspective.
If you’ve been frustrated with forms in the past, don’t worry, there is hope! Today we’re going to go over some tools and frameworks that help you get the job done without the headaches.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Two Ways to Skin This Cat
We’ll be taking a look at two different types of tools today that can potentially help you build amazing forms: frameworks and web apps.
Frameworks represent the DIY route, they give you pre-built styling and functionality while still allowing for the type of free reign that only coding by hand can offer. The level of knowledge and talent here is still fairly high, but the payoff is that you won’t pay a cent and you’ll retain complete freedom to do what you want.
In contrast, form builder apps represent an automated solution. These are often powered by WYSIWYG design systems that prevent you from having to write a single character of code. Further, they’re usually bundled up with a service that accepts and catalogs form submissions, which is a huge perk. The downside is that they’re not always free and that your customization options are more limited than if you were coding by hand.
Let’s take a look at a few of the most popular and effective versions of both types of form tools.
Frameworks
First up is the framework route. All of these are names that you’ll recognize, but have you ever taken a look at their form features? They tend to be quite extensive and helpful.
Bootstrap
Twitter Bootstrap has become a hugely popular toolkit and starting point for developers. It gives you a rock solid base to work from and can shave hours and hours off the front end of your workflow.
The form styling in Bootstrap is amazingly extensive. You can put your form labels on the top or the side, your fields can be squared or rounded, add checkboxes and select menus; all of this and more in a variety of different styles to choose from.
As with everything in Bootstrap, pulling this off is as easy as outlining some basic HTML with a few carefully placed classes. The documentation is quite thorough, but here’s an example to give you a taste of how building forms with Bootstrap works.
<form>
<fieldset>
<legend>Legend</legend>
<label>Label Text</label>
<input type="text" placeholder="Placeholder text here">
<span class="help-block">Some text under the form.</span>
<label class="checkbox">
<input type="checkbox"> Check me!
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
Pretty simple! Keep in mind that all of these items will come out pre-styled, meaning we don’t have to now go in and fiddle with a bunch of CSS. They look great right out of the box!
Again, there’s enough features here that you’ll be able to build any kind of form that you want with very little effort. There’s even a neat autocomplete JavaScript library included called “typeahead”.
Now, let’s say that you don’t want to use Bootstrap to build your site, but would still like to take advantage of these awesome for features, is that possible? You bet. Simply head over to the Customized download builder and uncheck everything except the forms module. This will trim your download to only the elements necessary for form creation.
Foundation
Foundation by Zurb also has a ton of great form features. You can build some really advanced forms using very similar techniques to what we just saw in Bootstrap.
The code for implementing forms in Foundation should look fairly similar to what we saw before. We’re really just using the basic elements afforded to us by HTML5 itself with a few special class names:
<form>
<label>This is a label.</label>
<input type="text" placeholder="Standard Input" />
<label>Address</label>
<input type="text" class="twelve" placeholder="Street" />
<div class="row">
<div class="six columns">
<input type="text" placeholder="City" />
</div>
<div class="three columns">
<input type="text" placeholder="State" />
</div>
<div class="three columns">
<input type="text" placeholder="ZIP" />
</div>
</div>
<textarea placeholder="Message"></textarea>
</form>
As you can see, with either Bootstrap or Foundation, there’s not a whole lot to learn beyond which HTML elements to use and where. The included CSS file will do all the work of hijacking these elements and making them look pretty.
Foundation’s form support isn’t quite as in-depth and extensive as that of Bootstrap, but remember that this could be a good thing. If you’re building simple forms, you don’t always need the fluff.
One thing that Foundation does have that’s pretty cool is a JavaScript that allows you to implement your own custom form elements. For instance, if you want to create a custom checkbox design, Foundation makes it as easy as a few classes and a tiny JavaScript snippet.
52 Framework
52 Framework was one of the very first HTML5 frameworks to hit the web. I’m not sure how actively developed it is these days, but it does indeed have some basic form features included.
You can see a demo page here and a video guide walking you through the functionality here.
Ultimately, I think you’re much better off with either Basecamp or Foundation, which are much more impressive, thorough and up to date. However, if you’ve used 52 Framework in the past and are already comfortable with it, then you might want to look into the form features.
Formalize
Formalize is a CSS framework aimed at making form styling consistent across all major browsers. You pair it up with your favorite JavaScript library and it does all of the heavy lifting for you.
Formalize was created by Nathan Smith, who also created 960 Grid System. Obviously, since this is the case, you know that Formalize is top-notch and helps the most browsers possible support the latest HTML5 form features.
Formee
Formee is another great framework solely dedicated to helping you build perfect forms.
Formee has three main goals. The first goal is to make layout easier. Formee is built on the ideas from 960.gs and allows you to use similar conventions to lay out your forms. The second goal is cross-browser compatibility. Formee normalizes the appearance of your forms across all major browsers. The third goal is to make the forms look awesome. Attractive default styling is applied and can be fully customized to suit your needs.
Form Builders
Now that we’ve seen some of the best form frameworks around, let’s move onto a couple of really stellar form builders and services.
Wufoo
If you’re talking about form builders, you simply can’t fail to bring up Wufoo, which is by far one of the best options in this space.
Wufoo makes it unbelievably easy to create web forms of all kinds, whether you know a bit of code or not. All you have to do is drag out the pre-formatted, pre-coded form elements onto your canvas, where you can modify and arrange them with drag and drop ease.
I really can’t say enough about how great Wufoo is as both a builder and a general web form management service. Even if you’re fine with styling forms by hand there’s all the backend developer stuff that gets really complicated really quick. Emails, notifications, payment acceptance, analytics, file uploading, if you don’t know what you’re doing, this stuff can be a nightmare. Wufoo handles all of it for you. In place of headaches, you get a streamlined service and a nice dashboard to manage all your forms.
Wufoo has a nice little free account to get you started, and if your needs are basic that might be all you ever need. When you’re ready for the big leagues though, you’re looking at anywhere between $15 and $200 a month.
JotForm
If you’re looking for a good Wufoo alternative, check out JotForm. This awesome service has been around for a long time, I personally used it for years before I ever heard about Wufoo.
For the most part, JotForms features are comparable to Wufoo. The form builder and reporting features aren’t as nice as Wufoo’s, but they’re still perfectly functional and so easy to use that anyone can build great forms with them.
Like Wufoo, JotForm can handle all of your complicated needs such as payment via PayPal or stripe, CAPTCHAs, auto-complete and more.
One thing that JotForm really has going for it is a great price structure. They give all users unlimited forms with unlimited fields, then scale up the cost based on how many submissions you receive, storage you need, etc. The premium plan is a mere $9.95 per month and the professional plan is only $49.95, which could potentially save you a fortune if you’re looking at the $200/month Wufoo plan.
What Do You Use?
Form building, styling and reporting has a tendency to push seemingly basic web design projects into high level development territory. Don’t worry, you’re not alone in being confused about this stuff, which is why there are so many great tools like the ones above to help you along.
Leave a comment below and tell us what you think of these options and which method or service you use for forms.