When you create online forms for your website, it is important that you design them so that they ‘fit’. To do that you need to take several factors into account, including your web design, branding elements, and the overall layout of your website.
While each website is unique and will need to be looked at on a case by case basis, there are a few general ways that you can design online forms that fit most websites much better:
- Keep it clean
If there’s one rule that you need to follow it is to keep the design of your online form clean. The last thing that you want is for it to do is make your website look cluttered once it is published.
To maintain a clean look, try to keep a decent padding of white space between each element in the form – and around the form itself.
- Use a single-column layout that is responsive
Single-column layouts are better than multiple columns and can people are able to fill them out faster. On top of that they work well with responsive designs and look consistent on both desktop and mobile devices.
- Select fonts and colors based on the web design
As far as the fonts and colors in your form go, you can base them on your web design to provide a certain consistency. For the most part you’ll want the typography of labels and descriptive areas to be black, though the font style can be the same as your website content (provided it is legible) – but its size may need to be bigger to stand out.
The ‘clickable’ buttons such as the ‘Submit’ button are where you can add a splash of color based on your brand or web design. Just make sure that it stands out, and that the font color contrasts with it so that it is visible.
- Make sure it is consistent – with one exception
The entirety of your online form’s design should be consistent. That means that all the labels should share the same font and color, as should the hints, errors, and buttons respectively.
The only element that should be different is the submit button. Because of its unique status it should be designed to stand out.
As you can see it is important to be able to customize the design elements of your online forms, and to do that manually you’ll need to edit the CSS code. An easier option is to use a graphical HTML form maker however, and for example you could try using AidaForm Online Form Builder.
Keep in mind that although the methods listed above will work for most websites, there are exceptions to them. If you find that your form design doesn’t fit your website – you may want to look into altering it further if necessary.