A custom field for Gravity Forms that will search any selected post types as the user types into the field and show the results below the field. Set which post types, how many results, and customize the display format of the results. Lots of unique CSS classes included for full custom styling!
This plugin was created as a way to help customers find documentation articles before submitting a support ticket on our Sunshine Photo Cart website (form behind login). The goal is to reduce the number of support tickets submitted by helping customers find and answer themselves. Maybe you can find other uses as well!
How to Use
- Enable the plugin
- Drag and drop the “Search” field into your form
- Customize the field settings
Custom Result Format
In the field can customize the format of how results are shown. The default is:
<a href="%url%" target="_blank">%title%</a>
The following template tags are allowed
%title% = Post Title
%url% = Post Permalink URL
%type% = Post Type
%excerpt% = Excerpt
%excerpt:#% = Excerpt with # words (put in any numerical value)
For Better Search Results
This uses the default WordPress search query methods (meaning it does not search metadata). If you want more advanced search results it is recommended to also install Relevanssi. This plugin will allow Relevanssi to help with the search results if it is installed.
This outputs unique CSS classes and IDs to allow you to customize the display:
<div class="wpsunshine-gf-search-results" id="wpsunshine-gf-search-input_[FORMID]_[FIELDID]-results"> <div class="wpsunshine-gf-search-result wpsunshine-gf-search-result-[POSTTYPE] wpsunshine-gf-search-result-[POSTID]"> YOUR CUSTOM FORMAT HERE </div> </div>
An additional class “wpsunshine-gf-search-result-has-thumbnail” is added to the same “wpsunshine-gf-search-result” element when the result has a featured image:
<div class="wpsunshine-gf-search-results" id="wpsunshine-gf-search-input_[FORMID]_[FIELDID]-results"> <div class="wpsunshine-gf-search-result wpsunshine-gf-search-result-[POSTTYPE] wpsunshine-gf-search-result-has-thumbnail"> YOUR CUSTOM FORMAT HERE </div> </div>