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

    How to line up Prices and Names into Columns in the Payment Tool

    Asked by churchsaver on July 17, 2014 at 12:53 PM

    I have asked this before, but so far there has not been anyone who has a way to accomplish this.  Posting again in hopes that there is an answer now. :)

     

    I have a form with a payment tool.  I would like the columns of the payment tool to line up (see screenshot).  Right now, the only way that I have been told to accomplish this is to put a bunch of .......'s after the product name to push the price out enough on each one.  This really messes with my CRM.  I need a way to do this without the ......'s.  

     

    Thanks in advance for your help!

    Page URL:
    www.cashforteststrips.com/free-quote

    Screenshot
    payment tool line up prices payment tool column prices line up align prices name payment integration
  • Profile Image

    Answered by churchsaver on July 17, 2014 at 12:55 PM

    PS - I don't need the red lines... they are just visual examples of where I need the columns to be.  

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 17, 2014 at 04:44 PM

    I am currently looking into a custom CSS way. I will get back to you via this thread.

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 17, 2014 at 09:38 PM

    I am sorry for the delay. You can remove the dots, and add the following CSS to your custom styles:

    .form-product-details {
    float: right;
    margin-right: 300px;
    }
    .form-sub-label-container {
    position: relative;
    top: -20px;
    }
    .form-sub-label-container label {
    display: none;
    }

  • Profile Image

    Answered by churchsaver on July 18, 2014 at 05:05 PM

    I think that might just work!  Although 1 thing did mess up..... looks like one of my prices .... Accu-Chek Multiclix Lancets is not lining up.  Any ideas on how to fix that?  Thanks!

     

     

  • Profile Image

    Answered by churchsaver on July 18, 2014 at 05:22 PM

    Looks like it also messed up my text where it asks for name and address.  Hope you can help! :)

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 18, 2014 at 06:08 PM

    Although 1 thing did mess up..... looks like one of my prices .... Accu-Chek Multiclix Lancets is not lining up.

    Please remove the following CSS to fix this:

    label[for="input_1_1053"]{width: auto !important;display: inline-block;vertical-align: middle;}

    Looks like it also messed up my text where it asks for name and address. 

    It can be done with the following CSS:

    .form-product-details {
    float: right;
    margin-right: 300px;
    }
    .form-product-item .form-sub-label-container {
    position: relative;
    top: -20px;
    }
    .form-product-item .form-sub-label-container label {
    display: none;
    }

    Added .form-product-item to the current CSS.

    Thank you.

  • Profile Image

    Answered by churchsaver on July 18, 2014 at 06:43 PM

    The second part (where the address and name messed up) worked fantastically!

     

    The first part, where I was to delete the part of the code didn't work how I needed it to.  I would like for the prices to all line up as they currently are.  There is just one that isn't lining up.... AccuChek Multiclix lancets... the $2 price isn't lining up like the other prices are.  I need it to line up just like the other product prices are.  (Hope I am explaining that well enough).

     

    Thanks so much for all of your help!!!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 19, 2014 at 05:32 AM

    Hello churchsaver,

    Please take a look at the following cloned form and see if this meets you expectation in terms of the alignment of product prices: http://form.jotformpro.com/form/41992133086962?

    If the cloned form looks good, please replace your existing css code of your form with the following custom css code where I have removed the code which was causing the alignment issue:

    .form-product-item {width: 700px !important;}.form-product-item br {display: none;}.form-product-item .form-sub-label-container {width: 275px !important;float: right;}input[name*="q1_tellUs1[special"] {float: left;}label[for="input_1_1053"]{width: auto !important;vertical-align: middle;}

    .form-product-item .form-checkbox {display: none;} .form-all {

    background: url("http://cashforteststrips.com/wp-content/uploads/2014/06/boxquote4.png") repeat-y; center;

    min-height: 410px !important;

    overflow: visible !important;

    }

    .form-section{margin-left:50px !important;}

    span.form-product-details {font-size: 11px;color: #000000;}

    .form-product-details {

    float: right;

    margin-right: 300px;

    }

    .form-product-item .form-sub-label-container {

    position: relative;

    top: -20px;

    }

    .form-product-item .form-sub-label-container label {

    display: none;

    }

    You can also copy the custom css code from the following URL:  http://pastie.org/pastes/9404777/text

    The following guide should help you in injecting the custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes