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

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

<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 href="http://cdn.jotfor.ms/static/formCss.css?3.2.812" rel="stylesheet" type="text/css" />
<link type="text/css" media="print" rel="stylesheet" href="http://cdn.jotfor.ms/css/printForm.css?3.2.812" />
<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>

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

* 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.

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!

Please try to set a Form Width to 990 pixels.

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

Thank you.