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 am having a problem viewing my form from my page poperly.

    Asked by okostov on September 13, 2013 at 09:10 PM

    hello.i have a small problem with my appointment form.visually looks good..but as soon as you foget to fill out one-two fileds of the form..scrollbar show up right hand side as a consequence from those "required fileds".

    is there any solution to this problem??i tried with longer form via iframe,tried make the form smaller. at least to change to scrollbar looks..

    p.s.  also on firefox i have both horiz and vertic  scrollbars non stop.

     

    thanks

     

    UPDATE

    ok i found the solution by removing those req field message..now the calendar problem..when you press on calendar the scrollbar shows up.any solution for that?

    Page URL:
    http://milla1.moonfruit.com/membership/4579311453

    problem fill thanks solution
  • Profile Image

    Answered by khrisell on September 13, 2013 at 10:15 PM

    Hello,

    I can see that when you click the Calendar, it is creating a scroll bar.

    Kindly adjust both the the form iframe and the page iframe where the form is pasted

    <iframe scrolling="no" id="page_membership_fsfUHqKEWrd9DBTRGuuVx" src="/cgi-bin/snippet.cgi?todo=as_page;instance=4579311453;num=4;community_id=4011872894" allowtransparency="true" frameborder="0" style="height: 527px; left: 83px; position: absolute; top: 293px; width: 638px; z-index: 11;"></iframe>
    527px height adjust to 700px
    Please check and make sure to also change the form iFrame height value as shown in the picture above.
    Then re-embed the form to your website/page. This should fix the issue.
    Kindly let us know if problem persists after re-embedding your form.
    Thank you. :)
  • Profile Image

    Answered by okostov on September 13, 2013 at 10:39 PM

    you want me to copy this code and paste in my snippet on the web?

    dont quite understand how to do this

  • Profile Image

    Answered by Cesar on September 14, 2013 at 12:02 AM

    Hello, that's correct. Kindly copy the code and edit as adviced in the previous post.

    Copy the code using the following steps:

    Click on Embed Form

    1

    Then click on the iFrame icon.

    2

    From here you can copy the iFrame code.

    3

    Then paste the code to your website, you'll need to look through your websites code to find the desired location where the iframe code.

    5

     

    Kindly try these steps out and verify if the problem persists. Thank you.

  • Profile Image

    Answered by okostov on September 14, 2013 at 09:11 AM

    Thanks cesar.Im using a html snippet for the form so I guess that code goes into the snippet.right?

  • Profile Image

    Answered by Cesar on September 14, 2013 at 09:45 AM

    That's correct, please go ahead and add your iFrame code to the snippet.

    Do let us know if the issue persists. Thank you.

  • Profile Image

    Answered by okostov on September 14, 2013 at 12:24 PM

    :))sorry im dumb. here is  actual  iframe code for the form..if u can make some adjustments and send it back so i can ONLY copy from here and paste into html snipet on my site.can u do that favor ??

    thanks

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotform.us/form/32546559271157" frameborder="0" style="width:100%; height:650px; 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>

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 14, 2013 at 01:46 PM

    @okostov 

    I don't see any scrollbars in your iframe form anymore when the calendar pops-up. However, the calendar is cut off due to a short iframe height and your page height. Here's how to fix it.

    First, increase your iframe height to 615px, you can use the following iframe code.

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/32546559271157" frameborder="0" style="width: 532px; height: 615px; border: none;" scrolling="no"></iframe>

    Second, increase your minimum page  height to 880px, it's under "content" ID style attribute.

    Result would be like this:

  • Profile Image

    Answered by okostov on September 14, 2013 at 02:49 PM

    *sighs" im giving up slowly but sure... please have patience couse im not literate about this.

    this screenshot result that u giving me ..its in some editor right?  my site  is on moonfruit..online site builder and i dont have any codes to edit in some editor.

    the size of the site is now inceased to 880 px  for sure.

    the only thing confuses me there is that iframe code. where do i insert that highlighted code that u giving me??

    do i need to:

    delete the whole iframe code, THE WHOLE thing or only that top part and replace with yours?

    change the height in my form in jotform first?(where is that option in jotform)?

    remember-i dont have html editor and option to edit my site html and save it after.

    the code that u giving me is smaller than my iframe code generated from my form.

    come on....now i feel like in some scifi movie :)) funy but im not educated for this

     

    UPDATE: ive tried and moved the form way on the top to see if that going to show any difference on the calendar,but same results.that lead me to think that the form height is not 700,  im right??

     

     

    Update 2: this is css codes that i have ,dont know if they make any difference.

     

    .form-textbox, .form-textarea, .form-dropdown, .form-list, .form-radio, .form-checkbox {background: white;}
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-sub-label {color: #ffffff !important;}
    .form-validation-error {
    background-color: #ffffff; /* the background */
    border: 1px solid white !important; /* the border */
    -moz-box-shadow:0 0 2px white !important; /* the shadow effect on the border */
    -webkit-box-shadow: 0 0 2px green !important; /* the shadow effect on the border */
    box-shadow: 0 0 2px green !important; /* the shadow effect on the border */
    }
    .form-error-arrow {
    border-color: transparent transparent #2a2a2a;
    }
    .form-error-message {
    background: #ef427d !important;
    }.form-label-left, .form-label-right, .form-label-top{color: white !important;
    }
    .form-button-error {
    color: #ffffff;
    }
    .form-error-message {
    display: none !important;
    }

     

    and my present (not changed)iframe code :

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotform.us/form/32546559271157" frameborder="0" style="width:100%; height:650px; 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>

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 14, 2013 at 04:29 PM

    It's ok, you're almost there and sorry for not clarifying it well. 

    Just replace your present iframe embed code with the following. The following iframe code is shorter than the one you used currently, this is simply because I exlcuded the support script which isn't necessary for your page.

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/32546559271157" frameborder="0" style="width: 532px; height: 615px; border: none;" scrolling="no"></iframe>

    That should fixed the cut off issue. Feel free to message us here anytime you have further questions.

  • Profile Image

    Answered by okostov on September 14, 2013 at 04:53 PM

    Works like a charm ;)) thanks you so much and im sorry for all this long (for me)problem.

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 15, 2013 at 12:23 AM

    No worries.

    Cheers!