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 keep checkbox text from wrapping back to left margin?Asked by Envirogirl on February 14, 2011 at 12:48 AM
I have a checkbox field on my form that has accompanying text so long it wraps back to the left margin. However, I want the wrapped text to be flush with the first word in the previous line, not wrapped all the way back to the left margin, under the checkbox. Is there an easy way to do this?
I'm not sure what you mean. This is what your form looks like right now:
How do you want to change it?
I want the word "Impact" to appear directly underneath the word "Send," not underneath the checkbox. In other words, I want the statement to stack, not wrap.
By the way, I'm having the worst time keeping those dashed lines (----) from showing up in my form. I try deleting the default text in those fields, but those lines come back every time I edit the form. Why won't they go away?
Since the purpose of labels is to identify form elements, my advice is to replace those dots in each instance with text that identifies those fields (perhaps a shortened version of the text already there) so that your records will have proper headings. The labels can be hidden using the Inject Custom CSS feature in the Preferences: Open the form to edit it > Setup & Share tab > Preferences tool (See screenshots below)
Now hide those labels with Inject Custom CSS (those ID elements can be found in the source code of your form)
Also, I believe the word "Impact" can be lined up under "Send" using Inject Custom CSS because CSS can be used to display list items in various ways. I'll check it for you.
UPDATE: I think this resource should be helpful but to be honest, I'm not sure how best to inject the code into the CSS to achieve the desired result. I'll do some experimentation.
Thanks so much for the easy fix for the dashed lines. I used your code and it worked great.
As for lining up "impact" under "send," I went to the site you suggested and my brain almost exploded. An expert coder I'm not, so I'm afraid I'm still mystified as to how to make this work without messing up the rest of the form.
I'll spend some more time trying to puzzle it out, but in the meantime, if you manage to find an experiment of your own that works, I'll do cartwheels.
Thanks again for your help.
Get ready to do cartwheels! :)
Edit your injected CSS like this:
You can fine tune the top property by a pixel or two to suit your taste but beware of browser inconsistencies.
This is fabulous! My form now looks absolutely perfect, and I couldn't have done it without you.
Thanks so much for taking the time to help me make my form look "perfect."
The lesson in HTML should come in handy in the future, too.
Now you'll have to excuse me while I run off to perform a few of those cartwheels. ;-)
It was a pleasure to assist you. I used this tutorial (specifically page 4) to help me figure out what to do.
Hopefully, you didn't injure yourself while performing the gymnastics! LOL
Ha ha! I was very careful. ;-)
Thanks for the tutorial link. I'll have to check it out.
Have a lovely weekend!