As an avid internet user, both mobile and computer, I think it’s safe to safe that filling out forms is one of the worst things ever. As boring and time consuming as they can be, they are undisputedly necessary. Today, we are looking at what should a mobile form look like and how to give it a formal touch.

Let’s think for a second about how many times we use forms for an online interaction. You use them basically anytime you purchase goods, hotel rooms, or movie tickets. Not to mention, companies often use them to bring better service to the customer. So, the question remains: what can we do to make this process better? I’m glad you asked.

Say no to too much info

In terms of a transaction form, one thing that needs to become the norm is putting all the necessary information on one page. Notice that I said “necessary.” Too often, I’ll go online to order something and I’m bombarded with additional advertisements and options that make my eyes water if I stare too long. Listen, I already purchased something from your website. You don’t have to convince me anymore.

First impressions mean the most

I think most people will admit that if the form looks too complex, they won’t finish it. It’s not really anything new. People are going online for their convenience. If you make something too complex, or even just look complex, people will avoid it. I’m certainly guilty of thinking this way. Make forms effective and efficient.

The perfect mobile FORM (ula)

What exactly does a good form comprise of? Believe it or not, there is a basic recipe for a good form. One that doesn’t overwhelm users, and one that gets the job done. Here’s what we’ve got:

• Input fields

Here, you’ll have room for all the required information. Things such as passwords, discount codes, sliders, checkboxes, etc. will all be input in these boxes.

• Field labels

Field labels tell the user what to put into the input fields.

• Structure

You have to have some sort of framework for your fields. Make the order make sense and it’ll be easier to follow along.

• Action button(s)

The page will have to have at least one button that submits all the input info.

• Feedback

After the action button is triggered, the submitter should get a notification that everything went smoothly.

There are many successful form templates out there. Depending on what the form is used for, it will probably look a little different than the last. The key is to make it simple, understandable, and convenient for the user. Remember, people do things online to make it easier for them. A complex form will only scare away potential customers.

We see login forms everywhere on the web these days. Do you use social media networks? Do you send emails? Do you buy things online? All of these processes require a signup form of some kind. The login form design defines the nature of a website, it’s goals and style.
A high-quality website login form usually encourages a user to become a member, subscriber, or a client. Thus, it is critically important to make it look amazing. Crafting a creative and successful login form requires a lot of time and effort from one or more designers. Today, I’ll be showing you a beautiful showcase of creative login form examples that I have collected from websites all over the web.

Mynd – The future of property

Register and Login

Sign Up for form creation

Simple Login Form

Login/Registration form

Sign In & Sign Up Form

Day 001 – Login Form

CubeCMS – sign in screen

Nova Poshta

Hello World Login & Registration Form

Easy Notes Sign Up Form

Deep Sea SignUp

Sign Up

Login form

Sign Up and Login

Sign in / Sign up form

Signup

Sign Up

Login page interaction

Day 001 – Login Form

We think these login form examples are absolutely stunning. Some are very detailed, and some are very minimalistic. No matter what your style is, make sure you’re pleasing your crowd. Think I missed some of the best login examples? Share some of your favorite  examples in the comments below! Til next time, keep on keepin’ on.

On the 5th of November CaptainForm is out of Beta and enters V1.0. The plugin has been improved in response to users’ feedback during Beta, so now it suits their needs and requirements.

CaptainForm V1.0. enables users to use advanced features such as the flexible popup publishing method. The built-in features require no add-ons and 24/7 customer support is included even in the free plan.

Users can create and customize a wide range of forms such as lead generation forms, quizzes, polls, user-submitted WP posts, auto-popup newsletter subscription, payment forms and many more.

V1.0. includes improved features: various notification and confirmation options, user-submitted WordPress posts, smart multisite management, publishing in posts, pages, widgets, theme files and many more. As security is a priority, the free plan also includes SSL encryption and form submissions are saved on additional secure servers.

From now on, there will be one free plan and three paid plans as below:

There is a special 20% launch offer on any paid plan. Users just have to enter the following promo code: webdesignledger20 and they can already start creating and customizing super forms at a lower price!

Even though CaptainForm is out of Beta now, feedback is and will remain important. Thus, listening to what users say and adapting to their needs is an ongoing process. Please share your experience using the plugin in the comments below.

V1.0. launch comes with one more surprise: a white paper with tips and recommendations on some of the most popular forms used for different projects.

Download the plugin, enjoy the offer and take advantage of the white paper!

For any website or blog, the contact form is an element that makes a very powerful statement. Just like a business card, the contact form speaks for itself, as it is the gateway people use for passing their love to you. Best web forms are strong in three parameters: idea, design, usability. Let’s take an expedition to the nicest of the contact forms out there.
The following snapshots are taken from visual art websites and blogs. Dive in!

krijtenberg.nl

No doubt over the professional look of this website. This photography boosts the effect of a simple contact form. It really ties the tie!

m1-design.de

A flash contact form that impressed us. Everything is in dynamic here, kind of hard to catch but surely an eye-catcher.

englishworkshop.eu

Modern graphics and wise choosen colours join in this contact form to create a powerful effect.

beakable.com

Is your posted content fragile? If so, there’s nothing to worry about, the envelope is completely safe, beakable.com has taken care of that.

moozedesign.com

What do reindeers and the colour blue have in common? This contact form right here.

Along with the beautiful design of the contact form itself, proper positioning is also important, so that the other elements on the page contribute to the overall aesthetics. The following blogs have made the best out of the available space, colours and shapes from the general theme.

alexarts.ru

We are in Moscow and everything floats around in the world of Alexey Abramov. The lightbox contact form fits perfectly in.

bio-bak.nl

This flashy website is a show and the contact form makes no exception. You can fill it in as soon as you get used to the big hand that replaced your mouse cursor.

apbaxter.com

Seems like the phone booth is a little crowded right now in here, but you can still leave a message using the contact form. If you dare to.

denisreggie.com

A photographer’s website in contre-jour has its contact form all the same.

fullfatdesigns.co.uk

This contact page also contains information on payment plans, so that the user wastes no time in getting the point.

markjaworskistudios.com

Mark Jaworski is here to help and so is his contact form.

dreamerlines.lv

This contact form is the main element on the homepage of dreamerlines.lv. Crystal clear message.

crayonslife.com

A playful overall theme in which the blog’s contact form is immersed as well.

Sense the elegance of simplicity! A brief contact form is just all you need most of the times, if it hits the right spot. Some of them come in lighboxes, some in plain HTML. Let’s have a look at how wonderful they are.

charliegentle.co.uk

Contrast and a touch of handmade graphics give the unique feel of this contact form.

christianothstudio.com

A telephone is quite a frequent icon for contact forms. This old fashioned phone, however, is no cliche, but an impressive touch.

du-bout-des-yeux.com

Just like that! Simple, clear and effective.

ftdesigner.net

The joy of minimalism. The playfulness of colours when in contrast with a black background makes this contact form a very wise choice for a designer’s website.

fullstopinteractive.com

An out of the box send button and, boom, there we have one impressive feedback form.

yourbeautifulphotography.com

A contact form in high key. The logo balances the page beautifully.

thetoke.com

This one here represents the low key. Straight to the point.

theserved.com

The burst of layered colours is the salt and pepper of this contact form.

amazeelabs.com

Back to basics… but not quite. A beautifully designed contact form in delicate colours.

softicons.com

Pixel art and a contact form make a good team in here.

tympanus.net

Use of colours is very important in a contact form, as it speaks about the brand. The combination of blue shades here is distinctive for tympanus.net.

sushimonstr.com

Last but not least, a wood textured message board that nails it.

When designers first start wireframing and prototyping it often feels weird and out-of-place. I remember my first wireframing session felt like I was faking the whole thing – because in many ways I was. Yet rapidly going through ideas is the best way to achieve success in any creative field. It’s for this reason that I highly recommend designers learn how to wireframe and prototype their mockups before jumping into Photoshop.

In this guide I want to share a few wireframing tips devoted to web forms. These could be contact forms, checkout forms, signup pages, or anything that requires user input. By taking the time to wireframe your ideas they’ll come out cleaner and more apropos to the subject at hand.

Traditional or Digital?

Everyone has their own personal preferences when it comes to web design & development. The process of wireframing is no different and there are two overarching methods: hand-drawn sketches or digital prototypes. Each method has a series of advantages and disadvantages so I recommend trying both to see what suits you best.

Hand-drawn wireframes offer a little more control throughout the process. With just a pencil you can draw anything, as dark or light as you wish, just using common motor skills. People who don’t consider themselves artists may veer away from this method. But in my opinion is offers a more personal connection to the design that a computer just can’t match.

Yet on the other hand, digital prototypes are much more consistent and “by-the-rules”. You can setup absolute pixel boundaries for boxes, add colors digitally, or even add prototyped fonts using a resource like Blokk font.

In the past I’ve covered similar topics on sketching wireframes and the benefit of hand-drawn interfaces. But when you’re working on a time-sensitive project speed and efficiency are more important factors. If you already know what style you like then get ‘framing! If not, I recommend testing both to see what fits you best. You may even like both techniques and try to incorporate hand-drawn styles together with digital prototypes.

Special Form Features

We all know about the most common form elements: text fields and submit buttons. The not-so-common elements are still used frequently but require a little more finesse. I’m talking about radio buttons, checkboxes, and upload fields. Each of these inputs are supported using HTML but require extra attention to detail when styling the form in CSS.

Sometimes it helps to write down a few notes about the form(s) you’re designing. Organize your thoughts from a user’s perspective based on what the user is trying to accomplish and how they’d go about doing so. It’ll help to close the gap between designer and Internet user so you’ll be able to catch common mistakes.

Wireframing and prototyping is usually not the stage where you plan out design features. But if you have some good ideas there’s no reason to ignore a particular color scheme or size relationship to each input field. Just be sure to put a focus on the interface first. This is the most important part of the wireframing stage and requires a majority of your attention.

Balance is crucial and truly defines the composition of every page element. Forms require a consistent level of balance so that users recognize the purpose of each input. Ensure that specialized input fields are seen as such, and that users can extrapolate their purpose based on the context(label text or design qualities).

Define Interactivity

This may seem like an unnecessary step but user experience is the most important part of any web form. You need every form input to be directly usable and easy to interact with. So during the wireframing phase I recommend sketching a few illustrations for how the form should behave.

Notably I recommend organizing each input field with placeholder text or label text. You might also include dynamic effects like tooltip notes whenever the input is selected. These may fly out to the right side, appear underneath the form, or appear in the label text as a hint. Based on the depth of a form you may also want to include the tabindex order.

It’s difficult to put down experiential information into the written word. Experiences are meant to be experienced, and a picture can’t do it justice. But wireframes aren’t meant to be a finished experience. They represent a game plan for you to start building the final product without hesitation. Once you start fleshing out the form into HTML/CSS you might decide to change a few of the UX concepts at the last minute.

But really try to nail down your interactivity as early as possible. Understand how and why you’re driving visitors through the form. What should be their final objective? Which elements are required and which are optional?

Wireframe to Website

Another key point about wireframing input forms is to make sure that they’re buildable. Sometimes as designers we can get carried away with fun ideas that may not be all-too-practical in the real world.

Thankfully advancements in JavaScript and CSS have allowed for an easier time building functionality. But just because more ideas are possible does not mean that every idea is useful to the overall user experience.

During the wireframing stage you should keep yourself grounded at all times. During idea generation and building the final design you want to create something that fits nicely into the layout. It should also be something that a developer can recreate with flexibility and support in almost every major browser.

My advice for generating new ideas would be to analyze what other designers have created. You might even try reverse-engineering a form on another website by turning it into a bare-bones prototype. By studying other forms you’ll learn what works, what doesn’t work, and what seems to fit best into each project.

Final Points

With enough practice you’ll get a lot more comfortable doing wireframes and prototypes for each area of a website. Forms are merely one important(yet significant) item on the list. Personally I prefer doing hand-drawn wireframes because I can get my ideas down a lot quicker. But you really need to find a process that feels comfortable and works best for you. Next time you’re designing a web form try some of these techniques and see if they add value to your natural creative workflow.