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

support
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!

8 Likes