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.
Field and Sub Label SizeAsked by NACWPI on January 24, 2017 at 10:48 PM
I'm having difficulty adjusting the size of the entry field on my forms so that they are uniform. Though they all seem to be set to 60px, they are actually different sizes on the published forms.
Also, the text in one Sub Label carries across the frame so that it is not visible on the published form.
You can use the Form Designer Tool to adjust the width of your form fields. Here's a guide about it: https://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-
For the sub labels crossing the form frame, you can add this custom CSS code to your form:
white-space: normal !important;
That should wrap the sub label properly. Below is a screenshot to where you can paste the custom CSS code:
There's also a chance that the CSS or the style on your website page is affecting the style on the form itself. To avoid this, you can re-embed your form to your website using the iFrame embed code, to get the iFrame embed code, here's a guide that you can follow: https://www.jotform.com/help/148-Getting-the-form-iFrame-code
Let us know if that helps.
The CSS code worked perfectly, thank you.
Though I’ve adjusted the width of all fields to match, they still show different lengths: https://nacwpi.wildapricot.org/Clinic-Proposals Any other suggestions?
Thank you for your update, NACWPI. We're glad that your concern has been sorted out.
Can you also give us an idea on what you mean by fields showing different lengths? So far this is how the form on your page appears on my view:
We'll look forward to your response.
Is this an issue with my browser then perhaps?
Thanks for the screenshot.
Yes, this definitely is a browser-related matter. IE has the strangest method of rendering CSS codes. What you can do here is insert a width-specific CSS code for your fields to all have the same width. You can use this code:
width : 400px !important;
If you wish to learn how to insert/inject CSS into your form, you can follow the steps from this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes