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

[mattdm (Matthew Miller)]

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.

[cocococosti (Constanza Abarca)]

Something like this?

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: Adding to plugin-outlets using a theme

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>

[mattdm (Matthew Miller)]

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

[mattdm (Matthew Miller)]

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

[cocococosti (Constanza Abarca)]

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!

[hhlp]

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

[rmccown (Bob McCown)]

This works a treat. Time for me to customize it a bit more.

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

[rmccown (Bob McCown)]

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>

[hhlp]

we’re on bussines an no error in our side

Regards.,

[mattdm (Matthew Miller)]

Thanks @hhlp

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

[cocococosti (Constanza Abarca)]

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.