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.
Please inject the following custom css in your form and that should solve your issue:
width: 254px !important;
width: 254px !important;
Following guide should help you in injecting the custom css: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Hope this helps.
Do get back to us if you have any questions.
You are welcome.
I'm very pleased that I was able to help you.Do get back to us if you have any questions.Thank you!
now on mobile iphone it looks like this?
I see that your screenshots contain elements not found on the form itself. Are those elements part of an image where the form in being embedded to? If so you may need to position the embed code properly for your page. Please provide the URL of such page so that we may assist you better. Thank you.
Hi, Well The agent above gave me the code to fix the problem with desktop virewing, which did fix it. I know this is not a mobile version but using mobile browsers it looks like this. Yes those text are palced on the background. If I move the bars or embed code then on desktop it will look odd. Anyways my question was why with the code above now it looks fine on desktop browsers but on mobile it is screwed up? btw I am the designer behind this, that is why I responded on behalf of nora.
Please share your web page URL where you have embedded your form. Your form does not have the labels which is overlapping in the screenshot which you have shared above. Your form with its direct URL looks like this:
We need to check your webpage to be able to help solve this problem. I remember last time when I provided the custom css code, the labels were part of your form.
We will wait for your response.
The client wanted that certain font and you did not have that font family. That is why I put in my own lables.
I'm testing your site using an online emulator and the Name, Email and Message are properply aligned. Since you are using those as your background and is not part of the form. You can try adjusting the positioning value.
Here's your code:
position: absolute; left: 580px;
You can edit and decrease the number of the position value to test whether it is properply aligned when viewed on iphone.
Thank you for your response, many of these emulators do not work similar to tha tof iphone and other mobiles. The one I use is a this
I just rendered it with different iphone modules and the results were the same.
I am not concerned about this now, because only on mobile it looks like this. I will be developing a mobile site and will fix this, just letting you know that why does it look okay on desktop browsers but on mobile it does not?
Your soultion of moving values will effect the desktop look and I do not want that.
Emulators are hardly accurate - if anything - you need a virtual OS - the actual SDK to emulate mobile environments on your computer - such that you will be running the actual IOS on your computer to get accurate outputs to your test-
We use Browserstack to troubleshoot as well -
Chrome also has a neat emulator that really hits close to home -try it out:
Having said that - different browsers render HTML elements differnetly because each has their own defaulting Style Sheet if the current rules cannot be implemneted
When you are working with a mobile environment - one of the best ways to make sure it works on desktop and mobile browsers is to make the width dynamic -
/*Begin by declaring the main div container's maximum width*/
/*Then make the elements/classes/id's fit dynamically to 100% of the maximum width*/
I notice that you are working on a new form - once you've completed the form design - let us know and we shall advice with CSS that will align everything dynamically - that is, if you would like to.
Note - the above method will put the field labels above the text-input fields - may not be a big deal - but just thought you should know.
Looking foward to your response.