V4 Elements Search Form Estimated reading: 6 minutes 2 views Add a search box to your site. Show it right in the page, in a small dropdown, or as a full-screen overlay. Turn on live search and visitors see matching posts as they type. No code needed. WIDGET Search Form MODES Inline, Dropdown, Full Screen PLAN Free A QUICK LOOK What You Will Build A search icon that opens a small box. Type a word, and matching posts show up under it while you type. This is the Dropdown mode with live search on. Click the icon, type, and see the results right away BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: Live search looks through your posts. If a post has a featured image, the image shows next to the title in the results. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Search Form is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Search Form under Form Widgets and switch it on. Click Save Settings. The Search Form card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page or your header template in the Elementor Editor and drop the search in. Click the + button at the top left to open the Elements panel. Type Search in the search box. Drag the Search Form with the orange badge onto your page. The Search Form in the Elements panel (click to zoom) Note: A new Search Form shows a plain box and a button. It is the Inline mode. You will style it in Step 5. STEP 3 Choose How It Shows Open the Settings section in the General tab. Choose the Mode: Inline (default), Dropdown or Full Screen. For Dropdown, choose the Dropdown Position: Left (default) or Right. Switch Enable Ajax Live Search on to show results while people type. Switch Enable Search Filter on to add a Date and a Category filter. Use Show Category Filter and Show Date Filter to keep only the one you want. Mode (1), Dropdown Position (2), Ajax Live Search (3), Search Filter (4) and the two filters (5) (click to zoom) Tip: Switch Show Panel In Editor on if you want to see and style the Dropdown or Full Screen box while you edit. Switch it off when you are done. Inline DefaultThe box and the button sit right in your page. Best for a sidebar or a search page. Dropdown Only a search icon shows. A click opens a small box under it. Best for a header. Full Screen A click covers the whole screen with the search box. Best for a bold, simple look. STEP 4 Change the Words and the Button A Search Form is built from small parts. Open the Structure panel to see them. The Search Toggle (1), the Search Panel (2), the box with its input, filters and button (3), and the Search Results (4) (click to zoom) Click Search Input. Change the Placeholder, the gray words inside the box. The default is Search.... Click Search Submit. Choose the button Type: Icon (default) or Text. For text, type the words in Text. Click Date Filter or Category Filter to change their Label. Click Search Toggle to change the open and close icons. Placeholder (1) and Browser Autocomplete (2) (click to zoom) Type (1) and Text (2) (click to zoom) Tip: Browser Autocomplete is off by default. Switch it on if you want the browser to suggest what people searched before. STEP 5 Style It Each part is a box. Click a part in the Structure panel and open the Style tab to change it. Search Input, Date Filter and Category Filter: add Spacing (for example 12 top and bottom, 16 left and right), a Border of 1px with a soft color like #e5e7eb, and a Radius of 12. Search Submit: set a Background such as #f05a35, white text, some Spacing and the same Radius. Search Panel (Dropdown and Full Screen): a white Background, Spacing of 16, a Radius of 16 and a soft shadow in Effects. Search Results: the same white Background, a Radius and a shadow, so the results float nicely under the box. Tip: The pictures below use exactly these values. RESULT Final Result Inline The box and the button right in the page. The Inline mode Dropdown with live search Type design and the matching posts appear under the box. The Dropdown mode with live search and filters Full Screen A click on the icon opens a clean, full-screen box. Press Enter or click the button to search. The Full Screen mode Note: In Full Screen mode, live search results are placed below the bottom of the screen. For live search, choose Inline or Dropdown. SETTINGS Options Mode Default: InlineInline, Dropdown or Full Screen. Dropdown Position Default: LeftLeft or Right. For the Dropdown mode. Enable Ajax Live Search Default: OffShows matching posts while people type. Enable Search Filter Default: OffAdds the Date and Category filters. Show Category Filter Default: OnShows the Category filter when filters are on. Show Date Filter Default: OnShows the Date filter when filters are on. Show Panel In Editor Default: OffShows the Dropdown or Full Screen box in the editor. Placeholder Default: Search…The gray words in the box. Browser Autocomplete Default: OffLets the browser suggest past searches. Button Type Default: IconIcon or Text. Button Text Default: SearchThe words on the button when the type is Text. GOOD TO KNOW More Details Press Enter Pressing Enter in the box searches, like clicking the button. Live search first Live search shows matches fast. The button still takes visitors to the full WordPress search results page. Many search boxes Add one in your header and another in your footer if you like. HELP Troubleshooting I do not see the Search Form in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Search Form. Click Save Settings, then reload the editor. Type Search in the search box and pick the one with the orange badge. I only see a small search icon That is the Dropdown or Full Screen mode. Click the icon to open the box. For a box that always shows, set Mode to Inline. Nothing shows while I type Switch Enable Ajax Live Search on. Then test it on your live page. The results list has no pictures The results use the featured image of each post. Add a featured image to your posts. I do not see the Date and Category filters Switch Enable Search Filter on. Then check that Show Category Filter and Show Date Filter are on. The Dropdown or Full Screen box is not in the editor Switch Show Panel In Editor on in Settings. You Did It Your page now has a search that is quick and easy to use. If you face any problem, please contact our support team. We are happy to help.
