The current design prioritizes popular topics, which by their nature tend to be general. Someone hitting a 404 is likely to instead be looking for something specific. Short of magically guessing what that was, it seems like prominently providing a search box would be ideal. I know it’s there at the bottom, but… that’s kind of hard to find.) Is there an easy way to rearrange this? And while we’re at it, something that stretches across the page rather than the current tiny box at the bottom. It might also be nice to pre-fill the search with something constructed from the provided not-found URL. But I haven’t thought through the full implications of that.

Seems like there are no plugin outlets in the 404 page, and according to How to add custom JS code to the 404 pages? you have to use pure JS. Try adding something like this to the Body tab, in a theme component: var x = document.getElementsByClassName("page-not-found"); var search = ' Search this site Search ' x.item(0).innerHTML += search You may need to do some adjustments with CSS, try: .page-not-found-search { display: none; } .page-not-found-search-top button { margin-left: 10px; } .page-not-found-search-top input { width: 600px; } Hope this helps!

Something like this? [Screen Shot 2021-12-01 at 13.22.18] I think it should be possible by hiding the page-not-found-search component at the bottom with a display: none and then inserting the code for the search box at the top using plugin outlets: Using Plugin Outlet Connectors from a Theme or Plugin You could also add some CSS to modify the textarea width. Note I haven’t really tested any of this, I just tried it directly in the browser console. This is the code for the search box: Search this site Search

Very much like that, yes, thanks! I’ll try it out later today.

Can you help me figure out what the proper outlet should be here? I’ve used the concept before to add some explanatory text to the Badges page, but (deprecated) Plugin outlet locations theme component does not seem to work on the 404 page and I can’t figure out what to put in the script wrapper.

Yes, no plugins outlets in 404 Page not found, works like a charm with your instructions paste this one the BODY tag: var x = document.getElementsByClassName("page-not-found"); var search = ' Search this site Search ' x.item(0).innerHTML += search and paste these in CSS part: .page-not-found-search { display: none; } .page-not-found-search-top button { margin-left: 10px; } .page-not-found-search-top input { width: 600px; } works in a mobile too… and thx for your reply Regards.,

This works a treat. Time for me to customize it a bit more. :+1: Edit: This has caused errors to be thrown into my error log. TypeError: null is not an object (evaluating 'x.item(0).innerHTML') Url: https://mysite.com/theme-javascripts/33ba1ce8896576423974ff03c875fe32931690cc.js?__ws=mysite.com Line: 2

Replying to myself. I wrapped the .innerHTML call in a try/catch block var x = document.getElementsByClassName("page-not-found"); var search = ' Search this site Search ' try { x.item(0).innerHTML += search } catch (error) { }

we’re on bussines an no error in our side Regards.,

Thanks @hhlp :slight_smile: And it looks great! Discourse team, any reason this isn’t the default?

By looking at olds commit, the position of the search bar seems to be something that just happened? Inherited from where the google search used to be, which was added with the initial release of Discourse. I agree it looks better at the top.

Can I put the search form at the top of our 404 page?

Product Support

mattdm (Matthew Miller) December 3, 2021, 12:10am 11

Thanks @hhlp

And it looks great! Discourse team, any reason this isn’t the default?

Topic		Replies	Views
Design suggestion — make search at the top of 404 the default Feature	0	415	January 1, 2022
Search box in custom (404) page Development	12	2204	April 7, 2018
Custom text at top of search results page Product Support search	4	1083	July 16, 2021
New 404 page search input placeholder is hardcoded UX	1	132	September 30, 2025
DuckDuckGo Search Suggestions Theme component	15	3498	March 10, 2025

Can I put the search form at the top of our 404 page?

Related topics