What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I remove blank option from drop down menu?

    Asked by Nixor on December 27, 2011 at 01:31 AM

    In my application form, wherever I use dropdown menus, it gives me a blank option. Is there any way I can get rid of the blank option?

    application form
  • Profile Image
    JotForm Support

    Answered by idarktech on December 27, 2011 at 01:48 AM

    Hi,

    Drop down boxes have a blank option chosen by default and there is currently no option to remove that using the Form Builder. You could instead change the default option on your drop down to any other value by choosing Properties > Selected > and then choose your preferred value.

    If you want it removed for aesthetic reasons, modifying the source code will do.

    1. Click on Setup & Embed > Embed Form > Source  and then copy the whole code.

    2. Find and remove <option> </option>. See sample codes below:

     

    <script src="//cdn.jotfor.ms/jotform.jgz?3.1.107" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          JotForm.initCaptcha('input_5');
          $('input_5').hint('Type the above text');
       });
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/jotform.cssgz?3.1.107" rel="nofollow" rel="nofollow" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" target="_blank" href="http://www.jotform.com/css/styles/paper_grey.css" />
    <style type="text/css">
        .form-label{
            width:150px !important;
        }
        .form-label-left{
            width:150px !important;
        }
        .form-line{
            padding:10px;
        }
        .form-label-right{
            width:150px !important;
        }
        .form-all{
            width:275px;
            background:url("http://www.jotform.com/images/styles/style2_bg.jpg") repeat scroll 0% 0% rgb(255, 255, 255);
            color:#616060 !important;
            font-family:Arial;
            font-size:12px;
        }
        /* Injected CSS Code */
    .form-input {
        background-color: white;
    }
        /* Injected CSS Code */
    </style>

    <form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_10681505080" id="10681505080" accept-charset="utf-8">
        <input type="hidden" name="formID" value="10681505080" />
        <div class="form-all">
            <ul class="form-section">
                <li class="form-line" id="id_3">
                    <label class="form-label-left" id="label_3" for="input_3">
                        Name<span class="form-required">*</span>
                    </label>
                    <div id="cid_3" class="form-input">
                        <input type="text" class="form-textbox validate[required]" id="input_3" name="q3_name3" size="20" />
                    </div>
                </li>
                <li class="form-line" id="id_10">
                    <label class="form-label-left" id="label_10" for="input_10"> Click to edit </label>
                    <div id="cid_10" class="form-input">
                        <select class="form-dropdown" style="width:150px" id="input_10" name="q10_clickTo">
                            <option>  </option>
                            <option selected="selected" value="Option 1"> Option 1 </option>
                            <option value="Option 2"> Option 2 </option>
                            <option value="Option 3"> Option 3 </option>
                        </select>
                    </div>
                </li>
                <li class="form-line" id="id_8">
                    <label class="form-label-left" id="label_8" for="input_8">
                        eMail<span class="form-required">*</span>
                    </label>
                    <div id="cid_8" class="form-input">
                        <input type="text" class="form-textbox validate[required]" id="input_8" name="q8_email8" size="20" />
                    </div>
                </li>
                <li class="form-line" id="id_5">
                    <label class="form-label-left" id="label_5" for="input_5">
                        Please help us prevent Spam<span class="form-required">*</span>
                    </label>
                    <div id="cid_5" class="form-input">
                        <div class="form-captcha">
                            <label for="input_5"> <img alt="Captcha - Reload if it's not displayed" id="input_5_captcha" class="form-captcha-image" style="background:url(http://www.jotform.com/images/loader-big.gif) no-repeat center;" src="//www.jotform.com/images/blank.gif" width="150" height="41" /> </label>
                            <div style="white-space:nowrap;">
                                <input type="text" id="input_5" name="captcha" style="width:130px;" />
                                <img src="//www.jotform.com/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_5');" />
                                <input type="hidden" name="captcha_id" id="input_5_captcha_id" value="0">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="form-line" id="id_9">
                    <div id="cid_9" class="form-input-wide">
                        <div style="margin-left:156px" class="form-buttons-wrapper">
                            <button id="input_9" type="submit" class="form-submit-button">
                                awww
                            </button>
                        </div>
                    </div>
                </li>
                <li style="display:none">
                    Should be Empty:
                    <input type="text" name="website" value="" />
                </li>
            </ul>
        </div>
        <input type="hidden" id="simple_spc" name="simple_spc" value="10681505080" />
        <script type="text/javascript">
            document.getElementById("si" + "mple" + "_spc").value = "10681505080-10681505080";
        </script>
    </form>

  • Profile Image

    Answered by Nixor on December 30, 2011 at 01:03 AM

    I followed the instructions as indicated above. However, after I copied the source code and made the required changes, i wasnt able to paste the edited code in the source code text box. Do I need to do it some other way?

  • Profile Image
    JotForm Support

    Answered by idarktech on December 30, 2011 at 01:08 AM

    Hi Nixor,

    Thank you for asking. You don't need to paste it back to where you've copied the code. The code that you've edited is ready for embedding.

    Please let us know if you have further questions. Thank you so much!

  • Profile Image

    Answered by designsby on January 18, 2012 at 05:51 PM

    I can't thank you enough for the amazingly clear answers you give in this forum. My client wanted there to be a "0" value in their drop down menu instead of the blank default option. I'm not a coder and could follow how to fix the code.

    The form will be used for the next 5 weeks for a conference registration and I was also thrilled to find the answer/comment about the ability to upgrade for just a short period of time.

    Thanks!

  • Profile Image

    Answered by bdoodle on April 13, 2016 at 09:23 AM

    In my test form, I specified a default value in each of my drop down menus for panel colors.  Nevertheless, when you actually access the menu on the form, a blank selection remains available.  I tried making the first one a required field as well, but this didn't prevent the blank choice from showing.  I realize that the form will function and I can assume the default value if blank is chosen, but I wanted to ask you to make sure there's no way to remove the blank choice.  Please let me know.

    My test form:

    https://www.jotform.com//?formID=61033982093960

     

  • Profile Image
    JotForm Support

    Answered by david on April 13, 2016 at 11:46 AM

    @bdoodle Since this thread is several years old, I have moved your request to a thread of its own.  I will address your request in the following thread shortly:

    https://www.jotform.com/answers/817480

  • Profile Image

    Answered by bdoodle on April 13, 2016 at 12:45 PM
    Sorry! I already put it into a new thread: " Blank choice appears in drop down menu even when default value selected "
    ...