Customise the FORM

Anonymous

#213638

Hi Trevor,

I have a form with a search field, and -currently- a dropdown list with the categories. I will ever only have 3 categories and was wondering if it’s possible to show them as 3 buttons or links without checkboxes, radio buttons or a dropdown, just plain links or buttons.

Thank you

Trevor

#213655

Yes, it is. Set the control up as a checkbox and then can you send me a live link/URL to your search page so I can take a look and write for you the custom CSS that you will need?

Anonymous

#227726

Wondering if this was solved — I have a similar problem, I’ve got radio buttons set up but I’d like to be able to just click on the category name to get the Ajax results. Unfortunately the site is still in testing so I can’t send you a link. If I could eliminate the radio button and just click on the category name that would be ideal. I know this may be beyond the support you offer but if you could point me in the right direction I’d really appreciate it. Thank you!

<div class="category-search">
				<form data-sf-form-id='131' data-is-rtl='0' data-maintain-state='' data-results-url='http://pugetgardens/gardens' data-ajax-url='http://pugetgardens/?sfid=131&sf_action=get_data&sf_data=results' data-ajax-form-url='http://pugetgardens/?sfid=131&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-131' 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='http://pugetgardens/gardens' method='post' class='searchandfilter' id='search-filter-form-131' autocomplete='off' data-instance-count='1'><ul><li class="sf-field-category" data-sf-field-name="_sft_category" data-sf-field-type="category" data-sf-field-input-type="radio">		<ul class="">
			
			<li class="sf-level-0 sf-item-0" data-sf-count="0" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="" name="_sft_category[]" id="sf-input-2e2df78133ccdeebcd7ee3681e794021"><label class="sf-label-radio" for="sf-input-2e2df78133ccdeebcd7ee3681e794021">All Gardens</label></li><li class="sf-level-0 sf-item-4" data-sf-count="1" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="bainbridge-island" name="_sft_category[]" id="sf-input-75dfcbc03c3a760a48596c14525f6c6f"><label class="sf-label-radio" for="sf-input-75dfcbc03c3a760a48596c14525f6c6f">Bainbridge Island</label></li><li class="sf-level-0 sf-item-6" data-sf-count="1" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="king-county" name="_sft_category[]" id="sf-input-0fecb90cc4f7642b0f889c5c046a9f8f"><label class="sf-label-radio" for="sf-input-0fecb90cc4f7642b0f889c5c046a9f8f">King County</label></li><li class="sf-level-0 sf-item-5 sf-option-active" data-sf-count="2" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="north-kitsap" name="_sft_category[]" checked="checked" id="sf-input-1e71a583a00b94cae4cdd129e10cdc18"><label class="sf-label-radio" for="sf-input-1e71a583a00b94cae4cdd129e10cdc18">North Kitsap</label></li>		</ul>
		</li></ul></form>					</div>

Trevor

#227821

You can use custom CSS to hide the radio button, and further custom CSS top show the term has been selected. Is that what you mean?

I would need to see the form to be able to give specifics (which you tell me I cannot), but this post shows some CSS I wrote for another user with a similar request:

https://support.searchandfilter.com/forums/topic/submit-and-reset-buttons-are-gray-no-text/#post-223876

Anonymous

#228386

Hi Trevor,

Perfect! I can work with that to accomplish what I need. Thank you so much!

Trevor

#228388

Thanks for letting me know. I will close this thread for now.

[Author]

Posts