Appearance of forms (arising from iframes)

Hello Jotform

We are new to jotform. Loving it, but having some problems. Thanks in advance for your help!

We initially created three forms and display them within iframes on our site:

(1.)

FtT - Sign the Petition

https://www.jotform.com/build/73506797384167

https://www.jotform.com/build/73506797384167#preview

https://form.jotform.com/73506797384167

It looks OK

 

However, when I embed it in an iframe on the right side of this page

https://fanatics-books.myshopify.com/

the wide red submit button becomes narrow, so the label takes three lines.

 

 

(2.)

FtT - Organization Registration

https://www.jotform.com/build/73507336984163

https://www.jotform.com/build/73507336984163#preview

https://form.jotform.com/73507336984163

It looks OK

 

It also looks OK when I embed it in an iframe on the right side of this page

https://fanatics-books.myshopify.com/pages/student-org-join  

 

 

(3.)

FtT - List Book

https://www.jotform.com/build/73505129184153

https://www.jotform.com/build/73505129184153#preview

https://form.jotform.com/73505129184153

It looks OK

However, when I embed it in an iframe on the bottom of this page

https://fanatics-books.myshopify.com/pages/used-book-exchange  

the wide red submit button becomes narrow, so the label takes three lines.

We also created three separate accordion forms (that is, ones that use form collapse), and the hidden part of each is the form from one of the first three forms described above:

Form A contains Form 1 Form B contains Form 2 Form C contains Form 3

 

 

(A.)

FtT - Accordion – Petition

https://www.jotform.com/build/73498512484163

https://www.jotform.com/build/73498512484163#preview

https://form.jotform.com/73498512484163

Problem: in both the preview and published versions, these elements seem to be centered within the wider accordion, rather than within the pink area:

centered text centered section headings centered submit button

I will hold off and discuss the embed of this in our site below.

(B.)

FtT - Accordion - Join Org

https://www.jotform.com/build/73498370184162

https://www.jotform.com/build/73498370184162#preview

https://form.jotform.com/73498370184162

Problem: in both the preview and published versions, the centered elements seem to be centered within the wider accordion, rather than within the pink area.

The bigger problem is that when I open the form collapse, I do not see the full width of the embedded pink form—just about half of its width.

I will hold off and discuss the embed of this in our site below.

 

(C.)

FtT - Accordion – Invite

https://www.jotform.com/build/73498671884173

https://www.jotform.com/build/73498671884173#preview

https://form.jotform.com/73498671884173

Problem: in both the preview and published versions, the centered elements seem to be centered within the wider accordion, rather than within the pink area.

The bigger problem is that when I open the form collapse, I do not see the full width of the embedded pink form—just about half of its width.

I will hold off and discuss the embed of this in our site below.

The problems where embedded on our site 

All three of these (A, B, and C) are embedded in an iframe, one above another, on this page of our site:

https://fanatics-books.myshopify.com/pages/sandbox-accordion  

The problems there:

When I load that page:

the first one (“sign the petition”) is narrower than the second and third ones the third one (“Invite students . . .”) is shown with the arrow pointing down and the part that should be hidden is exposed.

When I expand those sections:

the first one (“sign the petition”): seems to have the same problem with centered text and submit button elements the second one (“Organiations Join”) is just a sliver the third one (“Invite students . . .”) is just a sliver  

Thank you again!

Best wishes

Robert

Regarding the submit button and this issue:

Go to Custom CSS field and remove this block:

That will solve the problem:

Regarding the other questions. The iFrame field you used is not wide enough, and you can change that by going to properties of that field:

I did that change in this form: https://www.jotform.com/build/73506797384167

I did that change in each of your form so they are all shown properly.

Please check and let us know if you need any further adjustments.

Thank you!