There is enough information about the creation of usable and semantically correct web forms. But most of developers don’t pay much attention to that. It may be connected with absence of a certain plan of how to build an excellent web form or another element of the web site. Here are some basic rules that must be obeyed while creating a web form.
Your web form will work without labels very well, but it is very useful to use them and every professional web developer knows it. Labels tell what the input box is for and in
2. Markup your labels
You don’t need to build a table to make all input boxes lay in one line. All you need is just specify width, align by the left side of the window, and align text by the right.Here is what you need to write:
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
3. Change styling of web form very carefully
Usually web forms have very similar style and users got accustomed to it. That is why when you are planning to give your web form a new unique design, make sure that you there is a good reason for that. If you still want to do that, here is the example of how CSS Reset technique may change the appearance of your web form:
border: none;
}
4. Highlight active field
It is very helpful for user when the field he is filling out is highlighted. :focus pseudo class will do it for you. If you want the border color to change when the field is active, you should write:
border: 2px solid #900;
}
5. Add hints to the fields
Sometimes it is not quite clear for users what to write in a certain field and there may be some misunderstanding. So it is very useful to pre fill the input fields with the text that tells what the user should type in here. It is especially convenient for text fields like comments or ‘other information’ field where you can make a hint what exactly the user should write there. Also it is better to make this hint disappear when the user starts to type in – JavaScript will help us to do that.
6. Make it work with Web Form Factory
We have discussed the layout of web forms but their main purpose is to functionalise correctly. When you have written the code of the web form, you now need to know PHP or you will have to send web form to developer to write a back end code and tie the form to a database. But Web Form Factory can do it all for you and generate the code that you need.
7. Online web form generator
It is great if you are a professional web developer and you have enough programming skills to build a valid and fully functional web form just in a few minutes. But if you are not, don’t regret, nowadays there are lots of programs that will do all the coding job for you. One of the best web form generators is PHPForms. It is a professional and easy-to-use program that will help you to create your personalized form in a few clicks. All you need to do – is drag and drop form elements to blank form or template and customize them according to your requirements. You can make the following forms: online surveys, questionnaires, contact, application, registration and file upload forms and much more.