296 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
CodeFusion says

I can code the front end with the best of them – designing it is another story …

This is a screenshot of a form inside a modal box. I need to mark browser & HTML5 dependencies on each / most of the fields.

This form itself is cross-browser complaint, but the form output depends on the end-users browser – this is intentional and by design!!

Right now I’m using a background image inside the inputs. If it works on the browser the browsers icon is faded by 40%. If it does not work on a browser, that browsers icon is faded by 90%. If I increase the transparencies / fade any more it’s hard to discern if it’s “supported” or not.

I’ve tried icons in a tooltip (tipsy) but it seems clunky and I didn’t care for it. Because it’s a modal box – space is limited!!

I’m just wondering if anyone has a better way of accomplishing what I’m trying to do.

189 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Sells items exclusively on Envato Market
+5 more
Cubell says

Personally, I would 100% get the icons outside of the inputs, and give them all breathing space (at least 5px-10px in between each one). You essentially have three blocks, 1- Label 2- Input 3- Icons

My first attempt at designing something like this would probably be to put make the label 100% wide, give it some padding and give it a very light grey background color, then put the input and icons block side by side underneath each label. And giving each of these new “big blocks” breathing space in between each other. Don’t worry about it getting to tall, it’s better to be a bit tall than cramped.

You should definitely go on show-and-tell websites, such as dribbble.com and search for different related terms and get some inspiration.

I hope this helps :)

954 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Won a Most Wanted contest
+3 more
aleluja says

^ like he said + I would keep them at the right side for easy eye-scanning. And I would make them at 100% – they are really hard to look at right now.

Or even just push them to the right so they get outside the input if you have enough space – that would be ideal.

296 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
CodeFusion says

Something like this?

189 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Sells items exclusively on Envato Market
+5 more
Cubell says

That is an improvement, but looking at it again, have you considered getting rid of the label completely and using a placeholder instead? I made a very quick mockup of the basic idea of this that may be of help to you, I emailed you the link. Hope it helps!

954 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Won a Most Wanted contest
+3 more
aleluja says

Yeah, it’s much better in terms of usability. And avoid using placeholders, imagine all the data is filled – the user wouldn’t be able to know what was the placeholder. Placeholders are good for small forms (small contact form, search, etc.). And fade the unavailable ones to 10% or 20%, just to avoid having holes.

189 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Sells items exclusively on Envato Market
+5 more
Cubell says

Ah yes Aleluja makes a good point about only using placeholders. I would still do what I sent you in the mockup and simply copy the block with icons and put it above the input (but make it half the height) and put the label in that. So you end up with intuitive blocks with a strong hierarchy. Show us your final design when you finish it!

296 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
CodeFusion says

I can’t use placeholder as half the time the values will be filled in – some of which are “True / False” so would be indiscernible.

So, for the time being, I’ve decided to go back to the Tipsy tooltips as I use Tipsy for a lot of other info as well.

Setting the labels, inputs and “browser support” as block elements was causing the modal to stretch more than 2 screen heights on a 30” monitor @ 1920×1200.

In the future I think I will turn this form into a tabbed panel at which time I will take everyones advise and use blocked elements.

Are the tool tips at least better than the icons inside the inputs?

Thank you everyone for the help.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by