Embedded form appears left-aligned

  • SunbridgeInstitute
    Asked on December 16, 2015 at 11:12 AM

    The instructions say that I should look up the form width and height structures before embedding it. Where can I find this information?

    Furthermore, with my particular form, I am finding that the whole frame is left-indented. How can I change this so that this section of my form is a little more seamless?

    Thank you!

  • Ben
    Replied on December 16, 2015 at 12:30 PM

    We can only assist with one issue / question per thread, but looking at both it seems that you are actually having issues with the iframe embed code and looking to fix it.

    Now there are many things that can be present on your form after embedding it, so it is best for us to see the form as well to be able to properly assist you with the same.

    In regards to the width and height. This is only needed if the script part of your iframe is not working properly and you want to hard code the same - with which we can help.

    You can however check our guide on widths here: The Importance of Form Widths

    Now, once we see the embedded form we would be able to see what is needed to make it more centered as well as how much space it has on both side.

  • SunbridgeInstitute
    Replied on December 16, 2015 at 1:18 PM

    Thank you for your help. Here is the form that I'm trying to embed:

    http://www.jotform.com//?formID=53493806938974

  • Boris
    Replied on December 16, 2015 at 1:53 PM

    When it comes to helping you with embedding your forms to your website, please provide the link to the page where the form is being embedded on, so that we can see right there what may be the issue with the form.

    Now, looking at your form 53493806938974, I do see that it is left-aligned. The reason for this is its custom CSS, which is setting the left margin to be 10 pixels - so the form will always start 10 pixels away from the left border of the window or available space.

    If you remove this custom CSS from your form, the form will once again be displayed at its default centered position. To remove the above mentioned Custom CSS, please first open your form in the Designer:

    Embedded form appears left aligned Image 1 Screenshot 30

    Once in the Designer, please switch to the Custom CSS tab, and remove these two parts of teh code, which are also highlighted in the image below:

    .form-all {
        margin-left : -30px;
    }

    and

    .form-all {
        margin-left : 10px;
    }

    Embedded form appears left aligned Image 2 Screenshot 41

    After removing the custom CSS code that was forcing it to be left-aligned, your form will be centered.

    If you are still having problems with embedding the form afterwards, please do let us know the link to the page where you are trying to embed it as well, and please do open a new support thread about embedding it - we can support with one question per thread.

    Thank you.