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

[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;	
}

Add New Note to this Reply

[Clarity Consultants]

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>

Add New Note to this Reply

[Trevor]

If, if you examine the page code using the inspector, you see this for the form start tag:

<form action="http://www.hmgaerospace.com.gridhosted.co.uk//lara/news/" method="post" class="searchandfilter" data-sf-form-id="1418" data-is-rtl="0" data-results-url="http://www.hmgaerospace.com.gridhosted.co.uk//lara/news/" data-ajax-url="http://www.hmgaerospace.com.gridhosted.co.uk/?sfid=1418&sf_action=get_results" data-ajax-form-url="http://www.hmgaerospace.com.gridhosted.co.uk/?sfid=1418&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-1418" data-ajax-links-selector=".pagination a" data-update-ajax-url="1" data-only-results-ajax="1" data-scroll-to-pos="0" data-auto-update="" id="search-filter-form-1418" autocomplete="off">

Notice the action url and the data-results-url have this as their value:

http://www.hmgaerospace.com.gridhosted.co.uk//lara/news/

There are 2 slashes in the url of both. Is this an issue in the WordPress setup?

Add New Note to this Reply

[Vender envibelar]

This reply has been marked as private.

Add New Note to this Reply

[Dorothy Tsui]

I am copying the following to my child theme stylesheet as I want search fields to appear horizontally, however there is no change.

.searchandfilter[data-sf-form-id=”2374″]
{
display: inline !important;
font-size: 100px !important;
}

I’ve also tried

.searchandfilter p
{
display: inline !important;
font-size: 100px !important;
}

Can you please advise?

Thank you.

Add New Note to this Reply

[Brian Miyasaki]

Thank you I found this thread https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/ which helped a lot but the problem I am coming across right now is getting the check boxes to line up in 3 columns in a row like in the photo above. here is the css I am using .

.searchandfilter[data-sf-form-id=”116014″] .chosen-container.chosen-container-multi {
width: 100% !important;
margin-top: -5px !important;
}

.searchandfilter[data-sf-form-id=”116014″] input.default {
border-color: rgba(0,0,0,0.3);
outline: 1;
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
transition: border linear 0.2s,box-shadow linear 0.2s;
}

.searchandfilter[data-sf-form-id=”116014″] li.sf-field-category {
width: 30% !important;
}

.searchandfilter[data-sf-form-id=”116014″] select.sf-input-select {
width: 100%;
}
`

Add New Note to this Reply

[Trevor]

Hi

You would need to decide which bits need to be where, but this for example:

.searchandfilter[data-sf-form-id="41629"] li.sf-field-category {
    width: 20% !important;
}

Might become this:

.searchandfilter[data-sf-form-id="41629"] li.sf-field-category {
    width: 20% !important;
    float: left;
    display: inline-block !important;
}

and so on.

Add New Note to this Reply

[DegenerationIT IT]

Ok this is the final result with consistency:

.searchandfilter[data-sf-form-id="2545"] > ul > li {
	display:inline-block !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-search {
  width: 40%;
  padding-right:10px !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-tag {
  width: 40%;
  padding-right:10px !important;
}

/* format tag fields for consistency */
.searchandfilter[data-sf-form-id="2545"] .chosen-container-multi .chosen-choices {
    display: inline-block;
    height: 2.65em !important;
    margin-bottom: 0px;
    border: 1px solid #ddd;
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
} 

.searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi {
    width: 100% !important;
      margin-top: -5px !important;
}

.searchandfilter[data-sf-form-id="2545"] input.default {
border-color: rgba(0,0,0,0.3);
    outline: 0;
    outline: thin dotted \9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
  -webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
    transition: border linear 0.2s,box-shadow linear 0.2s;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-category {
    width: 20% !important;
}

.searchandfilter[data-sf-form-id="2545"] select.sf-input-select {
    width: 100%;
}

Hope can help a lot of people that are trying to have an horizontal view for S&F.

Now I just need to edit the @media CSS for smartphones and tablets.

Add New Note to this Reply

[Oleg Krasnyanskiy]

Hello,
I am using GTranslate plugin and would like SF2 ajax form results to be translated.
I got this from Gtranslate support:

——-
You have this form:

<form action=”http://en.tracers.ru/archive/&#8221; method=”post” class=”searchandfilter” data-sf-form-id=”17942″ data-is-rtl=”0″ data-results-url=”http://tracers.ru/archive/&#8221; data-ajax-url=”http://tracers.ru/?sfid=17942&sf_action=get_results&#8221; data-ajax-form-url=”http://tracers.ru/?sfid=17942&sf_action=get_form&#8221; data-use-history-api=”1″ data-template-loaded=”0″ data-lang-code=”” data-ajax=”1″ data-ajax-target=”#search-filter-results-17942″ 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″ id=”search-filter-form-17942″ autocomplete=”off”>

You will need to change data-results-url, data-ajax-url, data-ajax-form-url attributes to be relative or to include the language code like in action attribute. This attributes are not standard attributes like action, that’s why they are not getting replaced with appropriate language domain automatically.

Thanks! – See more at: http://gtranslate.net/forum/ajax-filter-resets-language-t4636.html#sthash.jFV69pbs.dpuf
——-

Can you tell me where should I make change in code?

Thank you,
Oleg

Add New Note to this Reply

[Edward]

This reply has been marked as private.

Add New Note to this Reply