Don’t Miss This Simple Trick for Select Fields!

Quay Morgan

Ever needed a checkbox or radio list on your form to display a default placeholder option? You might have tried simply ticking the ✓ icon next to the list option you want as select field default placeholder. Works, right? Problem solved. Alright, not so fast.

Struggling with forms being submitted with the default placeholder option still in your select fields or dropdowns?

Ticking the ✓ will set that list option as the select field default placeholder. The problem you probably discovered quickly after that is that your form can still be submitted with the default placeholder selected. That’s just about useless if you need an actual response to that field!

There’s a quick and easy solution to forms being submitted with the select field default placeholder!

Forms being submitted with your select field default placeholder still in place? You’re one step away from a really easy fix.

Adding a default placeholder to a dropdown, checkbox, or radio list is super easy. If you don’t know how, it’s demonstrated directly below. If you know how to set one already and just need to know how to keep the form from submitting with the select field default placeholder in place, skip one section down!

Please note that for all Ninja Forms versions 3.4.11 and later (released 7 May 2019), all new installations of Ninja Forms will need to have Developer Mode enabled to see all the features described below.

How to add a default placeholder to a dropdown, checkbox, or radio field

Add/choose your select field and click on it to open its settings window, and then:

  1. Click the blue circle/+ icon next to Options to add an additional list option.
  2. For the list option label, write something prompting the user to make a selection.
  3. In the right-hand column under the ✓ icon, tick the box next to this list option.
adding a list option to be the select field default placeholder
For the sake of full transparency, this article’s author is a Browns fan 😉

You now have a default placeholder for this select field. When the user views the form on your site, this option will be pre-selected for them:

How to keep your placeholder selection from being submitted

If this field contains pertinent information that you need, having the form submit with the placeholder is a pain. If the user doesn’t make a selection, that’s exactly what happens. Even if the field is marked as required!

To keep this from happening, you only need to make a single adjustment.

In the Value column, leave a blank for your placeholder, then set the field to required if it isn’t already.

remove any text from the Value setting of the placeholder list option

With the field set to Required, any list option not containing a Value will not pass validation. In plain English, that means if a user doesn’t pick an actual option, the form won’t submit. Instead, it will prompt them to make a selection:

As an aside, these Values are also what will appear in submissions and email responses, rather than the Label. Set the rest of them so you’ll know what they are 🙂

Never have a form submitted with the placeholder selected again!

Following the technique above should resolve any issues you have with guests submitting your WordPress forms without a valid response chosen in your select fields!

This article was written largely because this is a question we see regularly in our support channel and blog comments. You’ll find this article’s comments below.

What questions do you have about using Ninja Forms?

31 Comments

  2. Doesn’t work for me.
    We have a required select dropdown, the value field is empty and the user can still submit the form without selecting any option

    Reply

    1. OK, it took a couple more “Publish” clicks and a hard refresh… Now it works 🙂

    1. Hi,

      While there is not currently a feature to add an input box to a Radio field, with the Conditional Logic add-on, you could have a Single Textbox Field display on your form when the “Other” option is selected.

      Here is additional information about this add-on so that you can make the most informed decision:
      Conditional Logic add-on (https://1a80eb25-3346-4ab7-bfe7-c210e4f3f025.cc09.conves.io/extensions/conditional-logic/)

      Best regards,

      Curtis
      WP Ninja

  4. Sad to say it doesnt work for me either. Not the submiting part, but that part of actualy getting what user chose. When i check submissions in Ninjaforms, it always post with placeholder and i am getting blank field thanks to that….

    Reply

  7. When I added a Select option in Ninja, I only see Label but no Value to make the change mentioned above. Am I doing something wrong?

    Reply

  9. I’ve found a work around for Checkbox List when the boxes can all be selected but you only want one to be selected for example:
    Yes
    No
    You put in Conditional Logic:
    ‘When Yes has been selected > Deselect Option Yes AND When NO has been selected > Deselect Option No’
    That way the user can’t select 2 options, only 1 (provided you have ‘Required Field’ selected also.

    Reply

  10. There is no option of value in select field , there is only label field . How should i enable value option then. Please help

    Reply

  11. Is it possible using conditional logic to add a field – say, a select or radio list value, to the confirmation mail, only if it is selected by the user (and not having a default value)
    Please let me know.. thanks.

    Reply

    1. Right now if it has a value selected (even if it’s a default value) then it will appear. Not a great way around that right now, sorry.

    1. Glad the fix helped and holy moly, I didn’t realize we have fans that far abroad, but for real!

      DAWG CHECK!! haha

  13. Hi,
    I’m trying to do this on a Select (not multi-select. I can’t see a value field and the form is submitting with the placeholder.

    Thanks.

    Reply

    1. Hello Andrea,

      Unfortunately, our list fields do not yet include search capabilities.

  17. Hello !
    It doesn’t work for me for my form, I deleted the the value, but still people can submit without choosing the required option, it works only in Chrome, but not in Firefox and Safari.
    Do you have a way to fix this issue ? Thank you in advance.

    Reply

  18. An old article, but if people are finding the form still submits, just check the value of the placeholder hasn’t been added back in.

    I found that even after leaving the value empty, if I published, and re-edited the form, opened the form input in question, the default value gets added back in, most likely through client-side js in the admin interface.

    This is also the same with field keys, which has proven to be particularly problematic – editing a field label tends to then update the field key, which means the values for historical submissions don’t show (as the field keys don’t match). Again I suspect client-side js is trying to be too clever, but actually causes issues. One to escalate to your devs NF.

    Reply

    1. Hi Chris

      Please reach out to us via our contact form for support. We’ll be happy to help.

      Don’t forget to include a System Status report and an exported copy of the form having issues.

      Thanks!

      Mia

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.