Add Input Field Type as CSS Class in Gravity Forms

Gravity Forms HTML mark-up with input field type CSS classes

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();
	}
});

3 Comments

  1. Eddie H says:

    I have a gravity forms field (Quantity: Field ID 33) that I want to hide from the viewer using CSS. Could you show me what I have to post in my wordpress quick CSS field and in the CSS Class Name to achieve this? Thank yoU!

  2. Mike says:

    Thank you Kaspars, this is very helpful. I’m surprised this isn’t default functionality in Gravity Forms.

Leave a Reply