SIGN UP

Form Select field search the options

By: Andy Hoyland | Asked: 05/17/2023
Forums › Category: Code Help › Form Select field search the options
0 Vote Up Vote Down
Andy Hoyland asked 2 years ago

Hi. I have a simple form with one field - a dropdown select field - with loads of options. At the moment it's pretty neat on desktop as people using the form can scroll through the list OR they can type in an input field to narrow down the options that show (shown in the attached image, I hope!)

However - this doesn't work on mobile as the device UI takes over and displays the list of options people have to scroll through. As there are loads of items, this makes the field really annoying.

The Select2 "single select box" works in the exact way I would like my mobile form to work.

https://select2.org/getting-started/basic-usage

As it's only a single field form which will redirect people to another page depending on their selection, I'll probably just go down a quick self built form if this doesn't work, but I just wondered if anyone any thoughts / advice / experience of running something like Select2 on a Formidable input field so that the search field is available to mobile visitors too?

Thanks

Andy  

Attachments
SelectField.png
6 Answers
1 Vote Up Vote Down
Victor Font answered 2 years ago
This question comes up a lot. Formidable uses the jQuery Chosen library V1.8, which has been abandoned by the original developer. There is a fork on Github for a V2.2 that was taken over by other devs when the original was abandoned. I use Easy Digital Downloads on my site that uses the newer version. It overrides Formidable's and autocomplete dropdowns work fine on mobile. I found this out by accident when I was researching this issue for another poster. That poster successfully incorporated select2 into his Formidable form. He had trouble posting the code so we never saw the implementation. This was a couple of weeks ago. I've looked and I cannot find the post, but I think it was in this forum.
Andy Hoyland replied 2 years ago

Hi Victor! Thanks for the reply, and that gives me something to look for. Clearly I needed to expand my search terms for this one!

I looked over a couple of the other threads, including the one that contains links to formidable-masterminds.

Interestingly (?!) I see the fields you refer to but the keyboard / autocomplete doesn't work for me on either iOS or Android.

I'm going to see if I can incorporate select2 into Formidable form... always worth a go, right?!

https://connect.formidableforms.com/question/category/code-help/lookup-fields-dynamic-fields-autocomplete-on-mobile-devices/

https://formidable-masterminds.com/developers-directory/

Thanks again.

Andy Hoyland replied 2 years ago

Hi again Victor - I just wanted to say thanks again for getting back to me on this one. I have added Select2 to my Formidable form and things seems to be working ok. My solution is not at all DRY - it will pretty much just work on my specific use case, but maybe in the next week or so I'll get around to implementing it properly.

Walter JonesWalter Jones replied 2 years ago

Sure the first field on https://joneswebdesigns.com/select2-test/

The snippet on masterminds allows for the targeting of multiple fields.

0 Vote Up Vote Down
Walter JonesWalter Jones answered 2 years ago

 Check this out:https://formidable-masterminds.com/downloads/ff-select2-implementation/

Andy Hoyland replied 2 years ago

Thank you Walter. Do you know if there is an example of that working on mobile?

1 Vote Up Vote Down
Andy Hoyland answered 2 years ago
For anyone who wants to know all I've done to make this work just now, following the Select2 basic usage found here: https://select2.org/getting-started/basic-usage
  1. Disabled "Autocomplete" in my formidable dropdown
  2. Included Select2 JS and CSS in my theme files
  3. Targeted the id of the dropdown field in my form: 
    $(document).ready(function() {
    $('#selectFieldIDHere').select2();
});
  4. Added a little bit of style of my own
This seems to work at the moment but I'm very aware it's not very robust. I only need it for one specific dropdown field so it was easy enough to target the ID of that field. If I get round to doing it properly soon I'll let you know what I did!
John Real GJohn Real G replied 2 years ago

Nice try.

Kratos Bragaa replied 5 months ago

Please give me that css file

0 Vote Up Vote Down
Shay Kolker answered 1 year ago
This also works for me for simple select field or even lookup field. But if I have a second lookup field that watches the select2 lookup field it doesn't work. Any suggestions?
0 Vote Up Vote Down
Thompson Fiuzzi answered 1 year ago

I'm in the same situation, with a single field it works fine, but the second lookup doesn't work.The formidable team should fix this issue which makes formidable form unusable in the mobile version.For this reason I am considering switching to gravity form.This bug has existed for more than 1 year now, it is unacceptable.

0 Vote Up Vote Down
Thompson Fiuzzi answered 1 year ago
I discovered a little trick that solves the problem. Step. 1- Install select2 in your theme. 2- Enter the code that identifies your field jQuery(document).ready(function($) { $('#field_8glin').select2(); }); 3- Leave formidable form autocompletion active in the field. 4- Hide the formidable field using css. Everything works perfectly, waiting for the formidable team to do something definitive.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right