Why is our form not mobile responsive?

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

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.

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

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 

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.

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

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 

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: 

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. 

Hi, This is very strange... and very annoying... I created a response to this earlier today and now I see it is not here. It was quite long... oh darn...

I cannot possibly tell you what device is having the problem as we have over 1.5k users so I guess assume any one that has been made. The image you show above is not complete until you select a language. But I venture to say it will all fit nicely. I will likely not use this particular form as is and make it French only, here is the working english version... /80968322459972.

Earlier on, for form you are showing, I had a text element for the header. Soon after I received notice from a director that if the form was displayed as you show the header text went off the screen it was so large. I realized then that the text element did not respond as I thought it should. I then played around with using a div with vh and vw. I had to create a separate div for each. It was better but was very hard to setup so I abandoned the idea and went to what you are showing.

TESTING

In order to learn more I have created a test form /80958034059967, in which I am using the header element and a text element with two divs, one with vh and the other with vw. I have been testing a number of different options and have it working somewhat OK... I know there are other options like creating a class and using it in the text element. That would give more flexibility.  I read an article that indicated you can use css to make text not to big and not to small. Also there elements like max and min for viewport settings that can be employed. Now there is no urgency in this but I would appreciate your input as how I could make this work more satisfactorily. JF has helped me with much more difficult issues in the past for which I am eternally grateful. As I said no need to spend valuable time on this.

best Regards, Robert

I hope this note gets applied 

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

Hy

Hi,

No I'm not asking for a feature request although that is not a bad suggestion. 

I will most certainly use your code for my test. I have modified my settings considerably since you looked. I have injected this code to compare options.

Thank for your help, Robert

#header_1 {

    font-family : 'baldessare', Arial, sans-serif;
    color : #BC0000;
    font-size : 28pt;
    font-weight : bold;
    text-shadow : 1.5px 1.5px 1.5px #888;
    text-align : center;
}

.myheader4
{

 font-family : 'baldessare', Arial, sans-serif;
 color : #BC0000;
 font-weight : bold;
 text-shadow : 1.5px 1.5px 1.5px #888;
 text-align : center;
 margin: -20px auto -20px -10px;
 font-size: 100%;
 font-size: 4.8vmin;
 font-size: 3.325vmax;
} 

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

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:

After The CSS Code:

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

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

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

nxt view

nxt view

Regards, Robert

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.