Search Form Customization

Hi,
1. No, the plugin don’t have this features. However, why don’t you add the ‘header’ before the shortcode? eg

"Select Product Category"
[formid="123"]
"Select Location"
[formid="321"]

2. No. There are no easy way but editing the plugin file. It is not a good practice to editing the plugin file,though.

Ok…so this is not optimal…but I can work around it. It’s always easy to make suggestions when one is not doing the work…(talking about myself here).

My suggestion is that the form needs a way to insert text boxes that are not related to custom meta or taxonomy…that way a long form can be broken up into sections with headers.

I’m very happy with the results of this form…and btw..I was using the w3tc cache plugin and it was not playing nice with the search results. I switched to wp super cache and it works really well with this plugin.

Regards
Will

There’s a two additional ways you could do this. with Javascript or JQuery. You could prepend html to any element in the form and it shouldn’t hurt anything. Or you could go to the extreme of hiding the whole form, sucking out the html and spitting back to the page for display with whatever html you like (a lot of gallery plugins do this.)

https://api.jquery.com/append/
https://api.jquery.com/prepend/
https://api.jquery.com/html/
https://api.jquery.com/text/

This might come in handy too: https://james.padolsey.com/javascript/regex-selector-for-jquery/

I have the same issue and I’m contemplating to what extreme I want to do this without touching the plugin.

Here’s how I moved the taxonomies, below my meta data filters…( at client request)

//Edits to search form
  //Select bottom div with button, (use to mark bottom of the form) stick a container div above (before) it
  //https://api.jquery.com/before/
  jQuery("div[class='awqsf_box']").before('<div class="tax-container"></div>');

  //Select all taxonomy checks (search options at top) using this tip...
  //https://stackoverflow.com/questions/10498896/select-all-elements-with-class-name-start-by-specific-string-by-jquery
  //hide them first, move them to bottom in our new container, then show them again (I'm chaining all the actions together)
  //https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
  jQuery("div[class*=' taxocheck-']").hide().appendTo('.tax-container').show();

I hope this helps!

Just learned a little tip…. the form script ignores any divs on the “awqsf_box” level if you try to dynamically create and insert divs/text in between form sections on that level.

Here’s where I ended up. I’m probably screwed if the class structure changes in the plugin but I was able to beat the crap out of this form to get it into a three column responsive grid…

The following code should all be in a jQuery document ready call…

//Select all taxonomy checks using (options at top)
  //https://stackoverflow.com/questions/10498896/select-all-elements-with-class-name-start-by-specific-string-by-jquery
  //hide them first, move them to bottom, then show them again
  //https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
  jQuery("div[class*=' taxocheck-']").hide().appendTo('.tax-container').show().css({display:'inline-block'});
  jQuery("div[class*=' cmfcheck-']").hide().appendTo('.meta-data-container').show().css({display:'inline-block'});
  //Select neighborhoods label and move it outside the scrollable area
  jQuery("label[class='taxo-label-1']").hide().appendTo('.taxocheck-label-holder').show();

  //Get rid of all the br's we no longer need
  jQuery("label[class*='taxo-cmf-']").nextAll('br').remove();
  jQuery('.op_neighborhoods br:first').remove();

  //get rid of mystery divs that the plugin uses for block clears
  jQuery("label[class*='cmfcheckbox']").nextAll('div').remove();

  //throw in some css in preparation of making this responsive
  jQuery("div[class*='cmfcheck-']").css({padding:'0 0 0 0 !important',width:'33%',display:'inline-block'});
  jQuery("label.taxcheckbox").css({width:'33%',display:'inline-block'});

My client ended up asking me for this exactly… here’s how I did it with jQuery…

I set up two arrays, the headers and then the target placement, then fire off a loop if the form exists to pop in the header dividers between a section of checkboxes.

if (jQuery('.awqsf_box')){
    function salad() {
var topheadings = ['Schedule','Duration','Day of Week','Are you representing a Group?'];

var targetplacement = ['cmfcheck-0','cmfcheck-3','cmfcheck-6','cmfcheck-8'];

for (var i = 0; i < topheadings.length; i++) {

var headingdivider = '<div class="awqsf_box taxocheck-divider-' + i +'" style="display: block;\"><label class="taxo-label-' + i + '">' + topheadings[i] + '</label></div>';
var target = "div.awqsf_box."+ targetplacement[i];
//console.log(headingdivider);
//console.log(target);
 jQuery(target).before(headingdivider);
}
}

salad();
}