Bad Form

I have been filling out lots of forms lately and keep finding some very bad form UI. There have been some really fantastic, easy to use forms as well. Rest assured, the Internet is improving! (I think)

Much has been written on why good forms work best, how they work, etc. The bottom line is, use of common form UI is extremely useful in filling out forms. In 2016 there are ridiculous amounts of blog posts, UI libraries and frameworks, and research done to determine what is considered best practice. As a developer, even if you cannot change the style, maybe you can change the HTML or visa versa.

Below are several examples of the kind of thing I’ve been finding.

Cramped Labels

bad form - cramped
This happened because the column to the left had a huge textarea element that was cramping these labels. I read this as, “Company Name Company…” then I stopped and just saw a bunch of Company’s, some fields on the right, and no clue what they were even asking for.

Issues

  • The column with these input fields was not wide enough
  • There is no margin-top or margin-bottom set on the input element.

Possible Solutions

  • Add some margin for when the label and input collapse due to the width of the column. margin-bottom: 10px; will work
  • Increase the width to an appropriate size, don’t allow it to collapse beyond a certain point
  • Always test what happens when the window or columns collapse too much

See the Pen Bad Form – Cramped Fields by pdegraw (@pdegraw) on CodePen.dark

Tiny, Cramped Buttons

bad form - tiny cramped buttons
The developer here must have applied some reset or normalize CSS but then didn’t add any UI styling.
Issues

  • They are too small to click on easily
  • They are too close to each other

Possible Solutions

  • Add padding
  • Add some margin to separate the buttons

See the Pen Bad Form – Tiny Buttons by pdegraw (@pdegraw) on CodePen.dark

Poor Layout

bad form - bad ui
After filling out this “Filter By” field, I promptly clicked the “Clear All” button anticipating it was the “Search” or submit button. Instead of submitting the form, I cleared all the form fields. This was pretty annoying. I know the user should be reading the form elements and not just clicking on stuff. However, this could have been prevented.
Issues

  • The search or submit button is an icon only, there is no “button”, difficult to click on while using a mobile device
  • The “x” is right next to the search “button”, also difficult on a mobile device
  • The “Clear All” button is where many search buttons are placed

Possible Solutions

  • Add a submit button
  • Style the “Clear All” button differently, I like using a link for clearing a form
  • Add some margin and padding to the icons in the input

See the Pen Bad Form – Form UI by pdegraw (@pdegraw) on CodePen.dark

Blank themes for WordPress

In my never ending search for a decent blank WordPress theme, I ran across this theme by Digging Into WordPress. BLANK WordPress Theme

As I’ve found, most of the starter themes have too much going on, too many libraries or frameworks pulled in, and then the PHP templates are like three folders deep. While the BLANK theme did not have support for a menu or CSS for image alignment classes (easy enough to add), it was incredibly simple, easy to use, and proved to be a great base to build from.

In a recent Shop Talk Show Rapidfire podcast, Chris Coyier mentioned that he doesn’t use Bootstrap or Foundation, just writes the code himself. It was refreshing to hear others are not using frameworks to build everything.

The result of using the simple BLANK theme, one super fast website! I added enough SASS variables to allow an even better starting point for my next project.

WordPress Edit Widgets Link

Simple to add “Edit Widgets” link for WordPress. Just add this to sidebar.php or similar.

<?php if (is_user_logged_in() ) {
	echo "<a href='../wp-admin/widgets.php'>Edit Widgets</a>";
} ?>

or if you want to use the WordPress Get Site URL

<?php if (is_user_logged_in() ) {
	echo '<a class="edit-widgets-link" href="' . get_site_url() . '/wp-admin/widgets.php">Edit Widgets</a>';
} ?>