Gravity Forms for Zurb Foundation 5 WordPress Plugin

January 16, 2014 - By 

Zurb Foundation 5 is great theme development framework for professional designers and developers. In fact if you haven’t tried it out yet go take a look at Zurb Foundation.

If like me you have developed your own WordPress theme on Foundation or use a template built on Foundation and you like to make forms easy with Gravity Forms. Then no doubt you have noticed that the default gravity forms don’t look anything like the examples in the Foundation docs.

Also you probably have noticed that form validation looks pretty sad too ):

Default view of form output from Gravity Forms WordPress Plugin

Default view of form output from Gravity Forms WordPress Plugin

“Just change the CSS” I hear you cry.

Well it’s not that simple as anyone who has tried to style the default Gravity Forms fields with Foundation 5 has found out. The HTML structure returned by Gravity Forms just isn’t close to that of Foundation 5, so it’s gotta change.

What the plugin does

My plugin Gravity Forms for Zurb Foundation 5 does the heavy lifting for you, making use of Gravity Forms API to filter the output to the page. Simply activate the plugin and it will take care of the rest, no setup required.

Name and Address fields output from Gravity Forms for Zurb Foundation 5 plugin

Name and Address fields output from Gravity Forms for Zurb Foundation 5 plugin

 

Website field output from Gravity Forms for Zurb Foundation 5 plugin

Website field output from Gravity Forms for Zurb Foundation 5 plugin

 

Example of Gravity Forms for Foundation Plugin validation output

Example of Gravity Forms for Foundation Plugin validation output

What about advanced users?

If as a developer you need some more granular control over the output take a look at these filters:

  • ‘prso_theme_gform_validation_wrapper_class’ – change class for div around field validation message
  • ‘prso_theme_gform_form_confirmation_class’ – change class for div around form confirmation message
  • ‘prso_theme_gform_form_validation_class’ – change class for div around form validation message
  • ‘prso_theme_gforms_address_city_class’ – change class for div around city field
  • ‘prso_theme_gforms_address_state_class’ – change class for div around state field
  • ‘prso_theme_gforms_address_zip_class’ – change class for div around zip field
  • ‘prso_theme_gforms_website_class’ – change class for div around website field
  • ‘prso_theme_gforms_website_placeholder’ – change the placeholder value for website input field
  • ‘prso_theme_gforms_website_field_class’ – change class for website field input
  • ‘prso_theme_gforms_name_class’ – change class for div around name fields
  • ‘prso_theme_gforms_name_field_class’ – change class for name field inputs

Give it a try

You can download Gravity Forms for Zurb Foundation 5 from the WordPress plugin repo here.

Posted In:  Plugins Wordpress

Projects

Categories