How to hide first drop-down option in form

I have a couple of drop-down fields in my form. I want to show a blank value instead of showing the first available option in the form. I could add a blank value, I know, but then users may just select that which I do not want.

Can you help please?

  • Nahid

    Hey originaldruider !
    Hope you are having a great day!

    Please try adding the following Custom CSS as the first part of the custom code to make the dropdown show a blank field until an option is selected:

    .forminator-custom-form.forminator-design--flat .forminator-select+.select2 .selection .forminator-select2 .select2-selection__rendered {
      	display: none;
    }
    
    .forminator-custom-form.forminator-design--flat .forminator-field .forminator-select+.select2 .selection .forminator-select2 {
    	height: 40px;
    }
    
    .forminator-custom-form.forminator-design--flat .forminator-select+.select2 .selection .forminator-select2 .select2-selection__rendered.changed {
      display: block;
    }

    You can add the Custom CSS in your WordPress Dashboard->Appearance->Customize->Additional CSS. Alternatively, you can also add it in your theme's (most preferably, child theme's) stylesheet or a custom CSS plugin.

    As the second part of the custom code, please add the following Javascript code:

    (function($) {
    	$(window).bind("load", function() {
    		$('.forminator-custom-form .forminator-select--field').on('change', function() {
            	$('.forminator-custom-form .select2-selection__rendered').addClass('changed');
            });
        });
    })( jQuery );

    You can add the Javascript code using a custom JS plugin. You can also look into these alternative ways to add custom Javascript.

    Hope this helps. Let us know if this works for you. Thanks!

    Kind regards,
    Nahid

  • Dimitris

    Hello originaldruider,

    hope you're doing good today! :slight_smile:

    I've made some more tests on this. Please use this plugin to add the following custom JS code:
    https://wordpress.org/plugins/custom-css-js/

    (function($) {
      $(window).bind('load', function() {
    
        $('.forminator-field .forminator-select2').one('click', function() {
          $('.select2-container--open .select2-results__option.select2-results__option--highlighted').attr('aria-selected', false);
          $('.select2-container--open .select2-results__option').removeClass('select2-results__option--highlighted');
        });
    
        $('.forminator-custom-form .forminator-select--field').on('change', function() {
          $('.forminator-custom-form .select2-selection__rendered').addClass('changed');
        });
    
      });
    })( jQuery );

    (select to load the snippet on Footer of Frontend pages).

    Then go to the Appearance settings of your form, enable the Custom CSS textarea and insert the following rules:

    .forminator-select+.select2 .selection .forminator-select2 .select2-selection__rendered {
    	display: none;
    }
    .forminator-field .forminator-select+.select2 .selection .forminator-select2 {
    	height: 40px;
    }
    .forminator-select+.select2 .selection .forminator-select2 .select2-selection__rendered.changed {
    	display: block;
    }

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.