Mobile Friendly Issues

Hi

Today I added a mobile friendly pages to our website. However the2  forms I created in JotForm is giving problems during re-sizing. When I tried to insert the forms on mobile page (480 px width) by reducing its size all the fields just go "crazy"

How do I ensure that forms I created can also be seen on my mobile device without any issues.

The form in question are Contact Form in the contact tab of the website and one is feedback form on my home page at the bottom.

It works without any problems on my normal desktop screen. Only problem is when u view on mobiles.

My website is www.insight-acad.com (see home page at the bottom and contact tab)

To view mobile friendly page just reduce your browser to half your current width and the it will automatically switch to a mobile friend view,

You can see the problem I am describing by comparing both the views?

Any help on this?

rgds

kish

Hi,

You can make your form responsive by going to Preferences in Form Builder and setting responsive field to YES.

Also, you should check this option in Form designer.

Please take a look at the following guide.

This should solve your problem. 

Please let me know if i can be of more assistance.

Best regards.

Hi,

I will look into your problem and as soon as i have some solution i will get back to you.

Best regards.

Hi, 

I managed to  solve your problem. You will have to inject custom CSS to your form. That means that you will need to go to Form Builder  and click on Preferences.

There you need to find Form Styles tab and paste the following CSS:

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

[data-type="control_phone"] .form-sub-label-container {

width: 30% !important;

}

}

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

[data-type="control_fullname"] .form-sub-label-container {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

width: 30% !important;

}}

This will prevent moving input fields to new rows when on mobile device. 

Please let me know if this works for you.

Best regards

Hi

The above solved the problem of splitting the fields onto different lines BUT title/label of each field are not on  the same line as the input fields. Please look at the website www.insight-acad.com using your desktop browser. Then reduce your width your browser to about size of a mobile phone screen and you see the difference. the view changing from desktop version to a mobile version.

Look at the home page at the bottom where the Insight-Academey Customer Loop Form is displayed.

I need to have it the same if possible. for both view on normal desktop view and mobile view

Thanks

kish

I will look at this and let you know the codes to keep the label on left. 

Hi Kish,

On mobile platforms, I can see no problem. However, it is placed right bottom of the screen when you monitor your form on desktop; but you can easily change its position by adjusting some values on your webpage's source code.

Below, you can see the class names marked with green, so you can find them easily by searching their names. Then, you can change their "left" variables just like the below (blue marked areas).

Header,

<div class="Normal_text" style="position: absolute; left:390px; top:2004px; width:282px; height:10px;font-weight:bold;font-size:15.97px;color:#292861;">

Header div,

<span class="xr_ar xr_1as3 xr_1a1" onDISABLEDmousemove="xr_mpo(this,4,0,event)" style="left: 300px; top: 1977px; width: 481px; height: 45px; background-color: #EDC951; border-radius: 5px;"></span>

 Body,

 <div class="xr_noreset " style="position: absolute; left: 300px; top: 1991px; width: 481px; height: 250px; overflow: hidden;">

After making those changes, you can see the changes from the below:

I hope this one will meet your needs. If it is not, please do let us know.

Thanks.

Hi Mert

I am sure what you want done above.

First the form on the desktop is placed at the bottom because I want it there. I created the placeholder at that location. So what i want if someone views this website from his mobile he should see the same form roughly also at the bottom in the same format just as image you presented above.

Are you saying in order to get the above I need to inject HTML code on the webpage itself? Please let me know. 

rgds

kish

Inject these CSS codes if you want the form labels to retain left aligned when viewed on mobile just like on desktop view.

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

.form-label{

    width : 34% !important;

    float:left !important;

}

.form-input {

    width : 62% !important;

    max-width: none !important;

}

input[name$="[country]"],input[name$="[area]"] {

    width: 70% !important;

}}

---

You might also want to increase the button height so its text will be vertifically aligned.

.form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

    height: 30px;

}

Result:

Let me know if there's anything I've missed here.

Thanks!