Webflow has its own built-in site search functionality for sites with CMS plans and above.
However the Webflow search result page doesn't natively display the user's search query on the page, like "Showing search results for <query>".
To do this requires a line or two of JS.
We can access the search query from the site URL with the URLSearchParams
API. See https://flaviocopes.com/urlsearchparams/.
We can then update a specific text element on the page with this string. So for example, if we added a text element to the page header with the ID results
, we could get the search parameter (the "query" part of the URL) and replace the text contents of the text element with this parameter.
const params = new URLSearchParams(window.location.search);
document.querySelector("#results").innerText = params.get("query");
This code should be placed in <script></script>
tags before the close of the </body>
element, so it fires once the relevant text element has been loaded onto the page.