How do I make my form mobile responsive?

  • Profile Image
    give2kids
    Asked on April 22, 2014 at 02:33 PM

    Hello,

    Re: Form: http://give2kids.com/mobile/donate.html

    I'd like my form to be responsive (fill the mobile screen, instead of be tiny).

    i'd also like the text size to be consistant.

    I have attempted to inject css from your previous answers to this question,
    but it is not working for me. 

    Please advise.

    Thank you 

  • Profile Image
    TitusN
    Answered on April 22, 2014 at 04:33 PM

    Would you like your form to be as shown on this copy of your form? http://form.jotformpro.com/form/41116221520941

    To achieve that, you can make the edits right on the form builder.

    Begin by remoging all your injected CSS,

    1. Select the field that is spilling out  - or seems longer than the desired fiorm width

    2. Click on "size" on the toolbar as shown

    3. Adjust the width, and you will see it reduce on the form

    4. Click OK and save your form

    Please let us know if this helps.

  • Profile Image
    give2kids
    Answered on April 22, 2014 at 06:07 PM

    Hello TitusN,

    I do not know how to "remog" the css.

    Here is a graphic to explain what I'd like the form to do:

    http://aliike.com/screenshot.jpg

    In other words, I'd like the form to respond to the mobile environment, by filling
    out the screen.

    Thank you for any help you can provide. 

  • Profile Image
    EltonCris
    Answered on April 22, 2014 at 08:49 PM

    @give2kids

    Since that form is for mobile use, inject the following CSS codes to your form but make sure to remove the existing CSS codes injected to your form first to avoid any possible conflicts.

    You can take the CSS codes here: http://pastebin.com/raw.php?i=D4EmJQnv

    Guide: How-to-Inject-Custom-CSS-Codes

    ---

    If you want the form to zoom or scale properly on mobile device, add the following meta codes on top of your donate.html file under <head> tag.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <metaname="HandheldFriendly"content="true" />  

    Hope this helps!

  • Profile Image
    give2kids
    Answered on April 23, 2014 at 07:14 PM

    It works great, EltonCris. Thank you!


  • Profile Image
    abajan
    Answered on April 23, 2014 at 09:50 PM

    On behalf of my EltonCris, you're quite welcome :).