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

    Reorder elements on jotform to display them horizontally instead of vertically

    Asked by Atbam on September 21, 2014 at 02:54 PM

    Hi all, I'm new to Jotform  and have been trying to place next to each other rather than vertically the layout I'm trying to do is like this. So use them as my heading then enter my sums underneath to give me my totals

    Blocks     bricks     mortar sand  cement

       4            7            7         7      8   

     

    If anybody can help much appreciated. Thank you. Carl  

     

    JotForm organize horizontal layout align elements
  • Profile Image

    Answered by Ben on September 21, 2014 at 06:09 PM

    Hi Carl,

    There are many different ways to align the values like that, but I am not sure exactly what you would like to do.

    Based on what I understood I have created this jotform for you to check. If it is what you were looking for you can clone it and based on that do the calculations, if it is not, do let me know more and we can see what can be done.

    http://form.jotformpro.com/form/42636545712961

    If you would like to clone the form you can see how to do that here: How to Clone an Existing Form from a URL

    Now, I know few things about mixing up some concrete, but I think that it would be best to leave the calculations to you ;)

    If you however need any help setting them up, do let me know also, if this is what you wanted to achieve do let me know and I can guide you through what I did to make them like that so that you can do the same later on as well :)

    Best Regards,
    Ben

  • Profile Image

    Answered by Atbam on September 22, 2014 at 05:31 AM
    Hi Ben, thanks to get back to us.

    I am quite confident of being able to do my sums, it is laying out the boxes next to each other as you have in the link you have sent. I cannot find how to put them side by side can you show me a method of doing this, please.

    Best regards,
    Carl

    ...
  • Profile Image

    Answered by Ben on September 22, 2014 at 09:05 AM

    Hi Carl,

    If you want to create such jotform, I would suggest cloning the one I gave link above: http://form.jotformpro.com/form/42636545712961

    Now if you would like to alter some other jotform to be similar to that, it would be best to give us the link to it.

    Now the step by step what I did to get it looking like that:

    I have first added the text box widgets to the form by adding one and setting its width, then duplicating it.

    Now to shrink it

    Now duplicate the widget

    Now we get something that looks like this:

    A thing to note here is their position because if we want to make them all in one row, but have all the other widgets as they were, we will need this.

    If you take another look at the jotform you can see how to count it:

    OK, so now we see that the fields we are interested in are under numbers 2, 3, 4, 5 and 6 so lets see how we can use this :)

    .form-line:nth-child(2), .form-line:nth-child(3), .form-line:nth-child(4), .form-line:nth-child(5), .form-line:nth-child(6)
    {
        display:inline-block;
        margin-left: 2px;
        width:100px;
    }

    That is the CSS code that we will use to make them fall in line. Now notice the
    :nth-child(2),
    :nth-child(3),
    :nth-child(4),
    :nth-child(5) and
    :nth-child(6)

    As you can see we placed those numbers in the brackets telling the CSS engine which widgets we are interested in. So if your jotform has different fields, it is easy to update the CSS above to handle those specific cases.

    Now to use those CSS commands you should take a look at this simple tutorial here Inject Custom CSS Codes

    What next? Well your jotform should now look like this:

    If it does, congrats, you did it.

    If not, do let us know and we will take a look what might need to be changed.

    Do let me know if this helps you and if you need help with specific jotform, do give us a link and we will take a look at it.

    Best Regards,
    Ben

  • Profile Image

    Answered by Atbam on September 22, 2014 at 03:41 PM
    Ben
    Thank you so very much.

    ...
  • Profile Image

    Answered by Ben on September 22, 2014 at 03:45 PM

    Hi Carl,

    You are welcome, I am glad if you were able to use that in your jotforms.

    If you have any other questions in the future, feel free to contact us :)

    Best Regards,
    Ben