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.


  • Profile Image

    Iframe embed widget does not get resized by mobile responsive widget, leaving it too wide on mobile devices

    Asked by glandoreghyc on April 16, 2015 at 02:27 PM

    Forms still not being displayed correctly as per Responsive mode.

    se screen shots below.

     

    Iframe Embed Mobile Responsive responsive form
  • Profile Image

    Answered by Ben on April 16, 2015 at 02:36 PM

    As mentioned John, I am raising this to our team working on widgets now.

    As soon as the widget is able to accept the percentage as value, or to follow the size of the parent, we will update you about it through this thread.

  • Profile Image

    Answered by EpsenFuller on April 16, 2015 at 04:20 PM

    i am having a similar issue on this page: http://blog.epsenfuller.com/bad-hire-calculator/

     

  • Profile Image

    Answered by glandoreghyc on April 23, 2015 at 10:20 AM

    Hello,

     

    Any news on when this issue will be fixed please?

     

    John

  • Profile Image
    JotForm Support

    Answered by KadeJM on April 23, 2015 at 12:22 PM

    Hi John, I know it's been a few days now since you last reported this issue to us.

    Generally we don't promise timeframes for these sorts of things since sometimes depending on the issue and the amount of issues being handled by our developers it might take a bit longer.

    From what I can see on our end it is assigned as of now to one of our developers whom I am very sure has most likely begun investigation of the issue. As of right now there's no update about it but I am certain once our Dev is done with it then he will likely inform you about it as soon as he can.

  • Profile Image

    Answered by glandoreghyc on April 23, 2015 at 02:39 PM

    Hello,

     

    Thanks for the update, 

    The client is waiting to see how this option will work before we set it live so it is important that we get it right.

     

    John

  • Profile Image
    JotForm Support

    Answered by TitusN on April 28, 2015 at 04:36 AM

    Hello, 

    It is now possible to make the iframe embed responsive if you add the mobile responsive widget: 

    Please try it out: http://form.jotformpro.com/form/51172251677960?

    A copy of your form also seems to work as expected - http://form.jotformpro.com/form/51055287835965

    I would advice that you observe the following in using a responsive iframe widget: 

    1. Use the Mobile responsive widget 

    2. Ensure that your iframe source (the page which loads in the iframe) is mobile responsive as well - so that it dynamically adjusts to the browser width or view-port. 

    Please share your experience with us. 

    Cheers!

  • Profile Image

    Answered by glandoreghyc on April 29, 2015 at 02:52 AM

    Hello,

    I have tried the form and it still does not work correctly, yes it appears to be better but it is still not fully responsive when tried on real smart phones and tablets.

    I can confirm that the Primary Form has the Mobile Responsive widget added and also the two secondary forms also have the Mobile Responsive widget added to each form before they are added to the Primary Form. 

     

    I did note that if you tried the forms in a Desktop browser and altered the Screen view size of the browser window then the responsive function of the form appears to work, but this is not the same as viewing on actual devices.

    thx

     

    John

  • Profile Image
    JotForm Support

    Answered by jonathan on April 29, 2015 at 05:44 AM

    Hi John,

    I made a test of your website where the form was used and I found that the responsiveness seems to be working on mobile browser

     

     

    The only issue I think that it have is the custom injected CSS code is not properly set for the form. It is noticeable in the width of the fields.

    Perhaps resetting all the injected CSS code on the form can work also.

    Let us know if you need further assistance.

    Thanks.

     

     

  • Profile Image

    Answered by glandoreghyc on April 29, 2015 at 05:47 AM

    Hello,

    Your image shows that the form is not fully being displayed there is clipping to the right hand side.

     

    How do i reset the CSS?

     

    Thx

     

    John

  • Profile Image

    Answered by glandoreghyc on April 29, 2015 at 06:41 AM

    Hello,

     

    Further to my last response, the following URL will show you how it is supposed to look.

     

    http://glandoreyc.com/forms/index

    The above is the online live site without the embedded iframes, but everything else is the same.

    thx

     

    John

  • Profile Image

    Answered by Ben on April 29, 2015 at 09:45 AM

    Looking at your jotform John, could you please try adding the following CSS code only to your child forms?

    html.supernova {
        margin-right: 3%;
        padding-left: 1%;
        padding-right: 0;
    }

    Do add it under all of the other custom CSS code that you have (resetting would be removing all of it, which I would suggest as the last option).

    You can see here how to add it: Inject Custom CSS Codes, but again, do add the code:

    1. only to child forms (the ones in the iframe embed widget)
    2. at the bottom - after all other CSS code, if any

    Do let us know how it works, and just in case, please do make your tests on the jotform directly first and give us the direct link to your jotform that you have as main form - to avoid us looking at different forms.

    Once the form accessed directly, is working as it should, we can then move to have it working properly on your website as well since this way it would require only some small alterations - if any and we can rule out a lot of other possible issues.

    Thank you :)

  • Profile Image

    Answered by glandoreghyc on April 29, 2015 at 10:49 AM

    Ben,

     

    Added the CSS code (at the end) to the 2 Child forms, something i have just noticed about the 2 child forms is that when they are viewed in the Designer view, the top 3 lines of fields are not shown as in screen shot below:-

    The link to the Primary form is

    http://form.jotformpro.com/form/51022125385950?

    I have viewed this directly and changed the Browser screen window and it appears to work OK,

    When i view online via  tablet the form appears Ok, however there is a very large "space" between the Submit button and the page footer on both Secondary forms.

     

    When i view on a Smart phone the Submit button does not display on both Forms.

    for completeness the CSS on both Secondary/Child  forms is as follows:-

     

    form.jotform-form {

        padding : 0;

    }

     

    ul > li.form-line {

        padding-left : 0;

        padding-right : 0;

    }

     

    .form-all {

        margin-top : -75px !important;

    }

     

    @media only screen and (max-device-width : 480px){

        #id_19 .form-description {

            right : -10px !important;

            top : 30px !important;

        }

     

    }

     

    @media only screen and (max-device-width : 1024px){

        #id_19 .form-description {

            right : -20px !important;

            top : 10px !important;

        }

     

    }

     

    input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

        font-size : 16px;

    }

     

    @media screen and (-webkit-min-device-pixel-ratio:0){

        select:focus, textarea:focus, input:focus {

            font-size : 16px;

        }

     

    }

     

    @media screen and (max-width:768px){

        form.jotform-form {

            padding : 40px;

        }

     

    }

     

    @media screen and (max-width:640px){

        form.jotform-form {

            padding-bottom : 10px;

        }

     

    }

     

    #stage.form-all, #stage > ul.form-all {

        margin-top : 25px !important;

    }

     

    form.jotform-form {

        padding-left : 0 !important;

        padding-right : 0 !important;

    }

     

    div.form-all {

        min-width : 100%;

        width : 100%;

    }

     

    html.supernova {

        margin-right : 3%;

        padding-left : 1%;

        padding-right : 0;

    }

     

    Hope this helps.

     

    John

     

  • Profile Image

    Answered by Ben on April 29, 2015 at 12:12 PM

    Great to hear that it is working John.

    I like using CSS code, but this time we can try a different approach - to remove the Submit buttons from both child forms and have it on the parent form instead.

    So there should be only one submit button and it should not be cut of on your jotform.

    Now I am not sure and can not find on this thread, but I believe that there was some other thread where we suggested that you use submit button on child forms due to the some reason, and if that is so, then here is some CSS code that should help as well.

    This is CSS that will remove the shadow border around the form, making the fields seem as part of the form itself and is an optional code that can be added to child forms:

    div.form-all {
        box-shadow: none !important;
    }

    This one should remove the big spacing under child forms to the end of the form (added to parent form):

    #id_20 {
        margin-bottom: -50px;
    }

    This one should help with the submit buttons not being visible on the mobile phones (should be added to child forms):

    @media screen and (max-width: 480px) {
        #id_2 { padding-bottom: 40px; }
    }

    Now in regards to the Form Designer, if you have opened the child form and 3 fields are missing, that would need to be handled in a different / new thread, so I would appreciate if you would open one for it, but if this happens when you open a main form, it might be caused by some of the recent tweaks so lets see once everything is done if the issue is still appearing for you and help to resolve it.

    - I am simply trying to avoid possible conflicts between the code on one thread and the code given on another as we try to resolve all issues at ones.

  • Profile Image

    Answered by glandoreghyc on April 29, 2015 at 01:23 PM

    Ben,

    Inserted your first two suggested CSS additions (they are both added at the end of installed CSS)

    The second CSS you provided did not remove the large space under the child forms.

    So i removed the Submit buttons from the Child Forms

    and This now gives me a submit button when viewed on Smart phones, however the Child form is doing no verification of fields, i have a number of required fields, which were blank and the form was allowed to be submitted successfully.

    Also, there is still a large space under the child form.

     

    John

  • Profile Image

    Answered by Ben on April 29, 2015 at 02:42 PM

    Hi John,

    Yes, that is correct, the submit in the parent form would not know if the required fields are filled out or not in the child form, so the submit is best to be added back to the child forms and removed from the parent form.

    Now I did the following (hope that you will not mind, I wanted to help you by not doing all of the steps).

    I have changed the height of the iframe embed widget for PayPal form from 1200 to 1130

    For me this seems to be working properly.

    I have also added the submit button back to it.

    The same was done for Bank transfer form, by changing the 1400 height into 1370

    and added:

    #id_20 {
        margin-bottom: -40px;
    }

    to the main (parent) form

    Do take a look John and let us know how it looks.

  • Profile Image

    Answered by glandoreghyc on April 29, 2015 at 05:20 PM

    Ben,

     

    I really appreciate all the work you are doing on this.

     

    I have no issue with you making the changes, however, when i viewd on a desktop reduced to the smallest screen size view all seemed great, but when i viewed on real smart phone, both child forms did not fully display as per the following screen shots.

     

    First is the PayPal form and then the Direct Transfer Form

    and this is the second.

     

    Thanks Again,

     

    John

  • Profile Image

    Answered by raul on April 29, 2015 at 07:20 PM

    I've inspected your form and this is how your forms look on my phone.
    The submit button shows partially on my side.

    So, you may need to increase the height of the iframe to make the submit button viewable for all mobile devices or if you don't mind showing scrollbars when required you can enable them by using the code below.

    <iframe allowtransparency="true" src="//form.jotformpro.com/form/51032395272955" frameborder="0" style="width:570px;height:1200px;margin:0 auto;" scrolling="yes"></iframe>

    <iframe allowtransparency="true" src="//form.jotformpro.com/form/51032581912953?" frameborder="0" style="width:570px;height:1400px;margin:0 auto;" scrolling="yes"></iframe>

    I hope this helps.

  • Profile Image

    Answered by glandoreghyc on April 30, 2015 at 02:51 AM

    Hello,

     

    Thanks for your suggestion on scrolling but as this is an input form with a few fields i would like to keep away from any further complication, especially on smaller devices.

    I have changed the PayPal form length to 1250 and the Direct Transfer Form to 1550 and they seem to display all of the form, however i am puzzeled why these forms have to be different lengths as they are basically the same form, one has PayPal integration and the other does not.?

    The only thing that is still not correct on this form is there is a very large amount of"Space" between the end of the Submit button and the footer of the form, which is proving very troublesome to remove.???

     

    Thx

     

    John

  • Profile Image
    JotForm Support

    Answered by Welvin on April 30, 2015 at 07:46 AM

    Hi John,

    As for the height, I think that's because of the element of the base form or this could be related to the CSS codes in the form. At least for now, the form is being displayed properly.

    As for the space at the bottom of the form, I think you mean when it's viewed in the desktop view? Because I can't see the spaces when viewing the form using a mobile devices. Well, you have to note that the iFrame embed widget doesn't have a dynamic height. As you could see in the configuration, you will have to set the height in order to correct the form view. The form doesn't shrink in the desktop view so it's expected that a space at the bottom will appear per your iFrame widget height settings. I'm sorry, but I don't think there's an easiest way to fix this in the form. 

    A workaround for now would be to create two pages, one with the Paypal form and the other with the Direct Bank Transfer and let your customers choose the option in your website, maybe link it rather than in the form using the iFrame widget/dropdown/conditional logic.

    Please get back to us if you need further assistance.

    Thank you.

  • Profile Image

    Answered by glandoreghyc on April 30, 2015 at 10:39 AM

    Welvin,

    I am confused, you can't see the spaces when viewed on a real smart phone? so after the Submit button there is the Footer??? would you mind sending me a screen shot of that please?

    The concept of putting the imbedded iframes came from your own support group and i have to say it is a great idea and your people have been very generous with their time helping me to date???

     

    For your info the forms and the web page are based on the live url at

    http://glandoreyc.com/forms/index.

     

    The only things different are that the live page does not use embedded iFrames. and in an attempt to rectify my issues , your support has advised on certain additional CSS. a sample of which is included in this thread.

     

    John

  • Profile Image
    JotForm Support

    Answered by Charlie on April 30, 2015 at 12:44 PM

    Hi John,

    I'm quite confused what is the current concern now, the form now does not use any iFrames to embed other forms in the main form, right? Instead using the custom CSS code we're trying to make the form fully responsive? In this case the issue is the bottom spacing of the form when on mobile view?

    Could you try cloning this form and see if gives you the result you are looking form: http://form.jotformpro.com/form/51195329598973

    Thank you.

  • Profile Image

    Answered by glandoreghyc on April 30, 2015 at 02:02 PM

    OK,

     

    Firstly, thank you for all the support that the forum has given and in particular the contribution of Ben, but i think i have come to a point that i need to reset the scene so we are all on the same page so to speak.

    There is one Primary form at

    http://form.jotformpro.com/form/51022125385950?

    There are two embedded iFrames within this form and these "Child" forms are at the following locations.

    http://form.jotformpro.com/form/51032395272955?

    and

    http://form.jotformpro.com/form/51032581912953?

    if you want to see the form(s) in operation on a test site use the following 

    http://www.reenoserve.com/GHYC/forms/index.html

    You will notice there is space between the end of the Submit button and the embedded form(S) i do not understand this.

    However the major concern is that there is a far greater space between the end of the embedded form and the Footer, you can view this effect on a desk top but it is much worse on a smart phone or tablet. And at this time this is my outstanding issue in relation to displaying embedded forms in a responsive mode.

    The CSS in the Primary form is

     

    .form-all {

    margin-top : -75px !important;

    }@media only screen and (max-device-width : 480px){

    #id_19 .form-description {

    right : -10px !important;

    top : 30px !important;

    }}@media only screen and (max-device-width : 1024px){

    #id_19 .form-description {

    right : -20px !important;

    top : 10px !important;

    }}input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

    font-size : 16px;

    }@media screen and (-webkit-min-device-pixel-ratio:0){

    select:focus, textarea:focus, input:focus {

    font-size : 16px;

    }}@media screen and (max-width:768px){

    form.jotform-form {

    padding : 40px;

    }}@media screen and (max-width:640px){

    form.jotform-form {

    padding-bottom : 10px;

    }}#stage.form-all, #stage > ul.form-all {

    margin-top : 25px !important;

    }

    #id_20 {

        margin-bottom: -40px;

    }

    The CSS in the Embedded (Child) Forms is 

     

    form.jotform-form {

        padding : 0;

    }

    ul > li.form-line {

        padding-left : 0;

        padding-right : 0;

    }

    .form-all {

        margin-top : -75px !important;

    }

    @media only screen and (max-device-width : 480px){

        #id_19 .form-description {

            right : -10px !important;

            top : 30px !important;

        }

    }

    @media only screen and (max-device-width : 1024px){

        #id_19 .form-description {

            right : -20px !important;

            top : 10px !important;

        }

    }

    input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

        font-size : 16px;

    }

    @media screen and (-webkit-min-device-pixel-ratio:0){

        select:focus, textarea:focus, input:focus {

            font-size : 16px;

        }

    }

    @media screen and (max-width:768px){

        form.jotform-form {

            padding : 40px;

        }

    }

    @media screen and (max-width:640px){

        form.jotform-form {

            padding-bottom : 10px;

        }

    }

    #stage.form-all, #stage > ul.form-all {

        margin-top : 25px !important;

    }

    form.jotform-form {

        padding-left : 0 !important;

        padding-right : 0 !important;

    }

    div.form-all {

        min-width : 100%;

        width : 100%;

    }

    html.supernova {

        margin-right : 3%;

        padding-left : 1%;

        padding-right : 0;

    }

    div.form-all {

    div.form-all {

        box-shadow : none !important;

    }

     

    #id_20 {

        margin-bottom : -50px;

    }

     

    Thank You

     

    John