How can I embed my form so it fits properly onto my site?

  • Profile Image
    gmehlhoff
    Asked on January 31, 2014 at 05:08 PM

    Hello,

    I'm trying to create a registration page for a conference my organization is putting together. My problem is that my form keeps getting cut off on the right margin even after I change my form's width on Jot Form. Do you guys have any ideas on how to make it fit properly?

     

    My Form: http://form.jotform.us/form/40305398362151

  • Profile Image
    Carina
    Answered on January 31, 2014 at 06:08 PM

    Hello

    What kind of embedding option are you using? Have you tried iframe?

    Thanks

  • Profile Image
    gmehlhoff
    Answered on January 31, 2014 at 06:15 PM

    I just did try the iframe embed with the same results. Any other ideas?

  • Profile Image
    Carina
    Answered on January 31, 2014 at 08:30 PM

    Hello:

    Please try to embed your form through iframe by using this code instead:


    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/40306823772958" frameborder="0" style="width:536px; height:1697px; border:none;" scrolling="no"></iframe>

     

    I changed the width from the original "100%" value to "535px". I also realized that the form image header is 635 px, my suggestion would be to resize the image to 535px, because otherwise resizing the iframe to 635px would cause the form to be out of alignment with the rest of the site:

    And not resizing the image would make the form to show properly, but the header to show cropped.

    I also recommend you to inject the following css code:

     

    #content {
    padding-left: 0;
    width: 553px;
    }

    .JotFormIFrame {
    width: 553px;
    }

    Please check our guide on how to inject custom css for more details on this subject.

    Kindly let us know if you need more assistance.

     

  • Profile Image
    gmehlhoff
    Answered on February 03, 2014 at 11:01 AM

    Thank you! The form fits perfectly now!

     

    Grant