Why is our form not mobile responsive?

  • Profile Image
    AgilityAssoc.Canada
    Asked on April 07, 2018 at 05:02 PM

    Hi,

    On form 53315129424955, I am using the Response Widget. I'm not sure I am using properly because I see no change if it is installed or not.

    best, Robert

  • Profile Image
    TREVON
    Answered on April 07, 2018 at 05:21 PM

    Would you kindly elaborate on what you are trying to achieve?

    Kindly note that our forms are already mobile friendly. Kindly note you do not need to install anything to make your form mobile friendly.

    1523136042form on phone.gif

    Also note that we do not have a mobile app to view form and fill them. We only have mobile app for form management.

  • Profile Image
    AgilityAssoc.Canada
    Answered on April 07, 2018 at 05:31 PM

    About a week ago I was working with this form. I had a Text Element at the top with our label... Agility Association of Canada. When it was viewed on a phone the text remained very large. I added some vh and vw elements to the text element html code and it help but at times the text in the viewport became very small depending how the device was held. I did some searching on JotForm and one of your colleagues had advised a user to use the widget. I tried it with no luck. So I resigned the form from the ground up then added the widget and found no difference. So what dose it add???  

    IAt one time you had a option to make the form responsive or not... now it appears to be there at all times... very good. But as I said with the text element the text init is not responsive.

    Thank you, Robert

    PS... More importantly... please view the thread about help with PayPal for this form... TNX 

  • Profile Image
    TREVON
    Answered on April 07, 2018 at 06:33 PM

    Kindly do note that the mobile responsive widget is now deprecated as indicated in the guide below.

    https://www.jotform.com/help/322-Deprecated-How-to-make-mobile-friendly-forms-on-JotForm

    I am not quite sure if you mean the challenge is on form ID 53315129424955 since it has no Text Field. I however checked the form 73455828008966 and noted that the form has text field.

    If you need to make the form mobile responsive then you will need to avoid using exact width for the form field. I checked and noticed you had set the width to 540px which will need to display 540px even in a mobile device.

    kindly feel free to clone a sample form below with width changes updated on the text field. It should display alright on your mobile phone.

    https://form.jotform.com/80966844816976

     Kindly do let me know if you need further assistance.



  • Profile Image
    AgilityAssoc.Canada
    Answered on April 07, 2018 at 09:02 PM

    Hi,

    I will have a look ... Thank you, I had a Text field, I actually had two. I deleted them and resigned the form...

    If a Widget is deprecated why is it still available, delete it.

    Thank you

  • Profile Image
    AgilityAssoc.Canada
    Answered on April 07, 2018 at 09:11 PM

    Hi ... 

    I cloned the form and will use it... Thanks...

    Actually this is not a form that I was referring to.

    When I try to make it responsive I want the text size to respond based on the viewport. This is not always easy and may give results I don't want. Having the text move to accommodate viewport is always a good thing but when a heading has large text I may want it to shrink in size so it won't have to wrap. 

    Robert 

  • Profile Image
    Kevin_G
    Answered on April 07, 2018 at 10:55 PM

    I have tested your form in a real mobile device and noticed that the heading text does not display, upon checking the source code in an device emulator I can see the text is actually hidden; however, if I show it the text will display properly: 

    1523156008screenshot_01.png

    May you please kindly provide us a screenshot about how it looks on your end? 

    This guide will help you uploading the image on this forum thread as attached images through email replies are not allowed: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    Also, please let us know which device you're using so we can use the same or a similar one. 

    We will wait for your response. 

  • Profile Image
    BJoanna
    Answered on April 09, 2018 at 03:22 AM

    I am sorry but I am not sure if I understood you correctly. Is this a feature request? 

    I inspected your test form and I saw the div elements you created. Do you want to have a possibility to apply the same to the Header field? If so, you can do it by adding a CSS code to your form for the Header field.

    Example:

    h1#header_1 {

        font-size: 4.2vh!important;


    }

    How to Inject Custom CSS Codes

  • Profile Image
    Bose 
    Answered on April 09, 2018 at 06:19 AM

    Hy

  • Profile Image
    AgilityAssoc.Canada
    Answered on April 09, 2018 at 09:02 AM

    I added your code to mine for header_1 and it works but not as well as what I have below in .myheader4.

    Try using the the emulator preview form and you will see what I mean. I want to avoid wraping the text if I can.

    Best, Robert

  • Profile Image
    TREVON
    Answered on April 09, 2018 at 10:59 AM

    Would you kindly try the following css code for #header_1 ?

    #header_1 {
        font-family : 'baldessare', Arial, sans-serif;
        color : #BC0000;
        font-size: 3.7vh !important;
        font-weight : bold;
        text-shadow : 1.5px 1.5px 1.5px #888;
        text-align : center;
    }

    Tested above code and this is how it looks on my phone.

    Before CSS:

    1523285595Screenshot_2018-04-09-17-30-18

    After The CSS Code:

    1523285633Screenshot_2018-04-09-17-48-23

    Below is a clone of the form you can feel free to clone and use it.

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



  • Profile Image
    AgilityAssoc.Canada
    Answered on April 10, 2018 at 11:51 AM

    OK... I changed as shown. here I my views.

    1523375303test-1.png

    nxt view

    1523375415test-2.png


    nxt view

    1523375453test-3.png


    Regards, Robert

  • Profile Image
    Kevin_G
    Answered on April 10, 2018 at 12:18 PM

    This happens due to the CSS code injected to the form, it actually changes the font size no matter the screen size: 

    .ben, #header_1 {

        font-family : 'baldessare', Arial, sans-serif;

        color : #BC0000;

        font-size: 3.7vh !important;

        font-weight : bold;

        text-shadow : 1.5px 1.5px 1.5px #888;

        text-align : center;

    }

    If you do not need this code to affect the elements on mobile then you need to add a "media" query, so the final code may be replaced with this: 

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

    .ben, #header_1 {

        font-family : 'baldessare', Arial, sans-serif;

        color : #BC0000;

        font-size: 3.7vh !important;

        font-weight : bold;

        text-shadow : 1.5px 1.5px 1.5px #888;

        text-align : center;

    }

    }

    You may also do this only using the font-size and leave the rest outside the media query, this way just the font size is changed on desktop, but color and other properties work on both. 

    My testing form: https://form.jotform.com/80995263954976 

    I hope this helps.