Embedded form in Zenfolio is very thin

  • Profile Image
    DavidAtkins
    Asked on July 09, 2020 at 12:32 AM

    This doesn't work for me. The form is always super thin on a desktop, like its setup for a mobile. I can't find a fix and would love some support on this!



    This is a re-post of a comment on How to embed a form to Zenfolio website?

  • Profile Image
    Kenneth_C
    Answered on July 09, 2020 at 03:34 AM

    Thank you for reaching support,

    Are you referring to this form?

    1594277668j1.png

    If you wish to widen it then I have made customizations and this is how it looks:

    1594279973y1.png

    If this is acceptable, please insert this code into your Inject Custom CSS area: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-all {

        max-width: 1200px !important;

    }

    I hope that helps.

    Best.

  • Profile Image
    David
    Answered on July 09, 2020 at 04:05 AM

    Hi mate,

    Thank you for the response.

    Unfortunately that’s not the form I’m talking about, I don’t recognise the one you shared.

    The one I’m talking about is a jotform I have created for my Zenfolio website.

    I’ve designed the form and copied the code from the zenfolio 3rd party platform link and it always shows up super thin on my webpage when it’s viewed from a desktop. Almost like it set for mobile viewing across all devices.

    I’ve also tried altering the width of the form and no matter what width I choose it always shows up super thin.

    Here is a link to the published form on my website - scroll down past the text and images and you’ll see the form (that’s not even close to page width).

    www.thenocturnalphotographer.com/workshops

    Any assistance would be awesome.

    Thank you, David.

  • Profile Image
    DavidAtkins
    Answered on July 09, 2020 at 04:28 AM
    Hi mate,
    Thank you for the response.
    Unfortunately that’s not the form I’m talking about, I don’t recognise the one you shared.
    The one I’m talking about is a jotform I have created for my Zenfolio website.
    I’ve designed the form and copied the code from the zenfolio 3rd party platform link and it always shows up super thin on my webpage when it’s viewed from a desktop. Almost like it set for mobile viewing across all devices.
    I’ve also tried altering the width of the form and no matter what width I choose it always shows up super thin.
    Here is a link to the published form on my website - scroll down past the text and images and you’ll see the form (that’s not even close to page width).
    https://www.thenocturnalphotographer.com/workshops
    Any assistance would be awesome.
    Thank you, David.
    ...
  • Profile Image
    Vick_W
    Answered on July 09, 2020 at 06:50 AM

    Hi David,

    Thanks for writing back to us.

    We do have embed code available for Zenfolio platform. You can find it in the Publish section of your form in the form builder.

    1594291750screenshot.jpg.png

    Click on it and you'll see the code that you can use for Zenfolio.

    Let us know if you need further assistance.

    Thanks.

  • Profile Image
    DavidAtkins
    Answered on July 09, 2020 at 07:11 PM

    I know you do. And that’s what I’m using but unfortunately this code does not work-

    i copy that code, add it to my site whilst following the steps exactly and the form does not show up on a desktop/pc view as it should. 

    did you look at the link I added???


    thank you, David. 

  • Profile Image
    Vick_W
    Answered on July 09, 2020 at 10:46 PM

    Hi David,

    Thanks for writing back to us.

    Yes, I've seen the form on your website. Please try following embed code and let us know if this solves the issue. 

    <iframe

          id="JotFormIFrame-92522459951868"

          title="Group Booking Form / Further Information"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.co/92522459951868"

          frameborder="0"

          style="

          min-width: 100%;

          height:539px;

          border:none;"

          scrolling="no"

        >

        </iframe>

    Looking forward to your reply.

    Thanks.

  • Profile Image
    DavidAtkins
    Answered on July 10, 2020 at 02:19 AM

    Hey mate,

    Thanks for trying - Sorry though it does not work. The form stays the same width but is now even shorter and so it doesn't show all of the fields of the form.

    Any other suggestions? 

    It really seems to be as though the form is showing up on all platforms in a mobile view. Like I said before it looks great on a mobile device but terrible on a computer view.


    Cheers,

    David

  • Profile Image
    Vick_W
    Answered on July 10, 2020 at 03:52 AM

    Hi David,

    I'm looking into this for you and will get back to you shortly.

    Thanks.

  • Profile Image
    Vick_W
    Answered on July 10, 2020 at 04:03 AM

    Hi David,

    Thanks for the wait.

    Please replace min-width: 100%; with min-width: 260%; in the Iframe code. This will increase the width of the form. But it is being forced to go on the right side. After increasing the width please check on your website backend if you can adjust the iframe module.

    Looking forward to your reply.

    Thanks.

  • Profile Image
    DavidAtkins
    Answered on July 11, 2020 at 10:05 PM

    Hey Vick,

    Excuse the delay but I've only just got round to trying this.

    What happens when I change the min width as per your instructions above - 

    - The Form now looks great on the website! But....

    - It now looks terrible when viewing from a mobile/cell phone unfortunately. It does not fit the page.


    Any idea's as to why mate?

  • Profile Image
    Jimmy_D
    Answered on July 11, 2020 at 11:41 PM

    Hi!

    Can you please provide us with the URL of the page where the form is embedded? 

    We would like to take a deeper look. 

    Thank you

  • Profile Image
    DavidAtkins
    Answered on July 12, 2020 at 12:36 AM

    Hey mate. 

    sure, I have two pages, each with a separate form that both suffer the same problem-


    https://www.thenocturnalphotographer.com/workshops

    and

    https://www.thenocturnalphotographer.com/prints

    thank you!

  • Profile Image
    Vanessa_T
    Answered on July 12, 2020 at 02:35 AM

    Please note that when a form is embedded, it automatically takes the entire container's width, and that is controlled by min-width: 100%. Please do not change this one.

    Instead, upon checking both of your pages, I can see that the container that holds the JotForms are restricted to 300px.

    The one on the square box is the JotForm embed code, while anything outside that is from your website.

    159453570200944.jpg

    Kindly adjust the space within your Zenfolio site and just use the default embed code from JotForm.

    How-to-embed-a-form-to-Zenfolio-website