Designing a responsive form, 20 inspirational solutions

With so many new mobile phones, tablets and other devices coming out every day, designers have to be prepared to make common functions easy to do on these devices. The usual approach to this is responsive design. However, what some of us are still trying to figure out is how to use responsive design for things other than viewing.

Forms are one of the most common elements on the Web, without them the conversation is only going one way. Forms are used for purchasing, contact, and so much more. 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.

Today, we’ve found a few responsive web sites that do a great job in keeping their forms both intact and useful not just on desktop, but on mobile too.

 

Theme Foundry

Order — The Theme Foundry

 

Emporium Pies 

Order Yourself a Pie! • Emporium Pies • Fine Pies for Fine Folk

 

Samuel Mealing

Contact Us

 

Awesome NYC

Awesome – Contact

 

Ola Kvernberg

Ola Kvernberg - Contact

 

Symbolset

Symbolset - Turn words into icons using font magic

 

Built Things

Built | A Furniture & Fixtures Shop In Seminole Heights, FL.

 

World Meeting Time

World Meeting Time

 

Oscar

oscar

 

Moving Things

http---wearemovingthings.com-(20131101)

 

Nest

Nest Protect | Nest

 

Yellow Marshmellow

Web Design Telford | Web Design Shropshire | Yellow Marshmallow

 

Kin

http---kinhr.com-support-(20131101)

 

Retr.io

retr.io

 

Svkariburnu

Svkariburnu

 

Kingshill Cars

Kingshill Cars - 01732 871234 - Taxi and Private Car Hire in the Kingshill and Malling area

 

Stuff & Nonsense

Talk to Stuff & Nonsense

 

Humaan

Contact | Humaan – Design, websites and digital solutions for humans

 

Ony 

http---en.ony.ru-contacts (20131101)

 

Cafe Evoke 

Contact • Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City

How do you prefer to design responsive forms? Are there any other elements harder to make responsive? Let us know your thoughts in the comments.

  • Santosh K. Shah

    Nice collection.

  • http://www.jtechcommunications.com/ JTech

    Some of these are nice, but a fair number of them aren’t really responsive, or just the form is responsive, while the page around it doesn’t scale as well. I think that our contact us form on our website is better than most of the forms on here.

  • aufche

    inspiring me.. thanks for collect this

  • http://www.isadoradesign.com/ Isadora Design

    In terms of functionality and responsiveness, I think Emporium Pies nails it.

  • http://chanchalsethi1988.blogspot.in/ Raj Sethi

    it can be possible to make 1:1 ai file from corel draw x5 or x6
    give me suggestion

  • http://efusionworld.com/ Efusionworld

    Wow, Nice collection!! All # 20 responsive forms are very useful to build a responsive web design. My vote is for Samuel Mealing which is better than most of others.
    Thanks for sharing this.