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

Product Support

AI-generated summary

In a support discussion titled “Can I put the search form at the top of our 404 page?”, mattdm suggests relocating the search box from the bottom to the top of the 404 page for better usability, noting that users landing there are likely seeking specific content. cocococosti proposes a solution using JavaScript and CSS to inject a wider search form at the top while hiding the original bottom search box, providing sample code and a mockup image. mattdm confirms enthusiasm for the design and later asks for help identifying the correct plugin outlet — which cocococosti clarifies doesn’t exist on the 404 page, recommending pure JS instead. hhlp confirms the solution works on mobile and shares the exact code snippets for both the Body and CSS sections. rmccown reports success but notes JavaScript errors in the console, later resolving them by wrapping the DOM manipulation in a try/catch block rmccown. hhlp confirms no errors on their end. mattdm praises the result and asks the Discourse team why this isn’t the default layout. cocococosti speculates the current placement is an artifact from when Google search was used, agreeing the top position is more intuitive.

1

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.

3

Something like this?

Screen Shot 2021-12-01 at 13.22.18
Screen Shot 2021-12-01 at 13.22.181152×761 71.1 KB

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:

<div class="row">
    <div class="page-not-found-search-top">
      <h2>Search this site</h2>
      <p>
        </p><form action="/search" id="discourse-search">
          <input type="text" name="q" value="">
          <button class="btn btn-primary">Search</button>
        </form>
      <p></p>
    </div>
</div>
4

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

5

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.

6

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:

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    x.item(0).innerHTML += search
</script>

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!

7

Yes, no plugins outlets in 404 Page not found, works like a charm with your instructions

paste this one the BODY tag:

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    x.item(0).innerHTML += search
</script>

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.,

8

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

9

Replying to myself. I wrapped the .innerHTML call in a try/catch block

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    try {
        x.item(0).innerHTML += search
    } catch (error) {
    }
</script>
10

we’re on bussines an no error in our side

Regards.,

11

Thanks @hhlp :slight_smile:

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

15

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.