Search Field for Gravity Forms

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!

Documentation

How to Use

  1. Enable the plugin
  2. Drag and drop the “Search” field into your form
  3. 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.

Styling

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>

Demo