Embeded form is cutoff

  • Profile Image
    bibo1989
    Asked 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
    Chriistian
    Answered 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
    bibo1989
    Answered 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
    Boris
    Answered 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.