How to add a class to the form labels

How To
1

Hi!

I would like to add the . screen-reader-text class to my form labels.
Is there a way to do that?
Thanks in advance !

1 Like
2

Hi,

Interesting subject :slight_smile:

I’ve always wondered how to hide labels but still provide them for people who need them.
I don’t like “placeholder only” so much because if they lack contrast, they are useless, and if they have good contrast, they don’t look nice :wink:

This could be the solution, pretty subtle but not so visible placeholders and useful hidden labels, thanks for the tip!

Maybe people who actually use screen readers could tell us their feeling about this?

3

Not my idea, I got it from here: The CSS class screen-reader-text – Make WordPress Accessible
It’s bad practice for accessibility to hide labels since screenreaders can’t read placeholders (if I’m not mistaking) but design-wise I prefer to only have a well-readable placeholder most of the time.

1 Like
5

@bricksultimate Not very fair to answer with your own paid tutorial…

@joa have a look at this filter if you know PHP: Filter: bricks/element/render_attributes – Bricks Academy

I’ll have a try as soon as I have a little time.

2 Likes
6

Thanks a lot, but I don’t know PHP (yet - I need to learn).
If you ever find a way, thanks in advance for sharing. This is not a critical problem anyway!
Merci :wink:

7

Thanks, just an idea: you shouldn’t keep the doc for your custom elements behind the paywall, as I found it a barrier to buying your product. I always check the doc before buying anything to see if it fits my needs. For example, while I hate the Fluent Forms native “designer”, I would not buy an addon without being able to see what and how it does it. Just a feedback :wink:

8

Hi Joa,

This PHP code seems to work:

add_filter( 'bricks/element/render_attributes', function( $attributes, $key, $settings, $name ) {
    if ( bricks_is_frontend() && $name == "form" && substr( $key, 0, 6 ) === "label-") {
        $attributes[$key]['class'][] = 'screen-reader-text';
    }
    return $attributes;
}, 10, 4 );

(Put this in your child theme’s functions.php or add it with a code snippet plugin.)

@timmse, what about adding an option to do this? I mean maybe not just .screen-reader-text but any class?

1 Like
9

@yankiara You need to seriously have a website/blog where you share all your snippets and findings.

10

Feel free to submit it as an idea to the idea board :slight_smile:
Personally, I think the Form element is sufficient as a “basic” form, but maybe many users see it differently - the Idea Board is always a good indicator.

11

I strongly agree with this suggestion. I was about to post the same suggestion.
Let us have the option to add classes to every form field without using a tricky method.

12

The ideas submitted to the ideas board always lack the luck to get approved. So, I will always post any feature requests here in this forum. So all the users will be able to see and give feedback and discuss.

13

I have another request for the form element.

Please add an option that allows us to make space between fields easier when we want the form fields to be side by side.

When we make two fields on the same row, they stick close to each other with no gap.

14

Hi @joa and all,

Wanted to update my code because render_attributes parameters have changed in v1.5.

But it seems that arial-label have been added to form inputs now.

I guess we can simply hide labels and no longer need to add screen-reader-text… Am I right?

@timmse I can’t find any mention of aria-label in Bricks changelog, when did you add these?
Or were they here from the beginning???