Add label to Webflow's 'Search' Component

I dragged and dropped Webflow’s ‘Search’ component, but how do I create a custom HTML label for it. I want to do something like “form id=” , “input type=” , etc. Below is a picture of Webflow’s 'Search", and I’d like it to stay exactly the same.

I dropped the ‘Embed’ component to create custom labels for my contact for labels, and want to do the same for the Search box. I’d like it to pass the WAVE accessibility tool. Thank you.
search

1 Like

Hi

If I understand what you are looking for: select the form on your canvas then go to the element setting, there you can add the place holder. see the loom below

https://www.loom.com/share/9955d38f322a4711be986d25f90c7182

Hello. Thanks for the reply and video, but no, that’s not what I’m trying to accomplish. I attached a screenshot below.

I need this too… @strudel Did you find the answer?

I tried “Add attribute” but it’s a reserved name.

Anyone figure this out yet? If you can’t add a label to a search form then how can we make these follow the accessibility guidelines?

1 Like

I need this as well - it’s an issue with accessibility (at least with the accessibility checkers like WAVE).

1 Like

It has been a while since the original question was posted, but for what it’s worth, I discovered a workaround for the ‘Search’ component accessibility issue by foregoing the search component altogether. Alternatively, I used Webflow’s native ‘Form Block’ component. Simply drag the ‘Form Block’ component into the same position that the former search component occupied, this will provide you with two fields (‘Name’ and ‘Email Address’) and a submit button. I promptly deleted the ‘Email Address’ field (and label) leaving the ‘Name’ field (and label) and the submit button. I first changed the text in the former ‘Name’ label from ‘Name’ to ‘Search…’(or whatever you want). Next I selected the former ‘Name’ field and changed the ID from ‘name’ to ‘query’ and under ‘Input Settings’ I changed the “Name” value from ‘name’ to ‘query’ and set the “Placeholder” value to ‘Search…’(or whatever you want). Finally, in the navigator, I selected the new form’s parent ‘Form Block’ and under “Form Settings” (Under the Element Settings tab) I changed the “Form Name” from ‘Email Form’ to ‘Search Form’(or whatever you want) and for the “Action” value, I entered ‘/search’. I tested the published site and the new search form worked as expected yielding the “Search Results” page. I also tested the site in the WAVE accessibility tool without error. Cheers!

1 Like