Title: SearchWP Modal Search Form Author: Syed Balkhi Published: June 26, 2019 Last modified: December 15, 2025 --- Search plugins ![](https://ps.w.org/searchwp-modal-search-form/assets/banner-772x250.png?rev=2149619) ![](https://ps.w.org/searchwp-modal-search-form/assets/icon-256x256.png?rev=2149619) # SearchWP Modal Search Form By [Syed Balkhi](https://profiles.wordpress.org/smub/) [Download](https://downloads.wordpress.org/plugin/searchwp-modal-search-form.0.5.7.zip) * [Details](https://wordpress.org/plugins/searchwp-modal-search-form/#description) * [Reviews](https://wordpress.org/plugins/searchwp-modal-search-form/#reviews) * [Installation](https://wordpress.org/plugins/searchwp-modal-search-form/#installation) * [Development](https://wordpress.org/plugins/searchwp-modal-search-form/#developers) [Support](https://wordpress.org/support/plugin/searchwp-modal-search-form/) ## Description Use SearchWP Modal Search Form to easily integrate an accessible, lightweight modal search form into your WordPress website! SearchWP Modal Search Form **does not require [SearchWP](https://searchwp.com/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform)** but it will utilize SearchWP if it’s installed and activated! 👍 Beyond the information made available in this `README` there is [full documentation](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform) available as well. ### What makes it different from other modals? The philosophy behind SearchWP Modal Search Form is to make it easy to implement accessible and lightweight modal search forms but perhaps even more important make it a great developer (and user) experience. SearchWP Modal Search Form directly integrates with WordPress in the way you use it, and the default modal form theme builds upon the styles put in place by your active theme, making the overhead as small as possible. There’s a full template loader built in as well, allowing you to _fully customize_ your SearchWP Modal Search Form with minimal hassle. Check out the [default template](https://github.com/jchristopher/searchwp-modal-search-form/blob/master/templates/default.php) for an example of how easy it is to customize 🤓 ### Adding modal forms to your site SearchWP Modal Search Form makes it easy to implement modal search forms anywhere in your WordPress website. The following methods are built in and available to you: 1. As a [Menu Item](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#menu-item) 2. Using a [Shortcode](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#shortcode) 3. As a [Gutenberg Block](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#block) 4. Within your template(s) [programmatically](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#code) ### Template Customization SearchWP Modal Search Form integrates a proper template loader for displaying search forms in any number of templates, allowing you to _fully customize_ what the modal looks like per template. The most straightforward way to create a custom template is as follows: 1. Create a folder named `searchwp-modal-form` within your theme 2. Create a file within that folder named `template.php` (or any name ending in `. php`) 3. Copy the contents of the [default template](https://github.com/jchristopher/searchwp-modal-search-form/blob/master/templates/default.php) into that file 4. Customize the `SearchWP Modal Form Name` value in the header comment block 5. Make any other customizations you\’d like to the markup/style, paying attention to the documentation There are (jQuery) events that fire when modals are opened and closed. jQuery _is not_ a dependency, but if jQuery is loaded the events will fire. ``` // Add a callback when a modal is opened: jQuery('body').on('searchwpModalOnShow', function(e) { // Focus an input in the template. e.el.find('input').focus(); }); // Add a callback when a modal is closed: jQuery('body').on('searchwpModalOnClose', function(e) { alert('Modal closed!'); }); ``` Please review the [full template documentation](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#templates) for more detailed information. ## Screenshots [⌊SearchWP Modal Search Form adapts to your theme⌉⌊SearchWP Modal Search Form adapts to your theme⌉[ SearchWP Modal Search Form adapts to your theme [⌊SearchWP Modal Search Form adapts to your theme⌉⌊SearchWP Modal Search Form adapts to your theme⌉[ SearchWP Modal Search Form adapts to your theme [⌊SearchWP Modal Search Form adapts to your theme⌉⌊SearchWP Modal Search Form adapts to your theme⌉[ SearchWP Modal Search Form adapts to your theme [⌊Insert modal triggers directly within your Menus⌉⌊Insert modal triggers directly within your Menus⌉[ Insert modal triggers directly within your Menus [⌊Insert modal triggers as Gutenberg Blocks⌉⌊Insert modal triggers as Gutenberg Blocks⌉[ Insert modal triggers as Gutenberg Blocks ## Blocks This plugin provides 1 block. * SearchWP Modal Form Insert a modal search form ## Installation SearchWP Modal Search Form is installed like all WordPress plugins. You can install this plugin using the `Plugins > Add New` entry in the Admin Menu when logged into your WordPress Dashboard and searching for `SearchWP Modal Search Form`. Alternatively, you can manually install the plugin as well: 1. Download the plugin and extract the files 2. Upload the `searchwp-modal-form` folder to your `~/wp-content/plugins/` directory 3. Activate the plugin through the \’Plugins\’ menu in WordPress 4. Add one or more modal form(s) using the available methods ## FAQ ### Documentation? Of course! [View full documentation](https://searchwp.com/extensions/modal-form/) ### How do I add a modal form to my website? There are multiple ways to add modal form triggers to your site. You can add as many as you’d like wherever you’d like: 1. As a [Menu Item](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#menu-item) 2. Using a [Shortcode](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#shortcode) 3. As a [Gutenberg Block](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#block) 4. Within your template(s) [programmatically](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#code) ### How do I customize the modal? Please review the [full template documentation](https://searchwp.com/extensions/modal-form/?utm_source=wordpressorg&utm_medium=link&utm_content=readme&utm_campaign=modalform#templates) for detailed information. ## Reviews ![](https://secure.gravatar.com/avatar/7eaf8af4da7d2b0102453ac3e96580dd236994d998e236f54e33fd7c1fb90d84? s=60&d=retro&r=g) ### 󠀁[Great support](https://wordpress.org/support/topic/great-support-4987/)󠁿 [Bob](https://profiles.wordpress.org/prasunsen/) July 6, 2023 Very helpful support, thanks for everything that you do! ![](https://secure.gravatar.com/avatar/d9d94572a269fd74e0a1458c8388cb68eef1000f9a89c19d148f30557612fa71? s=60&d=retro&r=g) ### 󠀁[Excellent Word Press Search Plugin](https://wordpress.org/support/topic/excellent-word-press-search-plugin/)󠁿 [commexjimmy](https://profiles.wordpress.org/commejimmy/) October 18, 2022 I have used this plugin on all my websites and it works great. Simple install and set-up. I even have it on the top right corner of my website and as a menu item so mobile users can easily access it. I highly recommend this plugin. Great job programmer’s! ![](https://secure.gravatar.com/avatar/9b18528d5ba0272ce5bc172aeb43606271a1404e815ae63cb1d32a8b10c01381? s=60&d=retro&r=g) ### 󠀁[Perfect!! Exactly what I was looking for!](https://wordpress.org/support/topic/perfect-exactly-what-i-was-looking-for-8/)󠁿 [SunnyDay](https://profiles.wordpress.org/reallycoolgardenstuff/) May 24, 2022 Very easy to install. Does exactly what it needs to. Thank you! ![](https://secure.gravatar.com/avatar/1fa392a47e8fbda7f82912b29de3099cfa9e2e752d1f16cbac897837c3473999? s=60&d=retro&r=g) ### 󠀁[Simple and just working](https://wordpress.org/support/topic/simple-and-just-working/)󠁿 [kayamurer](https://profiles.wordpress.org/kayamurer/) January 17, 2020 The plugin works exactly as expected. The support is great and very friendly. ![](https://secure.gravatar.com/avatar/a5582a57c02416db39e38e51c5fe6d2a48d29d009a519d6bab8e6f945de4c111? s=60&d=retro&r=g) ### 󠀁[Great plugin, great support!](https://wordpress.org/support/topic/great-plugin-great-support-1060/)󠁿 [Andy Smith](https://profiles.wordpress.org/andy-smith/) August 30, 2019 Had one minor (if a little strange) issue, but it was fixed within a few hours. Works really well. ![](https://secure.gravatar.com/avatar/56b4fe1bec55b6579107ccbb475a73e0bc088d8490027962ade4dd3ca03c1657? s=60&d=retro&r=g) ### 󠀁[If this developer makes a search plugin use it](https://wordpress.org/support/topic/if-this-developer-makes-a-search-plugin-use-it/)󠁿 [mimmt](https://profiles.wordpress.org/mimmt/) June 26, 2019 1 reply Massive fan of SearchWP so I wound not expect anything other than a brilliant plugin that I’m sure I’ll use on many projects. [ Read all 6 reviews ](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/) ## Contributors & Developers “SearchWP Modal Search Form” is open source software. The following people have contributed to this plugin. Contributors * [ Syed Balkhi ](https://profiles.wordpress.org/smub/) * [ Jon Christopher ](https://profiles.wordpress.org/jchristopher/) * [ Pavlo ](https://profiles.wordpress.org/pavloopanasenko/) “SearchWP Modal Search Form” has been translated into 1 locale. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/searchwp-modal-search-form/contributors) for their contributions. [Translate “SearchWP Modal Search Form” into your language.](https://translate.wordpress.org/projects/wp-plugins/searchwp-modal-search-form) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/searchwp-modal-search-form/), check out the [SVN repository](https://plugins.svn.wordpress.org/searchwp-modal-search-form/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/searchwp-modal-search-form/) by [RSS](https://plugins.trac.wordpress.org/log/searchwp-modal-search-form/?limit=100&mode=stop_on_copy&format=rss). ## Changelog _0.5.7_ – WordPress 6.9 compatibility. _0.5.6_ – Adds an option to display the Search Modal trigger as an icon. – Adds an option to select a SearchWP form to use in the modal if SearchWP is active. – Minor UI improvements. – Drops SearchWP 3.x support. _0.5.5_ – Fixes settings page appearance and menu structure when SearchWP Live Search is active. _0.5.4_ – Fixes Settings link location in the plugins list when SearchWP is activated.– Fixes Modal breaks emojis in menu items. _0.5.3_ – Fixes “Call to undefined method” error appearing on some themes. _0.5.2_ – Fixes deprecation notices on PHP 8.2. – Improves default template HTML tags semantics. – Fixes the error on adding a Modal Form Gutenberg block to the page. – Changes settings page appearance and menu structure to work seamlessly with a current version of SearchWP. _0.5.1_ – Adds In-plugin notification system to get the latest updates from SearchWP. _0.5.0_ – Adds new Settings admin page to control the behavior of the plugin easier. _0.4.1_ – PHP 8 compatibility _0.4.0_ – Fixes issue with character encoding in some cases – Updates dependencies– Updates bundler and associated NPM commands _0.3.4_ – Fixes Error when using SearchWP 4 _0.3.3_ – Fixes Error in some cases introduced in 0.3.2 _0.3.2_ – SearchWP 4.0 compatibility (when it becomes available) – Fixes issue with HTML output of Menu items _0.3.1_ – Removes unused stylesheet enqueue – Updates dependencies _0.3_ – Updates dependencies – Adds jQuery events when modals open and close _0.2.3_ – Fixes regression introduced in 0.2.2 that prevented search with Enter key _0.2.2_ – Fixes an issue with modal trigger not working in some cases _0.2.1_ – Fixes `$this` context Fatal error _0.2_ – Adds support for `class` argument – Fixes issue with `button` type _0.1_ Initial release ## Meta * Version **0.5.7** * Last updated **6 months ago** * Active installations **5,000+** * WordPress version ** 5.0 or higher ** * Tested up to **6.9.4** * PHP version ** 7.0 or higher ** * Languages * [English (US)](https://wordpress.org/plugins/searchwp-modal-search-form/) and [Portuguese (Portugal)](https://pt.wordpress.org/plugins/searchwp-modal-search-form/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/searchwp-modal-search-form) * Tags * [form](https://wordpress.org/plugins/tags/form/)[modal](https://wordpress.org/plugins/tags/modal/) [search](https://wordpress.org/plugins/tags/search/)[searchwp](https://wordpress.org/plugins/tags/searchwp/) * [Advanced View](https://wordpress.org/plugins/searchwp-modal-search-form/advanced/) ## Ratings 5 out of 5 stars. * [ 6 5-star reviews ](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/searchwp-modal-search-form/reviews/) ## Contributors * [ Syed Balkhi ](https://profiles.wordpress.org/smub/) * [ Jon Christopher ](https://profiles.wordpress.org/jchristopher/) * [ Pavlo ](https://profiles.wordpress.org/pavloopanasenko/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/searchwp-modal-search-form/)