Search Results for 'searchandfilter data-sf-form-id'

[Trevor]

I haven’t checked this, but there are a couple of errors:

.searchandfilter[data-sf-form-id=”1216″] > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

important was spelled wrong, and it is the ul inside the form that needs to be display: flex, not the form itself.

[Trevor]

Like this:

body.mybodytag .searchandfilter[data-sf-form-id="###"]  > ul > li {
display: inline-block;
margin-right: 20px;
}
body.mybodytag .searchandfilter > ul > li:last-child {
margin-right: 0;
}

[Anonymous]

Ok, I just confirmed that my body class tags are different, so I will give it a try.

Can you tell me where the body class might go into this code snippet?

.searchandfilter[data-sf-form-id="###"]  > ul > li {
display: inline-block;
margin-right: 20px;
}
.searchandfilter > ul > li:last-child {
margin-right: 0;
}

[Trevor]

This is the form definition that I see on the page:

<form action="http://beta.agro-chemie.nl/zoeken/" method="post" class="searchandfilter" data-sf-form-id="6965" data-is-rtl="0" data-results-url="http://beta.agro-chemie.nl/zoeken/" data-ajax-form-url="http://beta.agro-chemie.nl/?sfid=6965&sf_action=get_form" data-use-history-api="1" data-template-loaded="1" data-lang-code="" data-ajax="0" data-auto-update="1" id="search-filter-form-6965" autocomplete="off"><ul><li class="sf-field-search" data-sf-field-name="search" data-sf-field-type="search" data-sf-field-input-type="">

And it is missing a lot of variables.

What version of the plugin are you using? It looks like it is 2.1.x, which is VERY old. Your license for support and updates has expired. We are currently at 2.3.4 and shortly will release 2.4.0

You need to renew your license (after renewal, it may take a while before the server updates your account) to be able to download the latest version from your account area) and receive further support. To update, you will need to use this method:

1) Deactivate S&F Pro in WP Admin Plugins page (do NOT delete the plugin from within WP Admin Plugins page; otherwise you will lose your search form)
2) Via FTP (or cpanel file manager if you have it), delete search-filter-pro folder from the wp-content\plugins folder on your server. If you wish to keep the folder, just in case, do NOT rename it, instead move it UP a folder into the wp-content folder.
3) Unzip the file that you have downloaded (if you are using cPanel File manager, you can upload the zip file and then extract it in the plugins folder).
4) Upload the search-filter-pro folder to the wp-content\plugins folder on your server.
5) Activate Search & Filter Pro in WP Admin Plugins page.

[Trevor]

In order to make it wider than the default, you would need to give it a fixed width or a % (of the container), like this:

.searchandfilter[data-sf-form-id="450621"] ul li .sf-input-text {
  width: 125px;
  min-width: 125px !important;
}

Where you replace 450621 with your form ID number.

[Anonymous]

Unfortunately this solution didn’t work either so the solution I came up with was to copy the code produced by your search widget and then alter the placeholder attribute with the following solution…

<form data-sf-form-id=’276′ data-is-rtl=’0′ data-maintain-state=” data-results-url=’/results’ data-ajax-url=’/?sfid=276&sf_action=get_data&sf_data=results’ data-ajax-form-url=’/?sfid=276&sf_action=get_data&sf_data=form’ data-display-result-method=’shortcode’ data-use-history-api=’1′ data-template-loaded=’0′ data-lang-code=” data-ajax=’1′ data-ajax-data-type=’json’ data-ajax-target=’#search-filter-results-276′ data-ajax-pagination-type=’normal’ data-ajax-links-selector=’.pagination a’ data-update-ajax-url=’1′ data-only-results-ajax=’1′ data-scroll-to-pos=’0′ data-init-paged=’1′ data-auto-update=’1′ action=’/results’ method=’post’ class=’searchandfilter’ id=’search-filter-form-276′ autocomplete=’off’ data-instance-count=’1′>

<li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”” style=”font-family:Arial, FontAwesome” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

</form>

[Trevor]

A search of these forums showed that I have done it like this before:

.searchandfilter[data-sf-form-id="450621"] ul li .sf-input-text {
  width: 125px;
  min-width: 125px !important;
}

I notice that your license has expired (many months ago), so I will not be able to offer additional support until it is renewed.

[Trevor]

This would be more like ti then:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"] > ul:before {
  content: "SEARCH";
  float:left;
  padding-top: 28px;
  font-size: 14px;	
  color: #fff;
  margin-right: 20px;
  letter-spacing: 3px;
  font-weight: 400;
}

[Trevor]

Something like this maybe:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"]:before {
  content: "Search";
  float:left;
  padding-top: 20px;
  font-size: 25px;	
}

[Anonymous]

Thanks for the response Trevor! That sounds like the correct way to do things! Unfortunately, I’m not very good at manipulating functions or functions.php. I have a solution that is working for now however! I created 3 S&F Search Forms. They are all identical except one aspect. The main search form used to show all results has no results filter on “Tags, Categories & Taxonomies”. It’s ID is “11107”. Then I copied that search form into two new forms. Each has a filter on tags/cat/tax, one for white papers, one for success stories. I did a search on the main form, then i grabbed the source code for the form with the pre-checked checkbox, one for white papers, one for success stories. I have 3 pages; 1) for all the results with original shortcodes for search and results page 2) one for white papers with actual source code for the search form prechecked for white papers, BUT returning the search results to the original results page (11107). I have the search results shortcode, however, filtered using this new form (ID 11173). 3) Success stories is the same as the white papers, but with source code forcing case studies to be pre-checked and the third search results shortcode limiting search results to just case studies.

If you try the pages below, you can see it works pretty darn well. I have a custom page title and meta for each page. Each page displays the given or relevant results for the page title, but uses essentially the same form. And you can manipulate the search results to show anything you want despite the page you land on.

http://clarityconsultants.com/insights-all/
http://clarityconsultants.com/insights-white-papers/
http://clarityconsultants.com/insights-success-stories/

Code to generate S&F search form on White Papers page;

<form action="http://clarityconsultants.com/insights-all/" method="post" class="searchandfilter" data-sf-form-id="11107" data-is-rtl="0" data-results-url="http://clarityconsultants.com/insights-all/" data-ajax-url="http://clarityconsultants.com/?sfid=11107&sf_action=get_results" data-ajax-form-url="http://clarityconsultants.com/?sfid=11107&sf_action=get_form" data-use-history-api="1" data-template-loaded="0" data-lang-code="" data-ajax="1" data-ajax-target="#search-filter-results-11107" data-ajax-links-selector=".pagination a" data-update-ajax-url="1" data-only-results-ajax="1" data-scroll-to-pos="0" data-auto-update="1" data-auto-count="1" data-auto-count-refresh-mode="1" id="search-filter-form-11107" autocomplete="off">
  <ul>
    <li class="sf-field-search" data-sf-field-name="search" data-sf-field-type="search" data-sf-field-input-type="">
      <h4>Keyword</h4>
      <label>
        <input placeholder="Search …" name="_sf_search[]" class="sf-input-text" type="text" value="" title="">
      </label>
    </li>
    <li class="sf-field-taxonomy-type" data-sf-field-name="_sft_type" data-sf-field-type="taxonomy" data-sf-field-input-type="checkbox">
      <h4>Type</h4>
      <ul data-operator="or" class="">
        <li class="sf-level-0 sf-item-114 sf-option-active" data-sf-count="68">
          <input class="sf-input-checkbox" type="checkbox" value="success-stories" name="_sft_type[]" checked="checked" id="sf-input-ebd832e0d6a9e4300219f4c687415a3d">
          <label class="sf-label-checkbox" for="sf-input-ebd832e0d6a9e4300219f4c687415a3d">Success Stories<span class="sf-count">(68)</span>
          </label>
        </li>
        <li class="sf-level-0 sf-item-116" data-sf-count="5">
          <input class="sf-input-checkbox" type="checkbox" value="white-papers" name="_sft_type[]" id="sf-input-49fad65047305ebd34213e379030f930">
          <label class="sf-label-checkbox" for="sf-input-49fad65047305ebd34213e379030f930">White Papers<span class="sf-count">(5)</span>
          </label>
        </li>
      </ul>
    </li>
    <li class="sf-field-taxonomy-topic" data-sf-field-name="_sft_topic" data-sf-field-type="taxonomy" data-sf-field-input-type="checkbox">
      <h4>Topic</h4>
      <ul data-operator="or" class="">
        <li class="sf-level-0 sf-item-115" data-sf-count="19">
          <input class="sf-input-checkbox" type="checkbox" value="creative" name="_sft_topic[]" id="sf-input-95f19173a3a36575c1412aa1c10ce689">
          <label class="sf-label-checkbox" for="sf-input-95f19173a3a36575c1412aa1c10ce689">Creative<span class="sf-count">(19)</span>
          </label>
        </li>
        <li class="sf-level-0 sf-item-98" data-sf-count="54">
          <input class="sf-input-checkbox" type="checkbox" value="learning-and-development" name="_sft_topic[]" id="sf-input-39454b662e503ddfb9047f0316858be1">
          <label class="sf-label-checkbox" for="sf-input-39454b662e503ddfb9047f0316858be1">Learning and Development<span class="sf-count">(54)</span>
          </label>
        </li>
      </ul>
    </li>
    <li class="sf-field-submit" data-sf-field-name="submit" data-sf-field-type="submit" data-sf-field-input-type="">
      <input type="submit" name="_sf_submit" value="Submit">
    </li>
    <li class="sf-field-reset" data-sf-field-name="reset" data-sf-field-type="reset" data-sf-field-input-type="link"><a href="#" class="search-filter-reset" data-search-form-id="11107">Reset</a>
    </li>
  </ul>
</form>