Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

contact form

I'm working on a premium template, and need your ideas to architect the contact form box elements.

I should put a contact form in this box, but haven't any good idea about that. If I add the form in the bottom of the box, it will look long and unfavorable. Have you any idea?

share|improve this question
add comment

3 Answers

up vote 0 down vote accepted

There's a number of ways of doing this, but one that keeps the overall shape/form of your page without adding more pages would be to modify the white area itself as it's own entity separate from the map.

Google+ does this on posts by having a contextual "flip around" icon in the corner, which rotates the post to it's "back" (as if it were paper) to show metrics.

Adding a contact button below the text, you're free to "modify" the text box area in a number of "premium-feeling" ways. Fading into a contact form, flipping 180-degrees, cycling down, or just transitioning in general into the "contact form".

Having a "back" function somewhere once on the "contact" form would "undo" the transition back to the static text.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Just make part of the map as background of the address and contact form blocks. The map will unite the blocks visually and all the blocks will be perceived as a logicaly whole picture.
enter image description here
or

enter image description here

share|improve this answer
add comment

First, if you can make the map expand/collapse, it will give take less space leaving only the notion of the map. In the collapse mode, target only the main location. A user can always expand to see full map.

Second, pick only the most important fields to put in the contact form. We tend to put unnecessary fields such as gender, home telephone (who uses the home phone today ?) etc... .

Third, devote only one line for address (make it big) and animate (as in the live titles of windows 8). Add a button for "full list" which again may expand collapse the list of addresses.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.