What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do I make my form mobile responsive?

    Asked by give2kids 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 

    mobile form Mobile size inject CSS fill
  • Profile Image
    JotForm Support

    Answered by TitusN 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

    Answered by give2kids 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
    JotForm Support

    Answered by EltonCris 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

    Answered by give2kids on April 23, 2014 at 07:14 PM

    It works great, EltonCris. Thank you!


  • Profile Image
    JotForm Support

    Answered by abajan on April 23, 2014 at 09:50 PM

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