Why does the form not look right in Internet Explorer

  • Profile Image
    farris
    Asked on February 18, 2011 at 01:02 PM

    I created a form for a friends website. And copied the full html code into my webpage. It looks great on all browsers except for IE versions... It is all discombobulated if you will. Here is the code from your program builder that I dropped in. Please tell me what i need to do to solve the problem. Every time I try to fix it.. it just gets worse. The form works as it should as far as I know, just looks bad.

    <script src="//cdn.jotfor.ms/jotform.jgz?3.1.102" type="text/javascript"></script>

    <script type="text/javascript">

    JotForm.init();

    </script>

    <link target="_blank" href="http://cdn.jotfor.ms/jotform.cssgz?3.1.102" rel="nofollow noopener" rel="stylesheet" type="text/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:690px;

    color:#000 !important;

    font-family:Verdana;

    font-size:12px;

    }

    </style>

     

    <form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_10391557396" id="10391557396" accept-charset="utf-8">

    <input type="hidden" name="formID" value="10391557396" />

    <div class="form-all">

    <ul class="form-section">

    <li class="form-line form-line-column" id="id_1">

    <label class="form-label-left" id="label_1" for="input_1"> Name: </label>

    <div id="cid_1" class="form-input">

    <input type="text" class="form-textbox" id="input_1" name="q1_name" size="30" />

    </div>

    </li>

    <li class="form-line form-line-column" id="id_5">

    <label class="form-label-left" id="label_5" for="input_5"> Phone: </label>

    <div id="cid_5" class="form-input">

    <input type="text" class="form-textbox" id="input_5" name="q5_phone" size="30" />

    </div>

    </li>

    <li class="form-line form-line-column form-line-column-clear" id="id_3">

    <label class="form-label-left" id="label_3" for="input_3"> Email: </label>

    <div id="cid_3" class="form-input">

    <input type="text" class="form-textbox" id="input_3" name="q3_email" size="30" />

    </div>

    </li>

    <li class="form-line form-line-column form-line-column-clear" id="id_6">

    <label class="form-label-left" id="label_6" for="input_6"> Message: </label>

    <div id="cid_6" class="form-input">

    <textarea id="input_6" class="form-textarea" name="q6_message" cols="22" rows="20"></textarea>

    </div>

    </li>

    <li class="form-line" id="id_2">

    <div id="cid_2" class="form-input-wide">

    <div style="margin-left:156px" class="form-buttons-wrapper">

    <button id="input_2" type="submit" class="form-submit-button">

    Submit

    </button>

    &nbsp;

    <button id="input_reset_2" type="reset" class="form-submit-reset">

    Clear Form

    </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="10391557396" />

    <script type="text/javascript">

    document.getElementById("si" + "mple" + "_spc").value = "10391557396-10391557396";

    </script>

    </form>

  • Profile Image
    aytekin
    Answered on February 22, 2011 at 09:01 AM

    Instead of full form source code, can you use the one-line embed code?

    Here is how you can get it. Open your form on the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Embed Form"
    3. Click on "Embed" button and copy the code provided.

  • Profile Image
    farris
    Answered on February 22, 2011 at 09:08 AM

    thanks. I use the embedded Form code for another site...but wanted to build this one on the actual page of the website. 

    Have you experience the IE problem before?

  • Profile Image
    aytekin
    Answered on February 22, 2011 at 09:03 PM

    You are missing major parts of the code. For example, you do not have the CSS include for the form. That can cause all kinds of visual problems.

    If you cannot copy the form code without losing some parts, then you should use the iframe code.

  • Profile Image
    farris
    Answered on February 23, 2011 at 07:32 AM

    thanks for your help... it is odd though, as I copied it directly from the window in jotform... I will take a look at what you said I was missing and compare. Thanks again!. I am relatively new to web design and I am constantly learning something new.

  • Profile Image
    farris
    Answered on February 23, 2011 at 07:38 AM

    Okay... I remember removing that and my problems got better.... When it was in, the form was really all askew. I will put it back in... but that is why it isn't there.

  • Profile Image
    farris
    Answered on February 23, 2011 at 07:43 AM

    The picture that is up there is the picture that I took with that full code. without it, it actually was somewhat straight. 

  • Profile Image
    aytekin
    Answered on February 24, 2011 at 03:13 AM

    If you would like us to help you fix it, you should first have the full unchanged form code on the site. Then we can suggest fixes. The bullets are happening because CSS is missing.

    You can also try the iframe code. That should work without any problems.

    Here is how you can get it. Open your form on the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Embed Form"
    3. Click on "iFrame".

  • Profile Image
    farris
    Answered on February 24, 2011 at 07:38 AM

    Thanks for your help. I appreciate your patience. I find it odd that things work so well in all browsers but IEs... wish they would just do away with it! ;-)

  • Profile Image
    aytekin
    Answered on February 25, 2011 at 12:34 PM

    That's actually our fault. We all use Macs. So, even though we test everything on IE as much as possible, when you do not use it daily, you do not find some of the problems. :)

  • Profile Image
    farris
    Answered on February 25, 2011 at 12:40 PM

    Solution: Pass a Federal law mandating all people use macs! ;-)