Embedded form width and size issue

My form width stretches according to the window width. How do I pre-define a max form width, so it wouldn't stretch endlessly based on the window width? However, it shall allow the form to scale down when the window is smaller or on cell phone.

Also, when a form is embedded on my website, it pops up the form window when someone clicks the link. The pop up window is not in a right size (only shows the form partially). Is there is something controlled by Jotform?

Hi Michael,

Thanks for reaching out to Jotform Support. To help you resolve the issue with the pop-up window size showing only part of your form when embedded on your website, share the URL of the webpage where the form is embedded. This will allow us to thoroughly investigate the problem and provide a tailored solution.

In the meantime, here are some suggestions that might help:

• Check the pop-up window settings on your website: The size of the pop-up window is usually controlled by the script or code on your website that triggers it. Adjust the width and height parameters in that code to ensure the window is large enough to display the entire form.
• Use iframe embed instead of pop-up: Embedding your form directly on the webpage using an iframe can help avoid pop-up sizing issues. You can set a max-width on the iframe to prevent the form from stretching too wide while allowing it to scale down responsively on smaller screens.
• Enable scrolling in the pop-up window: If adjusting the window size is not feasible, enabling scrolling within the pop-up can allow users to access the full form even if the window is smaller.
• Review your website’s CSS and container elements: Sometimes, the container or parent elements on your webpage may have width restrictions that affect how the form displays. Ensure these containers have sufficient width or adjust their CSS to accommodate the form size.

Looking forward to your reply so we can assist you further.

Hello,
Here is a sample page, where you can click on "Request Information" button to pop up the form window:
https://ez90xj-ps.myshopify.com/products/elisa-kits-rat-11-beta-hydroxysteroid-dehydrogenase-type-2-hsd11b2-elisa-kit-cat-eku02005
The pop up window width seems to fine, but how can I define the height?
Also, the top area is too big (above "Request Information"), how can I reduce it?
Regards,
Michael
...

Hi Michael,

The pop-up window size is controlled by the parameters in the window.open function within your embed code. Here’s how you can adjust the pop-up window size:

• Width: Change the value after width= to set the desired width in pixels.
• Height: Change the value after height= to set the desired height in pixels.

For example, if you want the pop-up to be 800 pixels wide and 600 pixels tall, update the code like this:

<a href="javascriptDISABLED:void( window.open( 'https://formjotform.pro-bark.biz/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=800, height=600' ) ) "> Form Title goes here </a>

Adjusting these values will help you control how much of the form is visible when the pop-up opens. If you want to reduce the extra space above the button on your page, you might also want to check your webpage’s CSS for any padding or margin applied around the button or its container and adjust accordingly.

Let us know if you need any further assistance.