You hardly think about the work that goes into building a form, but if you own a site, service or product, the form is an important tool to have when you are gathering crowd intelligence. Online forms are not really that hard to make, but if you want to build a nice-looking, functional form, yet don’t want to get your hands dirty with the codes, you’ve come to the right post.

Regardless of whether you need forms for feedback, login, payment or for communication purposes, there are plenty of HTML form builders out there that can generate these forms for you in a few simple clicks. They are easy to use, customizable, effective and best of all, they are free. Here are our 5 favorite HTML form builders. Go in with your requirements and leave with the HTML codes to your custom-build forms in no time.

Need inspiration? Check out: Beautiful Examples and Ideas for Login/Registration Forms.

1. JotForm

JotForm comes with a ton of pre-made templates for you to work with. It is a drag-and-drop form builder; just select a tool you require, and drag it onto the building area where you can preview what your form looks like.

You can customize and create your own form or choose a template from one of the many categories. The templates help you start somewhere, giving you ideas to create your own form. However, if you’re satisfied with the template and want no other options, just go ahead and get the HTML code and paste it on your website.

2. pForm

The first step of pForm lets you choose from 25 colour combinations for the design of your form. You could probably find one that suit the colour theme of your website. Step 2 brings you to the builder where you can select what you want to have on your form.

Its user interface is easy to understand; you click on fields you require in your form and drag the fields up and down to arrange them. At the end of the exercise, this tool provides you a compressed file with the HTML codes as well as CSS and JavaScript files; pretty much a complete package for you to install the form on your website.

3. HTMLform

HTMLform guides you through the whole process of creating and installing the form into your website. It also provides you with additional support and other files that will help you install the form to your website successfully.

You navigate the creation process with buttons and side menus. Its user interface is clean and it also has an autosave feature while you create your form. After you are done, provide your email so it can send you two files of your html code, one file is for use on websites whilst the other is used as a plugin for WordPress.

4. Reformed

Reformed comes with instructions you can follow throughout the process of building your form. It provides many options where you can specify what is required in each field.

The way it guides you through its options is by asking you if you need a certain feature. For example to check if you need your visitors to have a proper email address, it will ask ‘Check for Valid Email?’. After you have set everything up, you can test your form or just save the form and get the code. It also has a way of saving a list of forms you have created with them in the past.

5. Accessify

Accessify prides in website accessibility and one of their many tools is their Quick Form Builder. Although it does not have much of a user interface when creating a form, by the end of the third step, you’ll be able to copy the HTML code of the created form and paste it on your website.

You start by determining fields such as Name, Email, Age or any other field of information you need from your visitors. Next, you’ll have to set what each field is to have, such as a password field which replaces letters with asterisks. After you’ve decided on the options you want for your website, it’ll generate the HTML code for you to copy.

More…

Granted that these forms have limited customization features, and you might end up with forms that look similar to what is being used on other sites. If you want to try your hand on building your own forms, check out the following posts we have on hongkiat.com:

• How to Create an Ajax-based HTML5/CSS3 Contact Form
• How to Create a Stacked-Paper Effect Login Form
• How to Create a Stylish Responsive Form with CSS3 and HTML5

Related posts:

1. Creating A Stacked-paper Effect Login Form
2. Login / Registration Form: Ideas and Beautiful Examples
3. How to Create An Ajax-Based HTML5/CSS3 Contact Form
4. Creating Stylish Responsive Form With CSS3 and HTML5

Forms are found everywhere on websites. Facebook, Twitter, Google — just to name a few — require us to log into or register to the site through a form, in fact we also use a form to tweet and updating status in social sites. In short, the form is a very important part to be able to interact to a website.

A web form is built with inputs, in the past, we only have a few option for the input types; such as text, password, radio, checkbox and submit. Now, HTML5 comes with great improvements and introduces many new input types in the spec.

So, in this post we will dig into some of the new interesting pieces from the HTML5 Forms that we think you should try them on; let’s check them out.

Recommended Reading: Creating Stylish Responsive Form With CSS3 and HTML5

Date Picker

The first thing we would like to take a look at is the date picker. Selecting date is a common thing you may find in registration form, particularly in some sites or application like flight and hotel booking.

There are many JavaScript Libraries to create date picker. Now, we can also create one in much easier way with HTML5 input date, as follows;

  <input type="date">  

The date picker in HTML5 basically works very similar to how the JavaScript Libraries did; when we focus on the field a calendar will pop out, and then we can navigate through the months and years to select the date.

However, each browsers that currently support the date input type namely Chrome, Opera, and Safari display this input type a bit differently which potentially lead to inconsistency issue in the user experience, and here is how it looks like;

Some notable differences you can see at a glance from the above screenshot; the Opera used the English three-letter abbreviation for the days name — Sun, Mon, Thu, and so on, while the Chrome used my local language, the Safari — on the other hand — works rather odd, it is not showing a calendar at all.

There are also some new input types to select date or time more specifically; month, week, time, datetime and datetime-local, which we are sure that the keyword itself is quite desctiptive to tell what it does.

  <input type="month">  <input type="week">  <input type="time">  <input type="datetime">  <input type="datetime-local">  

You can view all of them in action from the link below, but make sure you view it in Opera 11 and above, since, at the of the writing, it is the only browser that support all of those input types.

• Datepicker Demo

Color Picker

Color picker is often needed in certain web-based application, such as this CSS3 gradient generator, but all this time web developers also still rely on a JavaScript Library, such as jsColor, to do the job. But now we can create a native-browser color picker with HTML5 color input type;

  <input type="color">  

Once again, the browsers, in this case the Chrome and Opera, render this input type slightly different;

The Opera firstly display the basic color option upon the click as well as the hex format of the current picked color in a dropdown, while the Chrome will directly pop up the color palette in a new window when clicked.

Furthermore, we can also set the default color with the value attribute, as follows;

  <input type="color" value="#ff0000">  

That way, when it is viewed in the unsupported browsers, the input will degrade in a text field and the default value will be visible that can give a sort of hint for users what should be entered in the field.

Display the Color Value

Rather than opening Photoshop just to copy the hex color format, you can actually create a simple tool upon this input type to do the job, since the generated color is already in hexadecimal this would be really easy;

First, we add id colorpicker to the input and we also add an empty div with id hexcolor next to it to contain the value.

  <input type="color" id="colorpicker" name="color" value="#ff0000"> <div id="hexcolor"></div>  

We need the jQuery linked in the head of our document. Then we store the color value and the newly added div in a variable, like so;

  var color 	 = $('#colorpicker').val();  	hexcolor = $('#hexcolor');  

Get the initial value from the #colorpicker;

  hexcolor.html(color);  

…and lastly change the value when the picked color is changed as well;

  $('#colorpicker').on('change', function() {      hexcolor.html(this.value);  });  

That’s it; now let’s view it in action.

• Colorpicker Demo

Range

The range input type allows us to add a slider in the browser for selecting number in a range which we can also find in jQuery UI.

  <input type="range">  

The snippet above is basic the implementation of range input type. We can also change the slider orientation to vertical using CSS, as follows;

  input[type=range] {  	width: 20px;  	height: 200px;  	-webkit-appearance: slider-vertical;  }  

Additionally, we can set the min and max range of the numbers, for instance;

  <input type="range" name="range" min="0" max="225">  

In the snippet below we set the min to zero and 225 for the maximum. When they are not explicitly specified, by default the browser will take 0 for the minimum to 100 for the maximum.

Display the Number

There is one constraint though, the number is invisible, we cannot see the generated number/value from the slider in the browser. To display the number we need to add a bit of JavaScript or jQuery, and here is how we do it;

First we add an empty div next to the input, style the div sufficiently so it looks like a box.

  <input type="range" id="slider" value="10" name="range"> <div id="output"></div>  

Then put the following code which will do the same as the above code in strongcolor picker, except we now get the value from the slider.

  $(function(){  	var val = $('#slider').val();  		output 	= $('#output');    	output.html(val);    	$('#slider').change(function(){  	    output.html(this.value);  	});    });  

Now, you can see the demo. Just a reminder, view the demo in these browsers — Chrome, Opera and Safari, as Firefox and IE do not support the range input type at the moment.

• Range Demo

Final Words

It is clear that HTML5 make our lives a lot easier by introducing many new input types. But as any other HTML5 features, the support is very limited, especially in older browsers, so we should use these new features with cautious, especially the new input types that we’ve discussed in this post; Date, Color and Range.

But ultimately we hope that now you have more insight on HTML5 Forms. Thank you for reading this post, and we hope you enjoyed it.

• Demo
• Download Source

Further Reading

Below are a few useful links for you to dig further into HTML Forms.

• New form features in HTML5 – Opera Dev.
• The Current State of HTML5 Forms – Wufoo
• HTML5 Form Attributes – w3school.org
• When can I use HTML5 forms? – CanIUse.com

Related posts:

1. HTML5 Tutorial: Login Page with HTML5 Forms
2. Useful Calendar & Date Picker Scripts For Web Developers
3. How to Create An Ajax-Based HTML5/CSS3 Contact Form
4. HTML5: How to Use <DETAILS> and <SUMMARY> Tags

Just two weeks after the announcement, Dropbox has fully implemented its integration with Facebook Groups. With this, instead of choosing files from your computer to upload to your Facebook Group, you can select files from your Dropbox account to be shared to your group.

In this article, we’ll be showing you how to start sharing files from Dropbox to members of your Facebook Group.

Recommended Reading: Automate Your Dropbox Files With Actions

Add Dropbox Files to Your Facebook Group

This option is not available on the regular post box when you enter your Facebook. It is an option that is available in Facebook Group only (for now). When you want to add a file to your Facebook Group, you’ll be able to see the ‘Add File’ option. Click it to start sharing your file.

Under ‘From your Dropbox’, click the ‘Choose File’ button. You’ll get a permission request from Dropbox to access some of your Facebook information. Click Allow to continue.

You’ll then be prompted to login to your Dropbox account with your email and password.

After logging in, you can browse through your Dropbox files. Select one file to share on your Facebook Group.

After you hit Select, you will be able to add a message to accompany the file, just like a regular Facebook post.

Your file is now shared on the wall of the Facebook Group. Members can click on the link to download the file to their computer.

When group members click on the shared link, they’ll be taken to a Dropbox webpage where they can download the file. They can preview certain files that the Dropbox website supports (pictures, videos and basic text files) before downloading.

Just like any other post on a group, group members will receive a notification of the wall post. Members of your Facebook Group do not need to have a Dropbox account to download the file.

Note that anyone outside of the Facebook Group can also download this file provided they have the link from your Facebook Group wall.

Privacy of the Dropbox/Facebook User

When you share your Dropbox files on Facebook, Facebook does not have any access to your Dropbox account information or files. When you add a file to the Facebook Group, Facebook only receives the name and size of the file and a download link.

On the other side of the fence, Dropbox only receives your basic information from Facebook to confirm your identity and uses your email address only to identify your Dropbox account.

The members in your Facebook Group also cannot edit or add anything to your Dropbox account. They only can download the one file you have shared. And when you share a file to the group, the link is secured with a Dropbox token, so that even if a person without access to this link guesses the token, they need to identify the file and folder it is in to be able to download any particular file. A simple filename change to the document would render the link unusable.

These privacy measures established between the two services will put your security worries to rest.

Conclusion

Overall, Dropbox’s file-sharing integration within Facebook Groups is of great convenience to many users. Rather than select the many email addresses from your contacts to send them important files, you can just post the link to the file you want to share in the group, and let them download it at their own convenience. To share multiple files, just zip the files before putting the link up in the group.

Related posts:

1. Automate Your Dropbox Files With Actions
2. How to Sync Any Folders Outside /Dropbox [Quicktip]
3. Disabling Activity Posts from Facebook Apps [Quicktip]
4. How to (Automatically) Backup Your Website into Dropbox