Fields and buttons fill entire form-width when embedded

I'm experiencing problems with some of my forms whose elements change alignment when embedded in an iFrame on my Weebly page. (I also tried embedding them in the Weebly JotForm app. But, that didn't seem to make any difference.)

On some forms, the fields and buttons expand to fill the entire width of the form, regardless of how they've been designed in the JotForm editor, or with any additional CSS I added to adjust the width, margin or padding.

In addition, I've noted that my forms typically hug the left margin of their embed frames on my Weebly pages. And, whatever is causing it overrides the frames own alignment options of "Left", "Center" and "Right".

I found these two articles in the Forum which seem to set fixed form widths (see links, below). Doesn't that defeat the purpose of the forms being responsive? [Note: all of my forms are responsive, and so is my Weebly theme.]

Any idea what's causing my forms to blow-up like this (see screenshot, attached)? And, how do I fix it?

- Thanks for your help

Related Support Threads:

Full Name and Address Fields: No longer showing the correct layout

HTML field on form is too wide

Hello rwaldenjr,

Can you share with us the link to the page where the form is embedded so we can check why or how it happens?

Thanks.

I'd be happy to. Could you please turn this thread to Private, temporarily? The site hasn't gone public  yet.

I have now set this thread to private, only Jotform Staffs and you will be able to see this conversation.

We will wait for your response.

Thanks for your reply. Here's an example of one of my forms whose elements automatically expand to full-page width when embedded in a Weebly iFrame.

I'll wait to hear what you find....

The link you shared seems incorrect it will just redirect to the Weebly main editor page.

The webiste URL can be found on your Publish page.

Thank you.

Sorry Marvih! You must have jumped right on it!?! I originally entered an incorrect URL. But, I immediately corrected it. Please try the "Sell Your House" link again.

I see the issue you described when I checked on your website.

That anomaly is usually due to script conflict being caused by the Mobile Responsive widget in the embedded form.

I suggest you remove the mobile responsive widget on your form, re-embed the form and check again on your website.

Let us know if this still did not work.

Thanks.

GREAT catch Jonathan! I've been struggling with this issue for weeks. But, nobody at JotForm or Weebly have been able to accurately diagnose it! Funny thing though, your JotForm colleagues have been telling me to add the JotForm Responsive widget! And, Weebly's techs have been telling me to load the form inside their JotForm app rather than an Embed Code widget. Hopefully, the form's responsiveness will still be sufficient to properly resize the form!?!

So why isn't this "anomaly" as you call it specified in the Forum or listed in your team's toolbox so it can be identified more quickly? Would have saved me days worth of time wasted unsuccessfully trying to troubleshoot with CSS code! Is there any effort between JotForm and Weebly to correct the problem? And, does the anomaly explain why none of my CSS code had any effect on repositioning the form inside the iFrame?

This is a really important fix for a crucial problem that seems to exist between the Weebly and JotForm platforms. I haven't seen it listed in ether platform's Community Forum. And, I'd like other JotForm/Weebly users to have access to it. Please remove my site's URL from the "Sell Your House" link (above), and also my Weebly editor link which Marvih added, and return this thread to Public access.

- Thanks again for your help!

I'm glad that suggestion by Jonathan worked for you. And you're correct in your assumptions, but I wouldn't say that the issue could be generalized as that, since it could depend on type of fields used, rest of the Weebly website where the form is embedded etc.

The forms are responsive by default, so it should work properly as it is. And it could happen that some of the fields will not be responsive to CSS used to override them, but, again, that could be related to a specific case.

If you're experiencing any further similar issues please let us know so we can escalate this issue if needed.

Also, the links are removed and the thread is set as public.

Thank you.