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.
Email sign-up form not mobile responsiveAsked by ashtutors on November 26, 2015 at 08:53 AM
I've got my sign up form set up on a blog post, and all is working correctly.
Except, on an iPhone, the 2 input boxes are showing out of place and it looks bad.
I've got the mobile responsive widget on the form, but it doesn't appear to be fixing the issue.
I'd appreciate some guidance.
Try adding the following custom CSS codes in the form. Please add it to the bottom:
display: block !important;
Here's how to add the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.
Thanks Welvin - I've tried that but no joy.
The 2 input boxes are way over to the left, everything else is centred.
The CSS says that there are 4 errors - and that was BEFORE I added your code.
I've fixed the errors and added the custom CSS codes to your form. Can you check again?
The errors are like this (in the designer):
There is an extra semicolon in the area. That should be added after the !important declaration.
Thanks for that Welvin. There are no errors showing up on the CSS now.
I've replaced the iframe code again on the site, and tried it again on my iPhone.
Still having the same issue though. the 2 input boxes in portrait orientation are misplaced off to the left.
Any other ideas would be gratefully appreciated.
(And I have to say, Jotform's support must be amongst the very best in the world! More people should know about it.)
I checked your form and replicated the same issue. I assume that you set your form's width "100%" when you were getting the IFrame embed code. By doing this, your form's width is taking the width of the div.
To avoid that issue, please set the width close to the "300px". You can see the example of the modified IFrame embed code from the below. As it is seen, the width is changed.
I hope this one will work for you. Please let us know the results.
No, I haven't changed anything. I got the form directly from one of the templates, and the errors, as well as this issue, have come along with it!
I've done as you've suggested and this has fixed the issue.
Once again, many thanks for a fantastic service!
Geoff, you are most welcome and also thank you for your great words. I'm glad to see that it works for you.
For your other questions, support team is ready to help you as always.
Have a great day.