What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form not rendering properly when embedded

    Asked by redtees 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?

    Page URL:
    feedbackforme.com

    when embedded Properly JotForm source height jsform
  • Profile Image
    JotForm Support

    Answered by Charlie 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