---
title: Add Input Field Type as CSS Class in Gravity Forms
date: 2012-06-08T05:01:20+00:00
modified: 2012-06-08T07:29:33+00:00
image:: https://kaspars.net/wp-content/uploads/2012/06/gravity-forms-semantic-classes.jpg
permalink: https://kaspars.net/blog/gravity-forms-input-field-type-css-class
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
post_tag:
  - How to
  - Snippet
category:
  - WordPress
---

# Add Input Field Type as CSS Class in Gravity Forms

[![Gravity Forms HTML mark-up with input field type CSS classes](https://kaspars.net/wp-content/uploads/2012/06/gravity-forms-semantic-classes.jpg?strip=all&quality=90&resize=500,219 "Gravity Forms HTML mark-up with input field type CSS classes")](https://kaspars.net/wp-content/uploads/2012/06/gravity-forms-semantic-classes.jpg)Gravity Forms HTML mark-up with input field type CSS classes



Ever wanted to style the various type of input fields (file, text, textarea, etc.) differently when using Gravity Forms? Here is a simple a snippet of code to add those classnames to all input field wrappers:

```
add_filter( 'gform_pre_render', 'add_input_type_gravity_forms' );

function add_input_type_gravity_forms( $form ) {
	foreach ( $form['fields'] as $f => $field )
		$form['fields'][$f]['cssClass'] .= 'input-type-' . $field['type'];

	return $form;
}
```

### Hide Upload Fields from iPhone, iPad and Mobile Webkit Users

I use this filter in combination with a few lines of Javascript and jQuery to hide all upload fields from the iOS users.

```
$(document).ready(function() {
	if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/) ) {
		$('.input-type-fileupload').remove();
	}
});
```