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.


  • Profile Image

    Creating multi column form with pictures down the side

    Asked 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

    Screenshot
    text field picture Calculated Value same line
  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 31, 2014 at 03:40 AM

    Hello marcspeth,

    There are actually two options to achieve your requirement:

    1. Add normal image, text box and the "Form Calculation" widget and align them together in one line. You can then inject custom css code in your form to further customize it as per your requirement.

    2. Add one of our in built payment question which will give you all the flexibility you want to achieve in your form. You can add custom quantity box and other options as well.

    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

    Thank you!

  • Profile Image

    Answered by marcspeth on March 31, 2014 at 11:40 AM

    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?

  • Profile Image

    Answered by Carina on March 31, 2014 at 12:28 PM

    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:

    label[for="input_21"]

    {

    width: 120px

    }

    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.

  • Profile Image

    Answered by marcspeth on March 31, 2014 at 01:53 PM

    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)

    Almost there

    No matter what I do the preview does NOT look like the Create Form page

  • Profile Image
    JotForm Support

    Answered by Mike_T on March 31, 2014 at 02:52 PM

    The issue is caused by added Hover Text on your first and second calculation fields.

    Please remove it, and then re-check the form.