The Ultimate Webflow Component Library. Buy Forest Today.

Live Search On Webflow Page

The Hideseek plugin is very light and simple to use. It is exactly what can make your page more friendly and help users find faster what they want.

First step is to create our hierarchy/structure in the page. For that we need:

  1. Search bar (input block)
  2. Container to search in

The search bar can be added manually with code in an HTML embed widget, or use a form block and delete all other fields and buttons (leave only one input field). In both cases, add an ID to the search bar.

The container should have a classname or an ID.

<input id="search" placeholder="search for anything" type="text" name="">

2nd step, add the plugin script source (I use CDN, you can download from here and upload to your server) before the </body> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hideseek/0.8.0/jquery.hideseek.min.js"></script>

Last step is to initiate the plugin with some configurations.

The '#search' is the ID of the search bar. This is how the plugin knows that when we type in this specific search bar, it should search the container. The '.wrapping-div' is the classname of the container to search in.

'nodata' is a VERY SIMPLE empty state. Only text, which can be styled by targeting the '.no-results' classname. 'highlight: true' highlights the search term in the results (could also be styled by targeting the '.highlight' classname).

<script>
$(document).ready(function() {
  $('#search').hideseek({
    list: '.wrapping-div',
    nodata: 'Ooops... Nothing here...',
    highlight: true,
  });
})
</script>
This product is not yet available. Join us on twitter for updates.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This product is not yet available. Join us on twitter for updates.