Useful Ideas And Guidelines For Good Web Form Design

The input form is the main element for any website. It represents the conversion point between user and customer or you can say success or failure. That is why designers spend their quality time to these contact forms and put efforts into bringing users to sign-up.

These web forms are part of your web design process. Various techniques and elements can be used in Web forms to turn into successful conversion points. In this article, we’ll present some interesting examples and useful guidelines for Web form design.

One quality that almost always helps is a bit of quirkiness and fun. We also engaged in design and development of  unique web forms that can make the whole process a bit more enjoyable and human.

JARAD JOHNSON 

Jarad Johnson‘s contact form somewhat looks like a post card. The visual appearance of the form makes it stand out from the usual generic forms.

11jarad

RED TIKI 

Red Tiki’s uncommon look represent the company’s brand and identity. From the frame motif to the wooden character, this form looks nice and approachable. Little phrases like “This lovely form” and “We’re always keen to lend an ear” are fantastic ways to make the company more relatable.

3red

 APPLICOM 

Applicom’s form has a clean and professional look. Styling the form like a letter — with a stamp, subtle paper texture, striped edge and handwritten addressee name, it demonstrates a certain level of personality and care.

5applic (1)

SOPHIE HARDACH 

Sophie Hardach‘s form is another example of a post card idea implemented in a contact form. The input fields are a bit clearer than one would think, yet the “Submit”-button is a bit more difficult to find. The form is accessible. Excellent work!

20sophie

TWO PAPERDOLLS 

Two Paperdolls  contact form looks messy. However, the form fits wonderfully to the overall design of the page which is a “We Are Hiring” page for designers with a strong focus on typography.

10twopaper

KONTAIN 

Kontain uses a different kind of a date picker for letting users pick the date for the form. The designers have arranged the dates in four rows rather than displaying them all vertically. A nice idea for reducing the horizontal scrolling for the users.

16-1kontain

WOPATA

Wopata‘s slider for the timeframe in their contact form is much different from the generic sliders, select menus and radio buttons.

17wopata.jpg

IDYLLIC CREATIVE

Idyllic Creative‘s contact form is simple yet beautiful. Another example of a design agency which integrated a character from their work in their contact form.

ae05ee0b01252dfe550f8bca3a3b9ef0

DITIO 

They designed sign up form and a contact form in a hidden sidebar box. Once a trigger button “Inschrijven” is clicked, users can sign-up for their account and even upload a CV.

3ditio.jpg

Conclusion 

The article covers some simple yet best examples that you can use to create web forms for business websites. But to create a unique and innovative web form design you need to spend some extra time on your website or analyzing the other technical approaches that are not hard to implement and will lead you to much higher conversion rates.

USEFUL SOURCES 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s