Responsive Online Forms

What is responsive design?

According to w3schools.com responsive design “ is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen”.

Annie Pilon in her post “What is Responsive Web Design?” explains the problems leading to this solution by giving an example of a traditional “fixed” website. She says “When viewed on a desktop computer, for instance, the website might show three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted…”

So How did responsive design come about ?

It seems that Ethan Marcotte is the one responsible for the term “responsive design” back in 2010. According to upwork “he published an article on A List Apart discussing the rapidly changing environment of devices, browsers, screen sizes, and orientations. Building separate sites for every type of device simply wouldn’t be sustainable. Instead, he proposed an alternative concept: responsive design, which calls for building flexible and fluid layouts that adapt to almost any screen”

What about Responsive form design?

Web forms are an important element in web pages, landing pages and websites. They enable online communication, orders, purchases, support, feedbacks, inquiries, searches and so much more.

Responsivedesign.is show how important forms really are by addressing their readers: “Think of the most common tasks on any of the websites that you use on a day to day basis and it’s clear that Forms are almost as important as the content.
Don’t believe me? Lets look at a few examples.
Google – how many times have you used google today? You know the search field is a form right?
Facebook – Have you posted an update today? That’s a form. Did you login to post the update? That’s a form.
Twitter – Same as Facebook.
As you can see forms are actually something that you use all the time on a website, and you’ll need to use on your site as well.”

Patternfly blog ,which provides guidelines for designers in laying responsive forms say that “ It’s vital that the forms you produce are equally functional across the full range of devices, from smart phones to desktops. Mastering the art of making these types of functionalities small yet user friendly can be a task.”. They also supply examples for responsive forms, where they show a web form design in 3 different screen sizes.

Can you create a responsive form using a form builder?

With web forms becoming such a common, sought after element, and responsive design becoming standard, it is not surprising that some form builders actually provide the capabilities for creating responsive forms. Needless to say, there are many form builder tools and they differ in the features they possess, so it is important to check and compare before starting to use one.

Is FormTitan a responsive form builder?

Yes, it is. The FormTitan platform enables the creation of both responsive landing pages and responsive online forms. When you build a form you have 3 work modes: desktop, tablet and mobile. You start by creating your desktop version. Once it is finished, you can simply move to the “tablet” and “mobile” modes, where all your elements will be laid on a smaller canvas.
What makes FormTitan so special is that the design is completely flexible. You can not only change the entire layout of your form in the tablet and mobile modes (changing the order of fields and where they are placed), but you can actually create a different style altogether (changing colors, backgrounds, fonts, alignments etc).
But not only is the design flexible - so is the content. With formtitan you can hide or show certain elements in the form per device.
Read more about how to create a responsive form