Remove Search Button in Search

Hello,

Is there any way to remove the Search button in the search bar?
I just want the input field, and I want it to search when clicking enter :slight_smile:

Screenshot 2022-10-23 at 20.20.13


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Click the search button and the hide it.

image

Alternately, you can put the whole thing into a pop-up such as an dropdown menu and style it how you like, like this.

image

Does the search on enter still work then?

Hi @zachdhl , no it would not work as button triggers search function. This mean when you hide button there is nothing to trigger search function.

One way is to trigger search is set function invocation on enter key press but it is bad UX as user would not know that they have to press enter key.

Another way is using standard input element and set custom function that will be triggered eg. by onchange or keyup etc. that invoke function each time letter is inserted into input field.

1 Like

Actually @Stan , you might want to check that,

I’m fairly certain that standard behavior is that hitting enter within an INPUT field triggers the form submit automatically, even if there is no submit button at all.

In the HTML5 spec it’s an encouraged feature known as implicit submission.

I’ve used this in Chrome, Firefox and even IE. I don’t think I’ve tested Safari, or mobile devices.

What do you mean by check it? In form hitting enter on input field should not trigger submit unless you programatically set it up this way so. input field is just input element without submit functionality, but I do not use WF forms that may have this functionality already implemented.

EDIT: I see now, Implicit submission if Form contains only one input field. So this mean that to be able apply implicit submit the button should be removed and not only hidden.

It actually doesn’t matter one bit if a button exists or not.

Forms don’t need an <input type="submit"> button in order to submit, it can be done by script, or implicit submission. That’s been around since… 2000 I think. Internet stone-age.

But I actually didn’t know of the one-input limitation, that makes sense.

The main thing is that most browsers support implicit submissio, but the details might vary since it’s just a recommendation and not a formal requirement in the HTML spec.

I meant do a quick mockup and see how it works on your system. On Chrome+Win for me, Webflow’s search field works fine with the search button hidden. I use that configuration a lot in site footers as an added nav element.

I should really validate it in Safari though. Was hoping you might use a Mac and verify it for me.

I have done simple test just with POST redirect to home page and it works in Safari even with button hidden. Hmm :thinking:

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission , and must submit the form element from the form element itself otherwise.
For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, Email, Password, Date, Month, Week, Time, Local Date and Time, Number

If I understand it correctly.

  1. when form has no submit button, implicit submission will be triggered only if one input is present. Pressing enter in this focused input will submit the form.

  2. if there is a submit button, by pressing enter key in focused input field the browser will find and “press” button. (for me confusing part according to only one input rule)

  3. if there is more than one input field implicit submission is disabled

:thinking:

lesson learned :upside_down_face:

1 Like

I’m really glad to hear that Safari supports it- I was unable to find a detail table for implicit submission on CanIUse.

But as you pointed out Yes the spec could definitely be clearer. I think you have interpreted #2 correctly the way they intended it. Similarly, if the submit button exists but is disabled, I think the intended behavior is that the form should not submit, even though that’s not clearly spelled out.

Overall it feels like someone edited it in at the last minute, with an “oh this would be nice…”, and didn’t really think through all the scenarios well.

1 Like