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

    Right align conditional fields

    Asked by prowrestlingtees on May 05, 2016 at 11:46 AM

    I wanted to somehow match this example for the bottom Sub Total, Shipping & Handling, and Grand Total. I wanted to right align them under the country drop down

     

    And also I changed the width on dropdown input 7, 9, 10, 11 to 280px

    How can I match the rest of the fields to these?

     

     

    Page URL:
    https://form.jotform.com/61175259404152

    right align right JotForm uploads jpg www
  • Profile Image
    JotForm Support

    Answered by KadeJM on May 05, 2016 at 12:04 PM

    It seems to me that you need some help adjusting the styling of your form with right aligning some of your fields and matching the field widths up.

    You can do the majority of this with the form designer but it just takes a little bit of tweaking sometimes to get it looking good.

    Please see https://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- to learn more about how to use it to do fantastic things.

    Additionally, if you need more help just let us know and we'll try to assist with this further as soon as we are able to find something that works for you for the adjustments for those fields as you asked.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 05, 2016 at 01:08 PM

    UPDATE -

    I've made some changes on this updated copy of your form below.

    https://form.jotform.com/61254944813963  [CLONE ME!]

     

    I've still gotta fix 3 of the fields but wanted to check with you to see if this might be kinda what you are going for? 

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 01:14 PM

    That's exactly what Im going for

     

    How can I achieve the above result?

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 01:22 PM

    The only other issue I was having is when I'm using the embed code, it doesn't become responsive. Same with the full code. So I have to write a bunch of media queries for different fields. Any thoughts?
  • Profile Image

    Answered by victor on May 05, 2016 at 01:34 PM

    To assist you better I have created a new thread that will be answered shortly by our support team

    https://www.jotform.com/answers/833446

    We prefer to have one question to a thread. This way we can give the best answer possible with our getting confused.

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 04:37 PM

    Also how can I make sure that the shipping and handling and grand total fields have dollar signs?

  • Profile Image

    Answered by victor on May 05, 2016 at 04:53 PM

    You can enter a mask for the SHIPPING & HANDLING field:

    For the calculation field, enter the wizard and just add the DOLLAR sign at the beginning of the formula.

    It should display something like:

    If you require additional assistance, please let us know.

    have a great day.

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 05:32 PM

    I'm almost there. Just need to move those fields to the right. As seen here

     

     

    http://www.prowrestlingtees.com/tagteampaypalonly

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 05, 2016 at 06:02 PM

    You can try injecting the following code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_21,#id_15,#id_5 {

        padding-left: 300px;

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 06:05 PM

    Anyway to have them the title and field be next to each other? Like your colleague on top was trying to do?

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 05, 2016 at 06:19 PM

    Yes, make sure the label alignment is set to the left:

    And then inject the following code instead of the previous one: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_21,#id_15,#id_5 {

        padding-left: 200px;

    #cid_21,#cid_15,#cid_5{

        width: 55px;

    }

    Hope that helps.

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 06:26 PM

    I'n actually looking for something like this right under the country drop down

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 05, 2016 at 06:37 PM

    Something like this? https://form.jotform.com/61256679143966 

    Code:

    #cid_21,#cid_15,#cid_5{

        width: 55px !important;

    }

    #id_21,#id_15,#id_5 {

        padding-left: 240px !important;

     

    You may simply clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

  • Profile Image

    Answered by prowrestlingtees on May 06, 2016 at 11:02 AM

    Yes just like that. How can I have the amounts be next to the field names? Like in my example. And also remove the spacing between the field names

  • Profile Image

    Answered by victor on May 06, 2016 at 11:46 AM

    I have adjust the CSS of my colleague a bit so the form will look siimilar to what you are indicating in your image above.

    /*increase a bit the width of the label so it will be in a single line, also place labels to the right*/

    #label_15,#label_21,#label_5 {

        text-align : right !important;

        width : 160px !important;

    }

     

    #cid_21,#cid_15,#cid_5 {

        width : 50px !important;

    }

    /*Adjust the spacing of each field, reducing the top and bottom space of of them to 0px*/

    #id_21,#id_15,#id_5 {

        padding-left : 220px !important;

        padding-bottom : 0px !important;

        padding-top : 0px !important;

    }

    Please let us know if this helps.