acf_form generated class for form name

• Hazard

• June 18, 2015 at 1:06 am

It would be nice for ACF to automatically generate a CSS class with the field name in addition to the other generated classes. Something like “acf-field-name-[name]”. This would make CSS more readable and transferable between similar forms, without having to duplicate effort by adding a custom class into the field itself.

Pretty low priority request here and definitely more of a nice-to-have vs. need-to-have, but it should be easy to implement.

• Jonathan

• June 18, 2015 at 6:53 am

Hi @hazard,

Maybe I’m misunderstanding you but there are field specific classes you can use which are the same whenever. They’re not as human-readable tho as they use the field keys like: acf-field-552bcd23a2381. I think the reason for this is so that even if a user at some point changes the field name in the GUI the CSS will remain as the field key is never changed for a field (Also the reason why it’s recommended to use the field keys for filtering etc.).

• Hazard

• June 18, 2015 at 7:08 am

I see why those are there and it makes sense. But in my case, I have several different field groups with fields that have the same name and I’m styling them all the same way. In this example, they each require a physical address.

If I could write: “.acf-field-name-city” and style all of my “city” fields across all of my forms at once, that would be great. It also makes my CSS much more readable, and applies the style to additional forms I might make in the future.

I realize I could specifically add a class to the field data, but that’s an extra step and I’m duplicating data I’ve already entered.

As for the field name changing: sure it could change, but that also means changing the PHP code supporting it. (I’m asking for the name to be output here, not the label.)

• Jonathan

• June 18, 2015 at 7:16 am

Hi @hazard

You beat me to it 😉 After reading your topic again I realised this was the reason you wanted the field name as a class.

I don’t see why it couldn’t be added and it is probably a pretty simple thing to do. I know you mean the name and not the label but believe me.. people go changing those too afterwards and give me grey hairs in the process.

I’ll make an improvement ticket for this and maybe it’ll turn up in a future update 🙂

• Elliot

• June 19, 2015 at 9:47 am

Hi Guys

Thanks for the feature request.
I’ll have a think about adding this in, however, for now, please use the following code:

<?php 

add_filter('acf/load_field', 'my_load_field');

function my_load_field( $field ) {
	
	// add to class
	$field['wrapper']['class'] .= ' ' . $field['name'];
	
	
	// return
	return $field;
	
}

?>

• Elliot

• June 19, 2015 at 9:49 am

Or consider using the data-name attribute like so:

.acf-field[data-name="my_field_name"] {

}