You are here

Boring Forms Are Boring

Submitted by Kate on December 28, 2010 - 2:35pm

Everyone is used to the standard sign-up form; they usually look a bit like this:

Email Address:

What is the problem with that? Nothing really, but it is boring. The whole point of a form is to draw people's attention, so even the small details should be special. Having a form on a pop-up, a slide-in, or even a block is a great way to get noticed and attract followers, donors, and subscribers, and making your form look clean and professional will complete the effect.

Now for the fun part. This is such a simple trick, and it will work with any type of text field you have, whether it is a search bar or a newsletter sign-up. Here's what it looks like:

  1. <script type="text/javascript">
  2.    function myFocus(element) {
  3.      if (element.value == element.defaultValue) {
  4.        element.value = '';
  5.      }
  6.    }
  7.    function myBlur(element) {
  8.      if (element.value == '') {
  9.        element.value = element.defaultValue;
  10.      }
  11.    }
  12.   </script>

You might not see anything special about this, but that field is more compact and modern, and it still provides the necessary information. Also important: if the field is empty and they click somewhere else or move to another field, the helper text returns. Try it out for yourself; add a nice background color to your fields, make a professional-looking block to contain your form, use this little trick, and voila! You will have a modern form that is simple to understand and fill out. Here is an image of what we created for utahwilderness.org, check out their website to see it in action!

If you are collecting information from your forms, such as a mailing list or petition, do not forget to link your form to your CRM. If you get stuck, give us a call or send us an email! We're always happy to help, even with little tasks like getting a form up and running. We know it makes a big difference to your organization to have everything working together flawlessly, and we have the experience and knowledge to make it happen.

You will need to add the following javascript above your form:

  1.   <script type="text/javascript">
  2.    function myFocus(element) {
  3.      if (element.value == element.defaultValue) {
  4.        element.value = '';
  5.      }
  6.    }
  7.    function myBlur(element) {
  8.      if (element.value == '') {
  9.        element.value = element.defaultValue;
  10.      }
  11.    }
  12.   </script>

Then, in the HTML of each field, just after you define the value parameter, add the following code:

 onfocus="myFocus(this);" onblur="myBlur(this);"

Let us know if you are able to successfully use this tip. And, as always, give us a holler if you need any help!