Form not rendering properly when embedded

  • Profile Image
    redtees
    Asked on March 24, 2015 at 07:23 PM

    Hello! I have embedded a form into a web page and cannot get the form to render properly. The field labels are above the fields and I've set them to be to the left. Also, I cannot figure out how to adjust the height of the form, tho if the labels were to the left and not above, the form wouldn't hang below my background banner. Here's the source code I've added to my page:  <script type="text/javascript" src="//form.jotform.us/jsform/50744246401145"></script>

     

    Can you help me figure out why this isn't rendering properly?

  • Profile Image
    Charlie
    Answered on March 25, 2015 at 12:19 AM

    Hi,

    I see that you enable the option "Make this form responsive", this changes the layout of your form to adjust depending on the display of the device where it is being viewed at.

    Could you try re-embedding the form using the iFrame code instead? Here's how you can get that code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. We're using the iFrame to prevent the form to inherit the styling of the website and have it fixed.

    For the height of the form, you can adjust it on the iFrame code itself OR you could also use a custom CSS code. Here's an example code that you can use:

    .form-all {

    height: 700px !important;

    }

    You can adjust the height depending on your preferred one, add this code inside your Form Designer->CSS tab.

     

    I hope this helps. Do let us know if this works.

    Kind regards