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

    How to make form responsive when following the multiple payment options guide?

    Asked by glandoreghyc on April 15, 2015 at 05:39 PM
    However the issue now remaining is the fact that the new Primary form is not responsive. although the Responsive widget appears to be showing in the main Primary form, ...
    mobile responsive responsive
  • Profile Image

    Answered by Ben on April 15, 2015 at 05:55 PM

    Could you please add a screenshot of the error so that we can better understand what is the issue that you are having and we would be happy to assist with it and of course help you resolve it.

    Also, do let us know if there are specific steps needed to recreate the error, or if a specific device.

  • Profile Image

    Answered by glandoreghyc on April 16, 2015 at 03:21 AM

    The following images show the issue on both iPad and IPhone,  there are two images for both the iPad and Iphone, 

     

    1 shows the current Live page with the existing JotForm 

    1 shows the the test page with the failing Responsive dispaly

  • Profile Image

    Answered by Ben on April 16, 2015 at 09:40 AM

    Thank you for the screenshots John.

    I see the issue and we will need to change the CSS code a bit from what it was before:

    form.jotform-form {
        padding: 0 !important;
    }
    div.form-all {
        min-width: 100%;
        width: 100%;
    }

    As you can see the first part of the code is almost the same, but we need the !important, since the padding got changed once the mobile resizing was active.

    The second part is to stretch the embedded form to full width, since also, once in mobile form, it got changed, but with min-width, we do not need the !important.

    Please add that code to both embedded (child) forms, again at the end of their custom CSS.

    Once you do, also do add the mobile responsive widget to both of them as well.

    Basically what happens, is that iframe holding the forms gets resized, while the forms inside of it do not, but once both the widget and the CSS code above is added, it should work properly for you.

    Do let us know how it goes.

  • Profile Image

    Answered by glandoreghyc on April 16, 2015 at 10:16 AM

    Ben,

     

    Thanks, we seem to have created another issue now, look at the screen shot below.

     

    The initial fields are "Clipped" at the top

    Please not this screen shot is from a desk top

    Ref the Mobile Responsive Widget this is included in each of the 'Secondary" forms, but does not show when the forms are embedded, however the Primary form does have  Mobile Responsive widget included in it,,,,,

     

  • Profile Image

    Answered by Ben on April 16, 2015 at 11:45 AM

    OK, that is caused by this CSS:

    form.jotform-form {
        padding: 0 !important;
    }

    Lets change it to:

    form.jotform-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    That way we only set the left and the right side, without the top and bottom padding.

    Please do change the code as shown above and it should work (the cut of the field should not be present).

    In regards to mobile responsive widget, if it is included in all fields, that is the way it should be left.

    Do let us know once you make the change and we will inspect the form again (http://www.reenoserve.com/GHYC/forms/index.html)

  • Profile Image

    Answered by glandoreghyc on April 16, 2015 at 12:41 PM

    Ben,

     

    Top field clipping has now been fixed..thanks

    Forms still not being displayed correctly as per Responsive mode.

    se screen shots below.

     

    Also, noted that the following code is at the start of the CSS Code on both secondary forms.

     

    form.jotform-form {

        padding : 0;

    }

     

    thx

     

    John

     

  • Profile Image

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

    It seems that the iframe code is not accepting the values to be re-sized, so it always stays with the original width that was set to it.

    For that reason, I will raise this to our developers working on widgets to see if there is anything that can be done so that the forms are displayed in the right manner.

    Now while they are looking into that, I would like you to try out this form on your website: http://form.jotformpro.com/form/51055914562959

    It is basically a clone of your jotform, but instead of using iframe embed widget, I made the iframe myself using Text field. This allowed me to add a bit of CSS and have it behave more dynamic than it was by using the widget. It would be best however to test it out on your website.

    All you should do is change the link (under src attribute) in the current iframe embed code to point to my clone of your jotform and refresh the page on your website to see how it works.

  • Profile Image

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

    Just wanted to mention that it does not matter if the CSS code above:

    form.jotform-form {
        padding : 0;
    }

    is in the form, as long as:

    form.jotform-form {
        padding: 0 !important;
    }

    is not in there (if it is, we should remove it) and that the following is:

    form.jotform-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    You can also remove it from the form if you wish - it would be OK and it would not make any change.

    I have also opened a new thread here: http://www.jotform.com/answers/553806 where I will raise this to our team working on widgets so that we can continue to assist you here, while also you get notified once that is resolved on the other thread.

  • Profile Image

    Answered by glandoreghyc on April 17, 2015 at 05:49 AM

    Ben,

    Tried your cloned form as in

     

     http://form.jotformpro.com/form/51055914562959

    and it seemed to work fine.

     

    John

  • Profile Image
    JotForm Support

    Answered by KadeJM on April 17, 2015 at 10:55 AM

    Thank you for the update about that John and I am happy it's working out for you now.

    Additionally, I am sure that Ben will be pleased to know that as well and on his behalf you are very welcome.

    If you need any help in the future with anything else just let us know via a new thread.

  • Profile Image

    Answered by glandoreghyc on April 17, 2015 at 11:07 AM

    Hello,

     

    There seems to be some kind of misunderstanding.... 

     

    This issue is NOT resolved. Ben created an experimental form just to test out a theory he had i believe...and that was the form i was testing at his request.

    This issue is with your Widget Development team who i believe are trying to determine why the Embed iFrame is not workign correctly in Responsive mode.

     

    John

  • Profile Image
    JotForm Support

    Answered by KadeJM on April 17, 2015 at 01:01 PM

    My apologies about any misunderstandings and thank you for letting us know about that.

    I can indeed confirm that my colleague Ben had opened up a separate thread with a report to our widget team about the Embedded iFrame not working properly. That part will actually be followed up in that thread there.

    Anyhow though, I will check in with Ben to see what he knows about it if anything further as well as try to see what else we can do to help get this issue fully resolved for you as soon as possible.