{"id":20304,"date":"2026-10-15T11:35:25","date_gmt":"2026-10-15T11:35:25","guid":{"rendered":"https:\/\/animation-addons.com\/?post_type=docs&p=20304"},"modified":"2026-10-15T11:35:28","modified_gmt":"2026-10-15T11:35:28","slug":"search-form","status":"publish","type":"docs","link":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/","title":{"rendered":"Search Form"},"content":{"rendered":"\n<style>\nhtml{scroll-behavior:smooth;scroll-padding-top:110px}\n.aa-card>.wp-block-group__inner-container>*,.aa-mini>.wp-block-group__inner-container>*,.aa-callout>.wp-block-group__inner-container>*,.aa-row>.wp-block-group__inner-container>*,.aa-final>.wp-block-group__inner-container>*{margin-top:0!important;margin-bottom:0!important}\n.aa-card>.wp-block-group__inner-container>*+*{margin-top:18px!important}\n.aa-row>.wp-block-group__inner-container>*+*{margin-top:8px!important}\n.aa-mini>.wp-block-group__inner-container>*+*{margin-top:2px!important}\n.aa-final>.wp-block-group__inner-container>*+*{margin-top:10px!important}\n.aa-card p,.aa-row p,.aa-callout p,.aa-final p{line-height:1.65}\n.aa-mini p{line-height:1.35}\n.aa-card figure,.aa-row figure{margin:0}\n.aa-mini{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}\n.aa-mini:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.08);border-color:#f05a35!important}\n.aa-row{transition:background .2s ease;border-radius:10px}\n.aa-row:hover{background:#fafbfc}\n.aa-steps{list-style:none!important;margin:0!important;padding:0!important;counter-reset:aa}\n.aa-steps li{counter-increment:aa;position:relative;padding:3px 0 3px 46px!important;margin:0 0 14px!important;min-height:32px;line-height:1.6}\n.aa-steps li:last-child{margin-bottom:0!important}\n.aa-steps li::before{content:counter(aa);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#fff1ec;color:#f05a35;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}\n.aa-pill{display:inline-block;font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:999px;background:#f1f5f9;color:#475569;margin-right:6px;vertical-align:1px}\n.wp-block-details.aa-acc{border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin:0;overflow:hidden;transition:box-shadow .2s ease}\n.wp-block-details.aa-acc+.wp-block-details.aa-acc{margin-top:12px}\n.wp-block-details.aa-acc:hover{box-shadow:0 6px 18px rgba(15,23,42,.06)}\n.wp-block-details.aa-acc summary{cursor:pointer;font-weight:600;padding:14px 20px;line-height:1.5;list-style:none;display:flex;justify-content:space-between;align-items:center}\n.wp-block-details.aa-acc summary::-webkit-details-marker{display:none}\n.wp-block-details.aa-acc summary::after{content:\"+\";font-size:22px;line-height:1;color:#f05a35;transition:transform .2s ease}\n.wp-block-details.aa-acc[open] summary::after{transform:rotate(45deg)}\n.wp-block-details.aa-acc[open] summary{background:#fff7f4;border-bottom:1px solid #fde1d8}\n.wp-block-details.aa-acc>*:not(summary){margin:0!important;padding:16px 20px}\n.wp-block-details.aa-acc table{margin:0}\n@media(max-width:600px){.aa-card{padding:20px!important}}\n.aa-card>.wp-block-group__inner-container,.aa-mini>.wp-block-group__inner-container,.aa-callout>.wp-block-group__inner-container,.aa-row>.wp-block-group__inner-container,.aa-rows>.wp-block-group__inner-container,.aa-final>.wp-block-group__inner-container{padding:0!important}\n<\/style>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;margin-top:0;margin-bottom:24px;font-size:18px;line-height:1.65\">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.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-a3754bcf wp-block-group-is-layout-grid\" style=\"margin-top:0;margin-bottom:16px\">\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">WIDGET<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Search Form<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">MODES<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Inline, Dropdown, Full Screen<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">PLAN<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Free<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">A QUICK LOOK<\/p>\n\n\n\n<h2 id=\"what-you-will-build\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">What You Will Build<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">A search icon that opens a small box. Type a word, and matching posts show up under it while you type. This is the <strong>Dropdown<\/strong> mode with <strong>live search<\/strong> on.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc90665&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc90665\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img fetchpriority=\"high\" decoding=\"async\" width=\"760\" height=\"358\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-06-dropdown.gif\" alt=\"Search Form dropdown with live results\" class=\"has-border-color wp-image-20302\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Click the icon, type, and see the results right away<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">BEFORE YOU START<\/p>\n\n\n\n<h2 id=\"requirement\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Requirement<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-a3754bcf wp-block-group-is-layout-grid\" style=\"margin-top:0;margin-bottom:16px\">\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">ELEMENTOR<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">V4 Atomic<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">ANIMATION ADDONS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Free<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Install and activate Animation Addons first. That is all you need.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#bfdbfe;border-width:1px;border-radius:12px;background-color:#eff6ff;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> Live search looks through your <strong>posts<\/strong>. If a post has a featured image, the image shows next to the title in the results.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#bfdbfe;border-width:1px;border-radius:12px;background-color:#eff6ff;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> In the screenshots, the <strong>orange boxes<\/strong> and numbers show you exactly where to click.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 1<\/p>\n\n\n\n<h2 id=\"enable-the-widget\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Turn On the Widget<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Good news: the Search Form is already on. If you ever need to turn it on again, it only takes a moment.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>In your WordPress Dashboard, go to <strong>Animation Addon > Widgets<\/strong>.<\/li>\n\n\n\n<li>Open the <strong>Elementor V4 (Atomic)<\/strong> tab.<\/li>\n\n\n\n<li>Find <strong>Search Form<\/strong> under <strong>Form Widgets<\/strong> and switch it on.<\/li>\n\n\n\n<li>Click <strong>Save Settings<\/strong>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc911ae&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc911ae\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img decoding=\"async\" width=\"1210\" height=\"215\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-00-enable-widget.webp\" alt=\"Enable the Search Form widget\" class=\"has-border-color wp-image-20294\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-00-enable-widget.webp 1210w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-00-enable-widget-300x53.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-00-enable-widget-1024x182.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-00-enable-widget-768x136.webp 768w\" sizes=\"(max-width: 1210px) 100vw, 1210px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Search Form card in your dashboard (click to zoom)<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 2<\/p>\n\n\n\n<h2 id=\"add-it-to-your-page\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Add It to Your Page<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Open a page or your header template in the Elementor Editor and drop the search in.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Click the <strong>+<\/strong> button at the top left to open the <strong>Elements<\/strong> panel.<\/li>\n\n\n\n<li>Type <strong>Search<\/strong> in the search box.<\/li>\n\n\n\n<li>Drag the <strong>Search Form<\/strong> with the orange badge onto your page.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc916cd&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc916cd\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img decoding=\"async\" width=\"301\" height=\"472\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-01-add-widget.webp\" alt=\"Search Form in the Elements panel\" class=\"has-border-color wp-image-20295\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-01-add-widget.webp 301w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-01-add-widget-191x300.webp 191w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Search Form in the Elements panel (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#bfdbfe;border-width:1px;border-radius:12px;background-color:#eff6ff;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> A new Search Form shows a plain box and a button. It is the <strong>Inline<\/strong> mode. You will style it in Step 5.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 3<\/p>\n\n\n\n<h2 id=\"choose-how-it-shows\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Choose How It Shows<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Open the <strong>Settings<\/strong> section in the <strong>General<\/strong> tab.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Choose the <strong>Mode<\/strong>: <strong>Inline<\/strong> (default), <strong>Dropdown<\/strong> or <strong>Full Screen<\/strong>.<\/li>\n\n\n\n<li>For <strong>Dropdown<\/strong>, choose the <strong>Dropdown Position<\/strong>: <strong>Left<\/strong> (default) or <strong>Right<\/strong>.<\/li>\n\n\n\n<li>Switch <strong>Enable Ajax Live Search<\/strong> on to show results while people type.<\/li>\n\n\n\n<li>Switch <strong>Enable Search Filter<\/strong> on to add a <strong>Date<\/strong> and a <strong>Category<\/strong> filter. Use <strong>Show Category Filter<\/strong> and <strong>Show Date Filter<\/strong> to keep only the one you want.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc91d51&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc91d51\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"472\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-02-settings.webp\" alt=\"Search Form settings\" class=\"has-border-color wp-image-20296\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-02-settings.webp 301w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-02-settings-191x300.webp 191w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Mode (1), Dropdown Position (2), Ajax Live Search (3), Search Filter (4) and the two filters (5) (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Switch <strong>Show Panel In Editor<\/strong> on if you want to see and style the Dropdown or Full Screen box while you edit. Switch it off when you are done.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-rows has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:8px;padding-right:16px;padding-bottom:8px;padding-left:16px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-225a00f3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Inline<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default<\/span>The box and the button sit right in your page. Best for a sidebar or a search page.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Dropdown<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Only a search icon shows. A click opens a small box under it. Best for a header.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Full Screen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">A click covers the whole screen with the search box. Best for a bold, simple look.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 4<\/p>\n\n\n\n<h2 id=\"change-the-words-and-the-button\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Change the Words and the Button<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">A Search Form is built from small parts. Open the <strong>Structure<\/strong> panel to see them.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc92723&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc92723\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"370\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-03-structure.webp\" alt=\"Search Form parts\" class=\"has-border-color wp-image-20297\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-03-structure.webp 240w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-03-structure-195x300.webp 195w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">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)<\/figcaption><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Click <strong>Search Input<\/strong>. Change the <strong>Placeholder<\/strong>, the gray words inside the box. The default is <code>Search...<\/code>.<\/li>\n\n\n\n<li>Click <strong>Search Submit<\/strong>. Choose the button <strong>Type<\/strong>: <strong>Icon<\/strong> (default) or <strong>Text<\/strong>. For text, type the words in <strong>Text<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Date Filter<\/strong> or <strong>Category Filter<\/strong> to change their <strong>Label<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Search Toggle<\/strong> to change the open and close icons.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc92b2f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc92b2f\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"282\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-04-input.webp\" alt=\"Search Input settings\" class=\"has-border-color wp-image-20298\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-04-input.webp 301w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-04-input-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-04-input-18x18.webp 18w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-04-input-20x20.webp 20w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Placeholder (1) and Browser Autocomplete (2) (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc92eb6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc92eb6\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"282\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-05-submit.webp\" alt=\"Search Submit settings\" class=\"has-border-color wp-image-20299\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-05-submit.webp 301w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-05-submit-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-05-submit-18x18.webp 18w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-05-submit-20x20.webp 20w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Type (1) and Text (2) (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> <strong>Browser Autocomplete<\/strong> is off by default. Switch it on if you want the browser to suggest what people searched before.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 5<\/p>\n\n\n\n<h2 id=\"style-it\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Style It<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Each part is a box. Click a part in the Structure panel and open the <strong>Style<\/strong> tab to change it.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li><strong>Search Input<\/strong>, <strong>Date Filter<\/strong> and <strong>Category Filter<\/strong>: add <strong>Spacing<\/strong> (for example <code>12<\/code> top and bottom, <code>16<\/code> left and right), a <strong>Border<\/strong> of <code>1px<\/code> with a soft color like <code>#e5e7eb<\/code>, and a <strong>Radius<\/strong> of <code>12<\/code>.<\/li>\n\n\n\n<li><strong>Search Submit<\/strong>: set a <strong>Background<\/strong> such as <code>#f05a35<\/code>, white text, some <strong>Spacing<\/strong> and the same <strong>Radius<\/strong>.<\/li>\n\n\n\n<li><strong>Search Panel<\/strong> (Dropdown and Full Screen): a white <strong>Background<\/strong>, <strong>Spacing<\/strong> of <code>16<\/code>, a <strong>Radius<\/strong> of <code>16<\/code> and a soft shadow in <strong>Effects<\/strong>.<\/li>\n\n\n\n<li><strong>Search Results<\/strong>: the same white <strong>Background<\/strong>, a <strong>Radius<\/strong> and a shadow, so the results float nicely under the box.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> The pictures below use exactly these values.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">RESULT<\/p>\n\n\n\n<h2 id=\"final-result\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Final Result<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Inline<\/h3>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The box and the button right in the page.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc93703&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc93703\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1240\" height=\"160\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-08-inline.webp\" alt=\"Inline Search Form\" class=\"has-border-color wp-image-20300\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-08-inline.webp 1240w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-08-inline-300x39.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-08-inline-1024x132.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-08-inline-768x99.webp 768w\" sizes=\"(max-width: 1240px) 100vw, 1240px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Inline mode<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Dropdown with live search<\/h3>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Type <code>design<\/code> and the matching posts appear under the box.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc93b9a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc93b9a\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"640\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-09-dropdown.webp\" alt=\"Dropdown Search Form with live results\" class=\"has-border-color wp-image-20301\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-09-dropdown.webp 1320w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-09-dropdown-300x145.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-09-dropdown-1024x496.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-09-dropdown-768x372.webp 768w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Dropdown mode with live search and filters<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Full Screen<\/h3>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">A click on the icon opens a clean, full-screen box. Press <strong>Enter<\/strong> or click the button to search.<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecc94030&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecc94030\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"276\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-07-fullscreen.gif\" alt=\"Full Screen Search Form\" class=\"has-border-color wp-image-20303\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Full Screen mode<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#bfdbfe;border-width:1px;border-radius:12px;background-color:#eff6ff;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> In <strong>Full Screen<\/strong> mode, live search results are placed below the bottom of the screen. For live search, choose <strong>Inline<\/strong> or <strong>Dropdown<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">SETTINGS<\/p>\n\n\n\n<h2 id=\"options\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Options<\/h2>\n\n\n\n<div class=\"wp-block-group aa-rows has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:8px;padding-right:16px;padding-bottom:8px;padding-left:16px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-225a00f3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Mode<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Inline<\/span>Inline, Dropdown or Full Screen.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Dropdown Position<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Left<\/span>Left or Right. For the Dropdown mode.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Enable Ajax Live Search<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Off<\/span>Shows matching posts while people type.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Enable Search Filter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Off<\/span>Adds the Date and Category filters.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Show Category Filter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: On<\/span>Shows the Category filter when filters are on.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Show Date Filter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: On<\/span>Shows the Date filter when filters are on.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Show Panel In Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Off<\/span>Shows the Dropdown or Full Screen box in the editor.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Placeholder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Search&#8230;<\/span>The gray words in the box.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Browser Autocomplete<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Off<\/span>Lets the browser suggest past searches.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Button Type<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Icon<\/span>Icon or Text.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Button Text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Search<\/span>The words on the button when the type is Text.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">GOOD TO KNOW<\/p>\n\n\n\n<h2 id=\"more-details\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">More Details<\/h2>\n\n\n\n<div class=\"wp-block-group aa-rows has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:8px;padding-right:16px;padding-bottom:8px;padding-left:16px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-225a00f3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Press Enter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Pressing Enter in the box searches, like clicking the button.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Live search first<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Live search shows matches fast. The button still takes visitors to the full WordPress search results page.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Many search boxes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Add one in your header and another in your footer if you like.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">HELP<\/p>\n\n\n\n<h2 id=\"troubleshooting\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Troubleshooting<\/h2>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>I do not see the Search Form in the Elements panel<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Go to <strong>Animation Addon > Widgets > Elementor V4 (Atomic)<\/strong> and turn on <strong>Search Form<\/strong>. Click <strong>Save Settings<\/strong>, then reload the editor. Type <strong>Search<\/strong> in the search box and pick the one with the orange badge.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>I only see a small search icon<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">That is the Dropdown or Full Screen mode. Click the icon to open the box. For a box that always shows, set <strong>Mode<\/strong> to <strong>Inline<\/strong>.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>Nothing shows while I type<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Switch <strong>Enable Ajax Live Search<\/strong> on. Then test it on your live page.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>The results list has no pictures<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The results use the featured image of each post. Add a featured image to your posts.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>I do not see the Date and Category filters<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Switch <strong>Enable Search Filter<\/strong> on. Then check that <strong>Show Category Filter<\/strong> and <strong>Show Date Filter<\/strong> are on.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>The Dropdown or Full Screen box is not in the editor<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Switch <strong>Show Panel In Editor<\/strong> on in <strong>Settings<\/strong>.<\/p>\n<\/details>\n\n\n\n<div class=\"wp-block-group aa-final has-background is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-0ff90192 wp-block-group-is-layout-flex\" style=\"border-radius:20px;background:linear-gradient(135deg,#fff1ec 0%,#f5f3ff 100%);margin-top:56px;padding-top:36px;padding-right:28px;padding-bottom:36px;padding-left:28px\">\n<h2 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;font-size:30px;font-weight:700;line-height:1.25\">You Did It<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">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.<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":20058,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-20304","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Search Form - Animation Addons<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Search Form - Animation Addons\" \/>\n<meta property=\"og:description\" content=\"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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Animation Addons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/animationaddons\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-15T11:35:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-06-dropdown.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"760\" \/>\n\t<meta property=\"og:image:height\" content=\"358\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@animationaddons\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/\",\"name\":\"Search Form - Animation Addons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/search-form-v4-06-dropdown.gif\",\"datePublished\":\"2026-10-15T11:35:25+00:00\",\"dateModified\":\"2026-10-15T11:35:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/#primaryimage\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/search-form-v4-06-dropdown.gif\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/search-form-v4-06-dropdown.gif\",\"width\":760,\"height\":358,\"caption\":\"Search form v4 06 dropdown\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/search-form\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"V4 Elements\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-elements\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Search Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"name\":\"Animation Addons\",\"description\":\"Best Animation Plugin for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\"},\"alternateName\":\"Animation Addons for Elementor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\",\"name\":\"Animation Addons\",\"alternateName\":\"Animation Addons for Elementor\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"width\":48,\"height\":48,\"caption\":\"Animation Addons\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/animationaddons\",\"https:\\\/\\\/x.com\\\/animationaddons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/animation-addons\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/animationaddons\\\/\",\"https:\\\/\\\/www.instagram.com\\\/aimationaddons\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@animationaddons\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Search Form - Animation Addons","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/","og_locale":"en_US","og_type":"article","og_title":"Search Form - Animation Addons","og_description":"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 [&hellip;]","og_url":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/","og_site_name":"Animation Addons","article_publisher":"https:\/\/www.facebook.com\/animationaddons","article_modified_time":"2026-10-15T11:35:28+00:00","og_image":[{"width":760,"height":358,"url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-06-dropdown.gif","type":"image\/gif"}],"twitter_card":"summary_large_image","twitter_site":"@animationaddons","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/","url":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/","name":"Search Form - Animation Addons","isPartOf":{"@id":"https:\/\/animation-addons.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/#primaryimage"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/#primaryimage"},"thumbnailUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-06-dropdown.gif","datePublished":"2026-10-15T11:35:25+00:00","dateModified":"2026-10-15T11:35:28+00:00","breadcrumb":{"@id":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/#primaryimage","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-06-dropdown.gif","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/search-form-v4-06-dropdown.gif","width":760,"height":358,"caption":"Search form v4 06 dropdown"},{"@type":"BreadcrumbList","@id":"https:\/\/animation-addons.com\/docs\/v4-elements\/search-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/animation-addons.com\/docs\/"},{"@type":"ListItem","position":2,"name":"V4 Elements","item":"https:\/\/animation-addons.com\/docs\/v4-elements\/"},{"@type":"ListItem","position":3,"name":"Search Form"}]},{"@type":"WebSite","@id":"https:\/\/animation-addons.com\/docs\/#website","url":"https:\/\/animation-addons.com\/docs\/","name":"Animation Addons","description":"Best Animation Plugin for WordPress","publisher":{"@id":"https:\/\/animation-addons.com\/docs\/#organization"},"alternateName":"Animation Addons for Elementor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/animation-addons.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/animation-addons.com\/docs\/#organization","name":"Animation Addons","alternateName":"Animation Addons for Elementor","url":"https:\/\/animation-addons.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","width":48,"height":48,"caption":"Animation Addons"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/animationaddons","https:\/\/x.com\/animationaddons","https:\/\/www.linkedin.com\/company\/animation-addons\/","https:\/\/www.pinterest.com\/animationaddons\/","https:\/\/www.instagram.com\/aimationaddons\/","https:\/\/www.tiktok.com\/@animationaddons"]}]}},"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/003ea1731c068e74c9c0b21151292d0421daa8e37b4cbd3b694787ebf5175e49?s=96&d=mm&r=g","author_name":"ahsan","_links":{"self":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/20304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/comments?post=20304"}],"version-history":[{"count":1,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/20304\/revisions"}],"predecessor-version":[{"id":20305,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/20304\/revisions\/20305"}],"up":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/20058"}],"wp:attachment":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media?parent=20304"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=20304"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=20304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}