Making forms responsive

  • marriagemojo
    Asked on December 11, 2018 at 2:43 PM

    I just embedded a new donation form on my website using a Stripe connection and this is easily visible on a PC but does not appear responsive on phones.

    How can we make the form responsive OR use a form that already is responsive with a Stripe integration.  We do not see one marked BOTH "responsive" and "Stripe" on the Templates page.

    The screen shot included is how it looks on my PC; it simply does not appear on the phone so I can't provide that screen shot.

    (It's also too wide on the PC so I'd like to know if we came shrink the overall size - and if so - how).

    Jotform Thread 1670030 Screenshot
  • DonaldHag
    Replied on December 11, 2018 at 5:07 PM

    Am unable to replicate this error on my end. I have done some tests on a web browser mobile emulator and an Android device. Please provide the device you are using to test the form. The form is responsive and showing on your website.

    1544565983Selection 006 Screenshot 10

  • marriagemojo
    Replied on December 11, 2018 at 6:55 PM

    Thanks, Donald.  I'm using an iPhone 8 (regular size - not plug) and do see the form, but as soon as I click on the first step to complete it (First/Last Name), it disappears and there is only white space where the form should be.

  • Jed_C
    Replied on December 11, 2018 at 9:31 PM

    I've tried this on a simulator using iPhone 8 and Safari browser, however, I'm unable to replicate it on my end.

    1544581820iOS test form Screenshot 10

    Is this happening if you visit the form directly http://www.jotform.us/form/83445525646160? If not, please try to re-embed the form using iFrame code https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    Let us know how it goes. 

  • marriagemojo
    Replied on December 13, 2018 at 2:23 PM

    Hi Jed:  I now have the iFrame version of the form at the same place on my site and the same thing is happening.  You can view the form when you first land on the page (from my iPhone 8), but when you click on it to enter information, it completely disappears and is replaced by a huge white block of space.

  • DonaldHag
    Replied on December 13, 2018 at 4:22 PM

    On testing with a device, I see what you mean. On my end, the form disappears when you first land on the next page, however, it appears back once you type the first character. Is this the same experience on your end? Is this the same experience on your end as well? 

    1544736003Image from iOS Screenshot 10

    In addition, I notice console log errors when the form is embedded on your website. You can try the solutions here to put jquery in no conflict mode because the embedded code is conflicting with the code on your website.

    1544735799Selection 027 Screenshot 21