I created a form and the words in the questions appear in a long column, rather than across the top of the form.

  • Profile Image
    DrCynthia
    Asked on March 31, 2014 at 05:06 PM

    I created a form and the words in the questions appear in a long column, rather than across the top of the form. Please help me. when i created the form it looks correct on your website, but the preview copy and the uploaded form look weird.

    thanks so much!

  • Profile Image
    jonathan
    Answered on March 31, 2014 at 06:05 PM

    Hi,

    Please try increasing the width (from 120px to 320px) for the labels in the CSS code you have injected on the form.

    This code:

    .form-label-left, .form-label-top, .form-label-right{

    font-family: Arial, Verdana;

    text-shadow: 2px 2px 2px #ccc;

    display: block;

    float: left;

    font-weight: bold;

    margin-right:10px;

    width: 320px;

    line-height: 25px;

    font-size: 15px;

    }

     

    I tested this on the form and it appears like this

    Hope this help. Inform us if you need further assistance.

    Thanks!

  • Profile Image
    DrCynthia
    Answered on March 31, 2014 at 07:40 PM
    Thanks so much! This worked. One more thing. When I opened the form on my
    website in Safari, part of the submit button is cut off.
    Thanks!
    I really appreciate your help!
    Cynthia
    ...
  • Profile Image
    DrCynthia
    Answered on March 31, 2014 at 07:40 PM
    Oops, I forgot to all the screen shot in the email I just sent.
    Thanks so much! This worked. One more thing. When I opened the form on my
    website in Safari, part of the submit button is cut off.
    Thanks!
    I really appreciate your help!
    Cynthia
    ...
  • Profile Image
    Cesar
    Answered on March 31, 2014 at 10:32 PM

    Please attempt to re-embedd the form utilizing the iFrame Method. If the issue perists after doing so, it may be the content area of your webpage may no t be long enought to display the form. 

    Do let us know if the issue persists after embedding the form using the iFrame Method. Thank you.

     

    Related Article:

    Getting-the-Form-iFrame-Code

  • Profile Image
    DrCynthia
    Answered on April 01, 2014 at 03:10 PM
    Hello,
    I tried the iFrame Method and the submit button is still cut off, even after
    I made the form longer. Here is the screen shot.
    Thanks so much!
    Cynthia
    ...
  • Profile Image
    Mike_T
    Answered on April 01, 2014 at 05:16 PM

    Please try to remove an auto-height script that is following the iFrame. Then, you will be able to set a custom height for the iFrame that is holding the form.

    Example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/40896026833864" frameborder="0" style="width:100%; height:2400px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Thank you.