Table of Contents
1. Connect your site’s default Search Form.
Right-click your site’s default search field, and select “Inspect Element”.
![](http://www.themepunch.com/wp-content/uploads/2018/05/default-search.jpg)
And then copy the class name of the search field’s element from the browser’s web console.
![](http://www.themepunch.com/wp-content/uploads/2018/05/searh-form-class.jpg)
Next, from the “Search Settings” page, set “Enable Search Globally” to “On”, and then click “Add Setting”.
![](http://www.themepunch.com/wp-content/uploads/2018/05/enable-search-globally.jpg)
Next, paste in your search form’s class name, select a Grid, and click “Save Settings”.
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-settings.jpg)
Result:
![](http://www.themepunch.com/wp-content/uploads/2018/05/click-search-form.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-modal.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-results.jpg)
2. Create your own Search Form as a Shortcode
From the “Search Settings” page, click “Add Shortcode” from the “Shortcodes Search” tab.
![](http://www.themepunch.com/wp-content/uploads/2018/05/shortcode-search.jpg)
Give the shortcode a “Handle”, assign it a Grid, enter some HTML to be used for the search, and then copy the Generated Shortcode to your clipboard.
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-shortcode.jpg)
Next, paste the shortcode into one of your pages.
![](http://www.themepunch.com/wp-content/uploads/2018/05/add-search-shortcode.jpg)
Result:
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-on-page.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-modal.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/05/search-results.jpg)