[Forminator Pro] add value of search box in Single choice field(drop down)

there is a search box in Single choice field(drop down menu), it is a good feature. But for general users, they thought there is an error since most dropdown menu don't has such search box. Can i add some value(text) to remind user that is a search box?
It would be great if there is a placeholder for us to add any text.
https://monosnap.com/file/HJLMIUJDplYvhS7tJHgW7jpZ6Rg9V2

  • Adam Czajczyk
    • Support Gorilla

    Hello kamhangmak

    I hope you're well today!

    The simplest solution would be to add a description to a field. It can be added in field editing box. However, this will not add a "placeholder" but rather a message below the drop-down selection field.

    I think that it might be possible to use some small JS snippet there to add a placeholder the way you want but I'll need developers' help on this so I already forwarded the question to them and they'll look into it.

    Please keep an eye on this ticket and we'll update you here as soon as we hear back from them.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello kamhangmak

    I just got a response from one of our developers and here's a solution for you:

    1. create an empty file with a .php extensions (e.g. "forminator-search-placeholder.php")
    2. copy and paste following code into it (using some "clean text" editor such as e.g. Notepad++, Sublime or similar):

    <?php 
    
    add_action( 'wp_footer', 'my_custom_forminator_form_placeholder' );
    function my_custom_forminator_form_placeholder() {
        ob_start();
        ?>
        <script>
        ( function( $ ) {
            $( document ).ready( function() {
                setTimeout( function() {
                    $( '#forminator-module-211937 .select2-container' ).on( 'click', function( e ) {
                        $( '.select2-search__field' ).attr( 'placeholder', 'Search' );
                    });
                }, 100 );
            });
        } ( jQuery ) );
        </script>
        <?php
        $scripts = ob_get_clean();
        echo $scripts;
    }

    3. Make changes to the code:

    a) in this line replace "Search" word with your own text to be used as a placeholder (if you want):

    $( '.select2-search__field' ).attr( 'placeholder', 'Search' );

    b) in this line replace the number in #forminator-module-12345 with an ID of your form that you wish to address; that's the same ID that's used in form shortcode. Or, if you got more forms and want to add that to all of them, you can just remove the #forminator-module-12345 part

    $( '#forminator-module-12345 .select2-container' ).on( 'click', function( e ) {

    4. Save the file and upload it to your server to the "/wp-content/mu-plugins" folder of your WP install; if there's no "mu-plugins" folder directly inside "wp-content" folder, just create an empty one first.

    That's it, nothing else has to be done. We have also suggested adding "placeholder" option to our developers' team behind Forminator so they'll consider implementing such improvement in future. Please note though that at this moment I'm not able to promise you that or give an ETA. But I believe they'll put it on a "to do" list eventually as it seems to be useful and relatively simple thing to do :slight_smile:

    I hope that helps!
    Best regards,
    Adam

  • kamhangmak
    • Site Builder, Child of Zeus

    Hi,

    I tried to get this working on my site, but no luck. I asked support team (Patrick Cohen)of wpmudev to help, but still no luck too.

    We use the same *.php file, same code. We tried to remove #forminator-module-xxxx, or add the form id-1826. It works in a new site, but didn’t work in my site.

    We also tried the following methods, :
    Put it under “mu-plugins”
    Install as a new plugin
    Deactivated plugins that may be conflicting
    Disable file compression in my theme
    Cleared Hummingbird and CloudFlare caches, then check it in a new incognito windows after every method we tried.

    Finally, Patrick do see the code in page source code, but it's not working on the live page. He asked me to update this topic with our efforts, and the 2nd-level team will get back to me.

    The form id is: 1826,
    the live page is: https://www.mssc.hk/?p=1829
    I also granted wpmudev to access my site and leave my ftp info in the textarea of support access.

    Thanks,

  • Adam Czajczyk
    • Support Gorilla

    Hi kamhangmak

    Thanks for getting back to me and providing credentials.

    I checked the site and I'm thinking that the issue might actually lay elsewhere. I can see the code in page source (that's good) but the "search box" doesn't even appear for me - not that there's no placeholder but rather there's no entire search box field on a Single Choice selection list. Furthermore, there are some JS errors in a console, one being quite serious (jQuery not defined).

    The site's running via CloudFlare and it seems there's their Rocket Loader enabled. This is something that, in fact, doesn't play well with WP based sites, especially if they're using lots of JS (and this one seem to be using quite a lot of it).

    Here's what I'd suggest to do now:

    - login to your CloudFlare dashboard and disable Rocket Loader there (it changes the way JS scripts are handled, that might cause some significant issues)
    - clear Hummingbird's cache via "Hummingbird -> Dashboard -> Clear Cache"
    - clear all other caches (including CloudFlare cache) if there are any
    - re-check files in Asset Optimization, it might turn out that you may need to tweak them a bit more;

    After that, first see if the "search box" fields actually shows up and if so, enable that custom plugin again and let's see what happens. Let me know here and if it still doesn't work, I'll investigate it further (just make sure to keep Rocket Loader disabled in CloudFlare).

    Best regards,
    Adam

  • kamhangmak
    • Site Builder, Child of Zeus

    Hi Adam,

    I did the following, checked it in a new incognito windows, but still no luck:
    -disable Rocket Loader in CloudFlare
    -clear Hummingbirds cache & cloudflare cache
    -disable Asset Optimization(since I don’t have any idea how to tweak them)
    -activated the placeholder plugin

    Then I found out and removed some useless CSS, some progresses have been made:
    -JS errors disappear
    -search box shows up, search function works

    The placeholder code still in page source code and still didn’t work.

  • Adam Czajczyk
    • Support Gorilla

    Hi kamhangmak

    Thanks for letting me know. I checked the site and this seems to be caused by how the jQuery library is loaded. I tried to fix that code that I shared with you for you but for some reason I couldn't access FTP (that you shared in Support Access text box). The fix should be simple though :slight_smile:

    If you edit the custom code that I shared earlier, find this line

    add_action( 'wp_footer', 'my_custom_forminator_form_placeholder' );

    and adjust it a bit by adding high number at the end (that's a priority paremeter) like this:

    add_action( 'wp_footer', 'my_custom_forminator_form_placeholder', 999 );

    This will cause this custom code to be executed very, very late on page so hopefully after the jQuery is loaded, thus should make it work.

    Give it a try please and let me know if it helped :slight_smile:

    Best regards,
    Adam

  • kamhangmak
    • Site Builder, Child of Zeus

    Hi Adam,

    I tried the following methods:
    -put it under “mu-plugins”
    -Install as a new plugin
    -add it in function.php
    It works also. Thanks for your help.

    One minor problem, when no results found in search box, it shows "No results found" which not list in forminator.pot, even the latest update 1.5.4. It would be great if developer can add in forminator.pot.

    Thanks again.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.