Embedded form in Zenfolio is very thin

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!

Thank you for reaching support,

Are you referring to this form?

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

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.

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.

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.
...

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.

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

Let us know if you need further assistance.

Thanks.

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. 

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"

      onDISABLEDload="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.

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

Hi David,

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

Thanks.

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.

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?

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

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!

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.

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