Cloned form has different layout

Hello,

I have not had a problem with closing that I can recall... but one for called "Stop Paying Your Landlord"  each time I clone it.. the boxes are off and frame is gone.

here is what the form should you like.... http://www.soldbybrett.com/stop-renting/

It didn't matter if I changed buttons 

Seems it is happening on all of mine for some reason

Here is a different form that I just cloned as well

http://www.soldbybrett.com/flexible-commissions/

Sorry, but I could not fully understand your problem, I have checked the link you provided and I found this JotForm: https://form.jotform.com/realestatecoach/no-pressure-home-value 

That form has a custom link, if you're trying to clone the form using this link, then it will not be possible, you will need the default link to clone the form, here is the default link for that form: http://www.jotform.us/form/52915161847157 

I also tried cloning the form using the More -> Clone option in My Forms page:

It worked fine and the form was successfully cloned: 

Could you please provide us more details about the problem you're facing? 

We will wait for your response. 

Okay... Not sure about the NO pressure Home Value.... that form seems to be working fine.

The 2 forms that are in question or having issues.. I have attached screenshots of them.   One is an older form called "Stop Paying Your Landlord"  I cloned into  "1 Day Listing"  but changed the button...see below link

The other is I just pulled yesterday from templates as a new form called "Concierge Service"   this one I cloned into "Flexible Commissions"   You can see in the difference on both of these... the margins and order boxes are all off instantly after cloning them.. for this case as well Good Form and Bad Form Screenshots are attached

http://www.soldbybrett.com/1-day-listing-agreements/

As I understand when you clone those forms, the cloned version is different than the original one. 

I went ahead and cloned the forms, here is a screenshot with the original form in the left side and the clone in the right side. 

Clone of Stop Paying Landlord: 

Clone of Concierge Service: 

Here are also the links to my cloned forms, I have not changed anything, margin, padding and other layout settings are still the same: 

https://form.jotform.com/62664544695973

https://form.jotform.com/62665059099973

I can see your cloned versions look a bit different than mines, could we make the clones in your account? 

This way we will find if it happens on your end or if it happens when changing some settings in the form. 

Please let us know. 

Thanks Kevin,  I just went into the account and cloned 2 forms... and marked them as Favorites:

Clone of Stop Paying Landlord:  

and  Clone Concierge Service... 

This time the Clone of Concierge Service... looks like it clone correctly.  However the other one still appears to be an issue.  

The only other thing I can think of yesterday, but it shouldn't have altered the other forms... was some changes in the Advanced CSS when I had a submit button that would only show on cursor.... 

Yes, I have checked the new cloned forms that you have marked as favorite and I can see they look exactly the same like the originals.

Yes, please do note that making any change in the Advanced Designer will change the original form layout, injecting CSS code or adjusting form settings will also change the layout and it may not look the same as when it was cloned. 

However, if you're only changing some settings, for example, font size or only one button, but the entire form is being affected, please let us know, this should not be the case, since if you affect only one element it should not be affecting all other elements in the form. 

I thought they looked the same too... until I clicked previewed on the Clone of Stop Paying Your Landlord

as in screenshot here.  Also, I haven't done this yet... but clearing my cookies and cache... if you are seeing the same in the preview of what my screenshot is.... could that have anything to do with it?  This one is unaltered?

The form in question has a mobile theme applied to it. The mobile theme is adjusting the layout based on a form placeholder size, this is why it is showing a different layout on the Preview window.

It should not be a problem unless you are facing some issues with your embedded form.

Thanks Mike & Kevin,  preview confirmed.  So then any idea why the form on the web page is still off?

http://www.soldbybrett.com/1-day-listing-agreements/

The form should like like the photo on the right.... and yet on my desktop computer even after refresh and clearing Cache and cookies, etc. the form looks like the Mobile display in the preview screen on the left

All my forms are using an iframe w/o script.... so here is the exact code for this one...

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

</iframe>

The form is responding to the width of the placeholder container. It seems that the form placeholder element on your website is considered as not big enough to show the full form.

This is how the form is responding to the width changes due to applied Mobile theme.

If you do not need that Mobile theme, you can go to the old JotForm interface:

https://www.jotform.com/?old

And switch the theme.

Log out / log in to switch back to the current interface.

Okay.. I figured something out here.  I took the "Cloned Stop Paying Your Landlord"  and tested it exactly as is after clone.. The width is identical as it should be to this the original and it works perfectly after clone exactly like the one broke down here...

http://www.soldbybrett.com/stop-renting/

or

here:

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

</iframe>

Now the width changes or something as soon as I go into the advanced designer and swapped out the button for one of the silver/ stainless steel option on the left column... without removing the image... So I think the new button changes the width somehow... despite both showing 305...

Because as soon as I take the same code above for this from with 110% width and 539px height... it's now off again.

http://www.soldbybrett.com/1-day-listing-agreements/

Or as you mentioned above... because of the mobile version?  If I leave button alone there are no issues

I think there is a conflict in the CSS. As soon as you load the form in the designer, some of the adjustments in the mobile theme or current theme in the form will be overridden by the default settings of the designer. 

Your solution to adjust the width of the iframe to 110% should work. You've done this on this page: http://www.soldbybrett.com/stop-renting/. You may consider doing it again on the other page. 

I'll check this further, I am sure this can be fixed with another CSS adjustment. I will also try to re-create the form for you. I'll let you know.

I've fixed it for you by injecting the following custom CSS codes in the form:

.form-all {

border: 1px solid rgba(0, 0, 0, 0) !important;

    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1) !important;

    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1) !important;

    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1) !important;

}

.form-line {

border: none !important;

}

.form-line-active {

    border-top: 1px solid #F4EAC2 !important;

    margin-top: -1px !important;

    border-bottom: 1px solid #F4EAC2 !important;

}

.form-input {

max-width: 180px !important;

}

I'm sorry, the custom CSS codes has been injected in the form on this page: http://www.soldbybrett.com/1-day-listing-agreements/.