Today was essentially my first experience of Gravity Forms, the WordPress forms plugin and it would be fair to say it came with its fair share of use niggles, but nothing that I couldn’t overcome.

Here’s the three things I found that may help users facing the same problems.

Gravity Forms and On Focus

Having no onfocus with Gravity Forms (where you click in a text field and the default is removed) was slightly annoying, but a simple JQuery snippet added to the head of your site template and some CSS will fix this.

Step one is to add the following code to your header area.


<script type="text/javascript">

jQuery(document).ready(function() {

  jQuery.fn.cleardefault = function() {
  return this.focus(function() {
    if( this.value == this.defaultValue ) {
      this.value = "";
    }
  }).blur(function() {
    if( !this.value.length ) {
      this.value = this.defaultValue;
    }
  });
};
jQuery(".focusfix input, .focusfix textarea").cleardefault();

});

</script>

Once this is in place, it’s simply the case of adding ‘focusfix’ as a Gravity Form CSS class on any field you would like to use the onfocus method. As easy as that.

Gravity Forms and Inline CSS

Making your forms look as intended can be a pain, especially if you’re like me and don’t read instructions. Fortunately, a quick Google search and I came across this guide. It helps alot.

Gravity Forms Adding Extra Spacing

The third and final tip is simple to anyone familiar with WordPress and shortcodes, but could leave you scratching your head otherwise. Should your form add additional spacing at the top or bottom, simply wrap the form’s shortcode in raw tags like so:

[raw][gravity_form_shortcode][/raw]

That’s it. Three simple tips that may help other Gravity Forms noobs like myself.