CopyDesign logoSearch
FreebiesNewButtonsCTA BannersPopupsSectionsFormsTrustUtilityPromo GamesMenus
Account
HomeFreebiesAccountSearchOther

Get the whole library for only $1

New designs coming every week

Join now for $1/month

Designs

  • Freebies
  • Buttons
  • CTA Banners
  • Popups
  • Sections
  • Forms
  • Trust
  • Utility
  • Promo Games
  • Menus

Site

  • Home
  • Pricing
  • Extension
  • Demo sites
  • Stats
  • Contact
  • Request a design
  • Sign up
  • Log in
  • Terms
  • Privacy
  • TrustMRR

Built by MojoSons Media

CopyDesign logoSearch
FreebiesFreeNewButtonsCTA BannersPopupsSectionsFormsTrustUtilityPromo GamesMenus
Sign upLog in
Members: 3$1/mo forever
HomeFreebies$1Join

On this page

  • Demo
  • What it does
  • How it works
  • What you can customize
Utility/Search Bar

Search Bar

A search bar with an optional placeholder sentence, a red search button and suggestions if you want them, ready for a hero (the big top section of a page), a header or a bottom panel on phones.

Copy it from here and your AI rebuilds it inside your own site, in your colors.

What it does

A search bar is the box visitors type into when they'd rather ask than browse. This one can show a placeholder sentence, the gray example text sitting inside the empty field so people see what kind of request to type, or no placeholder at all.

Grab the prompt (the ready-made instructions under the demo) and your AI rebuilds the bar inside your project, in your colors.

  • Three places to put it: a hero with a heading, a header bar, or a panel that slides up from the bottom on phones.
  • Autocomplete, meaning suggestions that appear under the field while you type, is optional.
  • Popular searches and recent searches can show under the field too.
  • Results open on their own page or filter the list right there, live. It's up to you.

How it works

  1. 01

    Tick where the bar lives, a hero, a header bar, a bottom panel on phones, or any mix.

  2. 02

    Type your own placeholder sentence, or leave it empty.

  3. 03

    Pick the button style, text only or text with a search icon, in your site's own action color.

  4. 04

    Choose what a search does, open a results page or filter the list on the page live.

  5. 05

    Turn suggestions on if you want them, autocomplete alone or with your popular searches.

  6. 06

    Decide if recent searches show under the field.

  7. 07

    Copy the prompt with the button under the demo.

  8. 08

    Paste it into Gemini, Grok or any other AI you use.

  9. 09

    Answer its questions. It will ask you which pages the search covers and where your results page lives.

  10. 10

    Type a few real searches on your phone before you ship it.

What you can customize

  • Placement: tick any mix of hero, header bar and bottom panel on phones. In a hero it sits right under the headline of the hero section design.
  • Placeholder: the example sentence in the empty field. Leave it empty and the field stays empty.
  • Button style: text only, or text with a search icon, always in your site's main action color.
  • Results: a results page, or the list on the page filtering itself as people type. Live filtering suits a long FAQ accordion or a product list.
  • Suggestions: off, autocomplete from your own content, or autocomplete plus your most popular searches.
  • Recent searches: the visitor's last 5 searches under the field, on or off.
  • Colors, fonts and corners always come from your own site, so it looks like it was there all along.

You'll also like

Scratch Card

A canvas scratch-to-reveal card. The prize underneath comes from your weighted config, decided before the first scratch.

Numbered Steps Section

Your process as a row of cards with giant accent numbers. An ordered list, so the sequence is real markup.

Video Lightbox Popup

A thumbnail with a play button that opens the video in a centered overlay. No autoplay anywhere.

10% OFF

Try it: scratch with your mouse or finger. Reveals at 50%.

How it works

Step 01

1

Step 02

2

Step 03

3

Get started