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 Do I Remove blank option on my drop-down box?

    Asked by norm27 on March 16, 2011 at 07:09 AM
  • Profile Image
    JotForm Support

    Answered by NeilVicente on March 16, 2011 at 06:19 PM

    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 & Share > 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 noopener" 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>