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
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.
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://formidable-masterminds.com/developers-directory/
Thanks again.
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.
Sure the first field on https://joneswebdesigns.com/select2-test/
The snippet on masterminds allows for the targeting of multiple fields.
Check this out:https://formidable-masterminds.com/downloads/ff-select2-implementation/
Thank you Walter. Do you know if there is an example of that working on mobile?
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
$(document).ready(function() { $('#selectFieldIDHere').select2(); });
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!
Nice try.
Please give me that css file
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?
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.
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.
Please login or Register to submit your answer