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.
Creating multi column form with pictures down the sideAsked by marcspeth on March 30, 2014 at 07:51 PM
1. How can I change the width of just one text field without changing EVERY text field on the form (E.G. keep the width of the name and email labels the same as they were while making the width of the item labels much wider)
2. Is it possible to have a text field to the right of an input field with a calculated value - as in: Item #1 .... (entered value) = $(calculated line total)
3. .... and then have the total of all lines near the bottom of the list (see my screenshot)
4. Is it possible to place a picture to the left (on the same line with) a text field and entry field (again see my screenshot
text field picture Calculated Value same line
There are actually two options to achieve your requirement:
Please take a look at the following cloned form where I have added both the options: http://form.jotformpro.com/form/40891225205954?
Do check and get back to us which option you want to go ahead with and we will do the needful. Feel free to clone the above form for a closer look. The following guide should help you in form cloning: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
I have cloned your form and played with it a bit and I like option 1 the best (Putting the image, textbox and calc aligned together) but I havent been able to figure out how to repeat that for several lines down the page. Just doing a "duplicate" on each part of the line leaves me with multiple parts that I cannot align with each other.
And how can I make the item description wider while leaving the "x $2.53" the same size?
First you need to find out the ID of the field you wish to increase. You can find it in the fields' properties:
Then you can inject the following css code:
The blue part is the ID, the orange is the width. Edit them as needed.
Let us know if we can be of more assistance.
I figured out where to inject the CSS code, but it seems to have no effect. I have tried changing the size to multiple different values with no visible effect on my page.
But I'm getting closer. The first two lines are still messed up but lines 3 & 4 look good (even though in the form editor all 4 lines look identical)
No matter what I do the preview does NOT look like the Create Form page
The issue is caused by added Hover Text on your first and second calculation fields.
Please remove it, and then re-check the form.