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

    Placing form within div with a fixed height

    Asked by Peter on September 07, 2011 at 05:15 AM

    I'm a total css/html newbie. How do I go about this?

    I would greatly appreciate any assistance.

  • Profile Image
    JotForm Support

    Answered by abajan on September 07, 2011 at 06:54 AM

    Hi Peter kvvklfmvffvfv

    Thanks for asking. In order for us to provide the most appropriate solution, it is preferable for us to know the URL of the page within which the form is to be placed, so that we can examine the source of the page. However, generally speaking, embedding the form via an iFrame and setting the value of the scrolling attribute to either yes or auto should work.

    Do the following procedure:

    1. Go to www.jotform.com/myforms and login to your account (assuming you're not already logged in)

    2. Click the form in question and then click its Edit button

    3. While on the Setup & Embed tab, click Embed Form

    4. When the Embed Form Wizard loads, click iFrame and copy the code provided

    5. Open a plain text editor like Notepad or Notepad++ and paste the code you copied into a new document

    6. Change the part in the code that states scrolling="no" to scrolling="yes" or scrolling="auto"

    7. Select all of the code, copy and paste it into the source of your web page at the position at which you want it to appear and save the change

    That's it. Please let us know if you need additional help with this. Our team is always willing to help users get the most out of their forms.

    Thanks.


    ~ Wayne

  • Profile Image

    Answered by pebo on September 07, 2011 at 08:13 AM

    My problem was that the page was not fully loading the form upon the first load, and then after a few refreshes it would finally display correctly. This was why I wanted to try placing the form into a div with a fixed height, but the iFrame code you suggested seems to be working perfectly. I will test this for a few days, but so far it is looking good.

    Thanks for your help Wayne!

  • Profile Image
    JotForm Support

    Answered by abajan on September 07, 2011 at 08:19 AM

    No problem, Peter.

    Good grief, I just realized I forgot to remove the "kvvklfmvffvfv" after your name in my last reply! LOL (I was just messing around with the keyboard or something.)

    Anyway, please let us know if you experience any further problems with this.


    ~ Wayne

  • Profile Image

    Answered by lindar on September 29, 2011 at 05:10 PM

    Hi Wayne,

    If I use an iFrame form that has multiple 'pages' (using the page break feature), is there a way to adjust the scrolling in some way, so that the page height for the rest of the html page won't automatically extend to the full length of the iFrame (which seems like it's set to the length of the form if it weren't divided into 'pages' which are really just show/hides of parts of the form, I know :)?

    The sample form in question is here - http://www.lawyersaidservice.com/taxpayer-ID-EIN/EIN-dummy-order.php

    Thanks,

    -Cathie R.

  • Profile Image
    JotForm Support

    Answered by abajan on September 29, 2011 at 10:01 PM

    Hi Cathie

    Thanks for asking. The iFrame height's value of 4222px (pixels) is responsible for the tremendous amount of space "under" the form. I placed "under" in quotes because your observation that the iFrame appears to be set to the length of the form were there no page breaks, is correct. (The rest of the form is actually occupying that space but it's being hidden with JavaScript. At least that's the way I understand it.)

    Anyway, place the this code in the head of your web page and alter the iFrame to this. (You can change each instance of 25em in the CSS to a higher or lower value to suit your requirements.)

    Alternatively, to get rid of the form's scrollbars and have the length of the whole web page expand and contract according to which page of the form happens to be on the screen, consider replacing the iFrame with the form's full source.

    Should you need further assistance with this or any other aspect of our product, do let us know. Our team is always ready to help users with their forms.

    Cheers


    ~ Wayne

  • Profile Image

    Answered by lindar on September 30, 2011 at 10:07 AM

    Hi Wayne,

    Great answers! I really appreciate the custom solution. It works great... but...

    There are lots of show/hide-field conditionals on every page of our form, that result in a scrollbar appearing in the iFrame (it's OK just not super elegant :). Or if I adjust the "em's" in the head/CSS to leave extra white space below the visible form to allow for all possible conditional field expansion, well.. then there's that extra white space that isn't super elegant either.

    Incidentally, it seems we are stuck w/the iFrame embed method due to some random stability issues that I finally had to peg on conflicting Javascript (hence the iFrame for less JS interaction on our page); and we are stuck w/link embed rather than full-source embed b/c the forms will eventually be secure, and I understood that they must remain linked to the secure JotForm server to be secure. (Definitely correct me if I'm wrong about those conclusions.)

    I realize this is pretty much demanding the impossible from an already incredible tool but -- do you know of any further workarounds that could adjust automatically for the expanding/collapsing conditional fields? If not, it's ok, as your solution above already puts the forms in a much happier place, for which I thank you!

    -Cathie R.

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 04, 2011 at 04:03 AM

    If you are using the iframe code you can try increasing the height of the iframe manually. If you increase it much enough you should not see the scrolls.