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

    Embed a Form on a Zenfolio page

    Asked by terrimillerphotos on January 19, 2016 at 06:09 PM

    I'm trying to embed a form on a page at Zenfolio. In the past I have used the iframe code and adjusted the width and height to accommodate both computers and mobile devices. However, that tweak isn't working.... What's my next step?

    Thank You

    Terri

    Page URL:
    http://terrimillerphotos.zenfolio.com/photography-sign-up

    embed a form zenfolio form on a
  • Profile Image
    JotForm Founder

    Answered by aytekin on January 19, 2016 at 08:03 PM

    Change this:

    width:100%;

    to something else:

    width:700px;

  • Profile Image

    Answered by terrimillerphotos on January 19, 2016 at 09:14 PM

    I have tried that. It's worked before, but not this time. Below is what it looks like with the width set at 700px or at 900 px. If I have to, I'll just link back to the form on the JotForm site, but I'd prefer to have it on my branded page on my website.

    http://terrimillerphotos.zenfolio.com/photography-sign-up

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 20, 2016 at 02:44 AM

    Hi,

     

    I checked your website using the developer option in chrome and it looks like the iframe doesn't have a width in the styles. The width becomes 300px because there is no fixed width in the styles of the iframe.

    When I added the 700px in the developer mode, I can see the full width of the form in the website.

     

    Do inform us if you need further assistance,
    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 20, 2016 at 02:49 AM

    Hello again,

     

    Just to clarify, you will change the width in the iFrame embed code.

    Here's a snippet of an iFrame embed code:

     <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60190942026955" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> 

    The highlighted part of the code is what should be edited from 100% to 700px

     

    Cheers.

  • Profile Image
    JotForm Designer

    Answered by omer on January 20, 2016 at 04:18 AM

    Hi terrimillerphotos,

    There are two parent elements of iframe.

    The first one has "zb-richtext largeimage" classes and its style contains "width: 300px" property. The width value should be 100% of this element.

    The second parent element with "zb-embed" has absolute positioning, so its width, left and top values should be declared.

    And please leave iframe width as 100%.

     

    So final styles should be like this:

    zb-richtext largeimage => width: 100%;

    zb-embed => left: 0; width: 100%;

    iframe => width: 100%;

     

    If your problem still stands, please let us know.