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

    Embeded form is cutoff

    Asked by bibo1989 on October 16, 2015 at 04:44 AM

    Hi, I have embedded the same form, (it's called handyman contact us in my account) but when I copy the source code, I click the little preview button, the form doesn't fully show, the message tab with the submit button is cut off.

     

    I have included a screenshot

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 16, 2015 at 04:47 AM

    Hi,

     

    Can you try to re-embed the form using the iFrame embed method? You can get the iFrame embed code of your form by following the instruction provided in the screenshot below.

     

    If the issue still persists, can you provide to us the exact URL where you have embedded the form so we can further check the issue?

     

    We will wait for your response.
    Regards.

  • Profile Image

    Answered by bibo1989 on October 17, 2015 at 12:44 AM

    Hi, I tried to embed it in iFrame, but it's still the same, especially when I click preview in iFrame mode on jot form website not on the site I'm putting it in

  • Profile Image
    JotForm Support

    Answered by Boris on October 17, 2015 at 09:33 AM

    I am not sure if I understood the last part. Are you saying that the form is cut off for you even when trying to use the Preview button inside our Form Builder? If so, the Preview shows correctly on my end:

    Regarding the form being cut off when it is embedded, I believe that this is caused by the form's CSS. Due to special design in this particular form, the form is unable to correctly calculate its height - the form usually resizes itself automatically when it is embedded. Please remove the position:absolute; style from li#id_7 element, and place it instead directly on the Submit button.

    In other words, you should replace this part of your CSS:

    li#id_7 {
        position : absolute;
        margin-top : 120px;
        margin-left : 100px;
    }
    button#input_7 {
        width : 300px;
        background : black !important;
        box-shadow : none;
        border : none;
        text-shadow : none;
        color : white;
    }

    With this CSS:

    li#id_7 {
        margin-top : 120px;
        margin-left : 100px;
    }
    button#input_7 {
        position : absolute;
        margin-top : -20px;
        width : 300px;
        background : black !important;
        box-shadow : none;
        border : none;
        text-shadow : none;
        color : white;
    }

    You can change it by opening the Designer (Setup & Embed > Designer):

    And then editing the code in the textbox under the CSS tab:

    After making this change, your form will be able to correctly calculate its height, and it should display in full height when embedded with the iFrame embed method. Please let us know how it goes.