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

    I need a lot of help with a form, please!

    Asked by henhen89 on March 09, 2014 at 04:52 PM

    My current form can be seen here: www.officesearchuk.co.uk

    I need to make the following changes to this form;

    * I need to add an additional ''search location'' field box

    * I need to make this form landscape BUT it must not be wider than 990px!

    * The form must be in the following order: name, company, location, email, telephone, search

    If someone could help me I would really appreciate it! My current code is below

  • Profile Image

    Answered by henhen89 on March 09, 2014 at 04:57 PM

    <script src="//cdn.jotfor.ms/static/jotform.js?3.2.812" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          $('input_1').hint('Name');
          $('input_3').hint('Telephone');
          $('input_4').hint('Email');
          $('input_5').hint('Company');
          JotForm.highlightInputs = false;
       });
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/static/formCss.css?3.2.812" rel="nofollow" rel="stylesheet" type="text/css" />
    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="http://cdn.jotfor.ms/css/printForm.css?3.2.812" rel="nofollow" />
    <style type="text/css">
        .form-label{
            width:150px !important;
        }
        .form-label-left{
            width:150px !important;
        }
        .form-line{
            padding-top:5px;
            padding-bottom:5px;
        }
        .form-label-right{
            width:150px !important;
        }
        .form-all{
            width:300px;
            background:transparent;
            color:#004488 !important;
            font-family:'Lucida Grande';
            font-size:14px;
        }
        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
            color:#004488;
        }

        /* Injected CSS Code */
    .form-all {
    background-color: transparent !important;
    }
    .form-label-top {
    display: none !important;
    }
    /*---INPUT----*/
    .form-all input {
    border-top: 1px solid #3a6c9a;
    border-right: 1px solid #3a6c9a;
    border-bottom: 1px solid #3a6c9a;
    border-left: 1px solid #3a6c9a;
    background-image: url(../img/input-blue-bg.png) 0 top repeat-x;
    background: url(../img/input-blue-bg.png) 0 top repeat-x,
    url(../img/input-blue-bg.png) left 0 repeat-y,
    url(../img/input-blue-bg.png) left top no-repeat,
    url(../img/input-blue-bg.png) left top no-repeat;
    background-color: #ffffff;
    color: #004488 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 251px;
    height: 34px;
    padding: 0 10px;
    }
    ::-webkit-input-placeholder {
    color:#FFF;
    }
    :-moz-placeholder {
    color:#FFF;
    }
    .form-submit-button {
    background-color: #76beec;
    color: #ffffff;
    font-family: din-web-jetblue, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    width: 90px;
    height: 35px;
    border: 0;
    margin: 0;
    -moz-border-radius: 15px;
    border-radius: 5px;
    }
    .form-line-error {
    background: none !important;
    }
        /* Injected CSS Code */
    </style>

    <form class="jotform-form" action="http://submit.jotformeu.com/submit/40564369846365/" method="post" name="form_40564369846365" id="40564369846365" accept-charset="utf-8">
      <input type="hidden" name="formID" value="40564369846365" />
      <div class="form-all">
        <ul class="form-section">
          <li class="form-line" id="id_1">
            <label class="form-label-top" id="label_1" for="input_1"> Name </label>
            <div id="cid_1" class="form-input-wide">
              <input type="text" class=" form-textbox" data-type="input-textbox" id="input_1" name="q1_name" size="20" value="" />
            </div>
          </li>
          <li class="form-line" id="id_3">
            <label class="form-label-top" id="label_3" for="input_3"> Telephone </label>
            <div id="cid_3" class="form-input-wide">
              <input type="text" class=" form-textbox" data-type="input-textbox" id="input_3" name="q3_telephone" size="20" value="" />
            </div>
          </li>
          <li class="form-line" id="id_4">
            <label class="form-label-top" id="label_4" for="input_4"> Email </label>
            <div id="cid_4" class="form-input-wide">
              <input type="text" class=" form-textbox validate[Email]" data-type="input-textbox" id="input_4" name="q4_email" size="20" value="" />
            </div>
          </li>
          <li class="form-line" id="id_5">
            <label class="form-label-top" id="label_5" for="input_5"> Company </label>
            <div id="cid_5" class="form-input-wide">
              <input type="text" class=" form-textbox" data-type="input-textbox" id="input_5" name="q5_company" size="20" value="" />
            </div>
          </li>
          <li class="form-line" id="id_6">
            <div id="cid_6" class="form-input-wide">
              <div style="text-align:left" class="form-buttons-wrapper">
                <button id="input_6" type="submit" class="form-submit-button">
                  Search
                </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="40564369846365" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "40564369846365-40564369846365";
      </script>
    </form>

  • Profile Image

    Answered by henhen89 on March 09, 2014 at 04:58 PM

    My code looks very long can we shorten it to make my form load faster???

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 09, 2014 at 06:51 PM

    * I need to add an additional ''search location'' field box

    --- You can do that in the form builder. Just drag the fields from the form tools to your form.

    * I need to make this form landscape BUT it must not be wider than 990px!

    --- Shrink the fields to align them on the same line. (Right click > Shrink). You can set the form width under Form Style > Form Width. See visual guide below:

    * The form must be in the following order: name, company, location, email, telephone, search

    --- Just drag the fields to position them. You can also use "Manage Multiple Fields" so you can align them conveniently.

    * My code looks very long can we shorten it to make my form load faster???

    --- Forms are actually fast in terms of browser loading. The code you provided here is a full source code, there are available short embed codes on the embed wizard like script embed, iframe and many others. Check it again. Thanks!

    May we suggest you next time to post each unrelated questions to a separate thread so we will not be jumping to different topics on a single thread. Thanks for your understanding.

  • Profile Image

    Answered by henhen89 on March 10, 2014 at 03:58 PM

    I have already pressed shrink, that is why I am asking for help as the size of the forms are not getting any smaller, I think this needs to be done via the code???

     

    You see how it is going off my whole screen?? I need this to fit in under about 990px!

     

  • Profile Image
    JotForm Support

    Answered by Mike_T on March 10, 2014 at 06:08 PM

    Please try to set a Form Width to 990 pixels.

    Then, decrease the width of your inputs to 130 pixels for example:

    Thank you.