What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Does using an iframe to contain the embed cause a fixed width?Asked by morleyb on December 12, 2013 at 10:48 AM
This is a continuation from a previous thread (Are your embeds mobile optimized?). I would like to clarify the repsonse that I recieved:
The width is set to 100% for desktop and mobile devices by default. As long as you use iframe on the embed could it will be set as such.
Will using an iframe cause the embed to override the 100% width? If so, are there ways to prevent a fixed width?
Thank you for your help!
I think, No. For as long as you have the Custom CSS codes injected to the form. The iFrame width attribute works as how the form width would be rendered to your page. If you set the iFrame as 80%, you would expect that the form container would have a space to both side (right & left). Let me know if you need further information.
Is it possible to NOT have to inject Custom CSS? If your team can set all widths in your stylesheets to 100% !important, then the elements will inherit the width of their parent. Much easier to use, versus always having to add/inject Custom CSS for every size. A great example is how twitter bootstrap sets their css grid to percentages, not fixed widths.
The problem that I am facing is that I can't override in any of the elements in the form (width's only) beacuse it is an iframe. When someone adds a form, they do not know the width of the container to be able to use the Custom CSS tool efectively.
Here is a video link showing a form set to 100%. The form elements are still overlapping it's container.
Thanks for your time!
First off, thanks for providing us more details and this clever screencast.
Yes, form embeds are mobile optimized. It works similarly on the live form URL. You can find out the media query CSS when you view your form source code then view form.css.
However, upon checking your video, you seem to be using customized form template which is only optimized for desktop. If you'd like to make it mobile responsive and to customize the form further, simply inject the custom CSS codes that you've just applied (as shown on your video) to fixed the image and textbox width, follow this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.
Sorry but you can't changed the form style by defining custom CSS codes within your page when the form is embedded as iframe. You need to use form source code to be able to do that.
If you need further assistance, feel free to let us know here. Thanks!
Thank you for the additional information. Let me try asking this question differently.
Is there a way to submit to your dev team, a request to allow for dynamic resizing of embed forms on desktops? The goal would be to not have to use Custom CSS to adjust the form element widths (desktops) every time I create a new form.
Sure. We can forward your suggestion to our developers. But, would you mind creating a new thread for that? Use this link: Contact JotForm Support.