How to make beautiful forms

We spend a lot of time helping our customers build online forms and contract boilerplates to be e-signed. Along the way, we’ve uncovered some useful tips we thought we’d share.

The most challenging issue that people face when laying out a form is dealing with columns. Columns are a great way to use space and visually associate related information in a form for desktops and laptops. They become a real problem for people accessing those same forms from a mobile device. Since there are just as many mobile devices in use as computers these days, you don’t really want to alienate one type of device or the other.

So…

Make your form have two columns for bigger screens and one column for smaller screens.

Inkdit’s site is build on a responsive framework already so all you have to do is take advantage of it. The framework we is based on a twelve column flexible grid called Foundation (see their documentation). Columns can be made span more than one column so that you can have your first name field span six columns and your last name field span the six columns beside it. On phones, those columns get stacked rather than being side by side so the first name field appears on top of the last name field.

Brilliant!

So your contact information section can looks like this on a laptop:

Example of a two column layout on a bigger screen

…and this on mobile device:

Example of a two column layout on a smaller screen

If you are not interested in writing a bunch of HTML code to do this yourself, you can copy and paste the examples below right into the code view when you are editing your forms and boilerplates on Inkdit.

Give it a try! Grab the code for a simple contact form like the one below and paste it into the code view when you are creating your own form on Inkdit.

Contact Info