Issue with Form Display on Mobile Devices

The website is made on XARA PRO 10 and the form is not working properly on mobile devices

Anyone who can help me out? 

Injecting custom css can adjust the form with mobile device.

Form width is a big fact as it should be adjust with mobile screen. Know the importance of form width in the given link below.

http://www.jotform.com/help/35-The-Importance-of-Form-Widths

Could you please give us the URL of the form which you need to display in mobile device.  

Thank You

Sure, i have the same problem in two websites: www.disenoimpacto.com/contacto and http://www.tracergps.com/landingpage .. 

Thank you

First of all, we do recommend to use the iFrame code

We also do recommend to add this code in your HTML page, before the </head> tag.

<style>
iframe, iframe#JotFormIFrame { height:500px !important; }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


Then add this code in your form styles (use this guide)

/* Smartphones (portrait and landscape) ----------- */
@media only screen

and (max-device-width: 320px)

and (max-device-width : 100%) {

iframe, .form-all {

width: 100%!important;

height:500px !important; } }

Didn't work! now its even worst because i cant see it on any computer! 

The issue seems to be related to the layout of your page. The page height is not long enough to fit the full form, so that the Submit button is not visible on the mobile devices.

Can you try to increase the height of the page? You have several divs, so it is probably that you will need to increase it in different places.

Thank you.

I dont understand. Remember that im using Xara Designer. For computers, it displays great. The problem is the form isnt  auto-adjusting right in mobile devices

I do see that you are still using the script embed code. We do recommend to use the iFrame code to facilitate the form rendered on a mobile device. It appears that the problem appears to be on the height value of the div where the form is on.

If the code is not viewable through the application you are building this site on. You may need to open your webpage's source code on a text editor and modify the div's height value through there. 

Thank you.

When using the iframe, i cant even see the send button from the computer. I always use the xara's embed code for JotForm. I algo tried placing custom height values as you told me, but it makes no diference

Hello,

I think we need to break down the issue so that we can move forward towards a solution that works well for you.

Let's approach the solution from two perspectives:

1. Making the form responsive:

 - Please shring all the fields on the form as shown:

If any of the fields end up on the same horizontal line due to the shrinking, just move them to the next:

After doing this - most of your fields should resize when the width shrinks. Please view this test form on your mobile device and see what I mean: http://form.jotformpro.com/form/41355410952955 - the captcha field is a little wide, but that can be deat with later.

2. Put the newly updated form on your website:

 - Begin with the Xara code:

After you have done this - there might be some issues still - and thats OK - we can deal with each at a time so that we can fix the issue conclusively.

If this method presents additional issues, please respond with the following:

1. The URL where the updated form has been placed

2. The mobile device you tested with so that we can also see what you see

Then, we will address each display issue one at a time.

Unfortunately - with a blend of different solutions working together (Jotform & Xara Code), there are always some teething issues - never a one-fix-all approach - but all can be addressed and fixed. 

Looking forward to your response.

Hi, sorry i took too much time. It seems to be working fine, i tested it from  my Samsung S2. Check it out and tell me what u think: www.disenoimpacto.com 

I had to expand the jotform ifram in the xara program, since it wasnt display the "send" button.