Embeded form is cutoff

  • bibo1989
    Asked on October 16, 2015 at 4: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 screenshotEmbeded form is cutoff Image 1 Screenshot 20

  • Chriistian Jotform Support
    Replied on October 16, 2015 at 4: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.

    Embeded form is cutoff Image 1 Screenshot 20

     

    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.

  • bibo1989
    Replied 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

  • Boris
    Replied on October 17, 2015 at 9: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:

    Embeded form is cutoff Image 1 Screenshot 40

    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):

    Embeded form is cutoff Image 2 Screenshot 51

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

    Embeded form is cutoff Image 3 Screenshot 62

    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.