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.
How do I make my form mobile responsive?Asked by give2kids on April 22, 2014 at 02:33 PM
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.
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.
I do not know how to "remog" the css.
Here is a graphic to explain what I'd like the form to do:
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.
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
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!
It works great, EltonCris. Thank you!
On behalf of my EltonCris, you're quite welcome :).