How can I make my form compatible to both PC and mobile devices?

  • Profile Image
    IIPW
    Asked on December 24, 2012 at 05:28 AM

    Hi,

    My form is correctly sized and formatted when viewed on a PC but on an iphone or ipad the form is too large for the space provided. Also the font has changed and the tick box text is placed on the line below.

     

    How can I make it compatible to all devices automatically?

     

    I have already used frame to embed the code into the website which I though would have eliminated this issue.

     

    Also even on the PC when you enter text into the fields the form extends and becomes too long to for the space and makes the submit button disappear. This does not happen on the newsletter form that is provided by the 1and1 website template.

     

    Many thanks

    Jamie

  • Profile Image
    Welvin
    Answered on December 24, 2012 at 06:25 AM

    Hi Jamie,

    We are sorry for such issue and I am pleased to address them for you;

    My form is correctly sized and formatted when viewed on a PC but on an iphone or ipad the form is too large for the space provided.

    -Your form spacing looks the same when viewed on my end, tho I am using browserstack for iPhone and iPad viewing but I think that doesn't make difference.

    ..Also the font has changed and 

    -This is maybe because your iPhone or iPad doesn't support the current font family on your form? Have you tried installing the Arial Black font on your iOS devices?

    ....the tick box text is placed on the line below.

    -This is somewhat the behavior our form when view on small screen mobile devices, the field boxes that are on left will be move down the label.

    --------------------

    Also even on the PC when you enter text into the fields the form extends and becomes too long to for the space and makes the submit button disappear. 

    -This happen because your iframe height is too small, you need to adjust the height value to be able to see the whole form. Adjust the height to 300px.

     

    I hope this helps and please don't get back to us if you have further concern or inquiry.

     

    Thanks