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

    Is it possible to have amount dropdown before label instead of after?

    Asked by RainbowChorale on April 20, 2017 at 12:56 PM

    Hello,

    I use your form for selling concert tickets for a community choir.  I love your service, but, when using the PayPal payment wizard, I was not crazy about having users first check a checkbox, and then have them select the number of tickets. It was odd. It should be one simple step, not two.

    Well, I did find a solution using CSS in your forums. And that is working great. But I can't figure out a way to have the select-dropdown (1, 2, 3, etc.) before the label on the same line as opposed to, on the line after the label.

    Is there a way to do this using CSS?

     

    I am attaching a screenshot that shows how I would prefer the form to appear

    Page URL:
    http://thebvc.org/BVC-concert-evolution-musical-theater

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kiran on April 20, 2017 at 02:32 PM

    Please try injecting the following CSS code to the form to display the amount before the product name.

    span.form-product-details {

    display: none;

    }

    .form-product-name:before{

        color: MediumVioletRed;

        font-style: normal;

        font-variant-numeric: lining-nums;

        font-weight: 400;

        font-size: 15px;

    }

    #product-name-input_4_1001:before {

    content: '$20.00 ';

    }

    #product-name-input_4_1003:before, #product-name-input_4_1002:before {

      content: '$15.00 ';

    }

    The products should be displaying as shown below on the form:

    Hope this information helps! 

  • Profile Image
    JotForm Support

    Answered by Kiran on April 20, 2017 at 02:33 PM

    Here is the guide to inject the CSS code to the form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Thanks!

  • Profile Image

    Answered by RainbowChorale on April 20, 2017 at 11:19 PM

    Kiran.

    Thank you so much. But your solution is not exactly what I am trying to do. I wanted the dropdown amount selection input (1, 2, 3, etc) to appear to the left of the ticket type and price, not underneath. If you look at my screenshot, that is what I want the form to look like. Thanks.

     

    Dave

  • Profile Image
    JotForm Support

    Answered by candy on April 21, 2017 at 04:25 AM

    Dear Dave,

    Please inject the following CSS codes in order to make them appear as you can see in the following screenshot below:

    [data-type='control_paypal'] label {

       margin-left: 45px !important;

    }

    [data-type='control_paypal'] .form-sub-label-container {

       position: absolute;

       top: 0px;

       left: -3px;

    }

    This is the best case that I can do. I hope this helps.

    Regards,

  • Profile Image

    Answered by RainbowChorale on May 04, 2017 at 03:30 PM

    I am still having issues with the select box (amount) getting cut off. I've fixed some issues, like the lack of any spacing after the select -- but the input itself visually gets cut off.

    I've tried many times to fix the issue using my browser's web inspector tools and custom injected css -- but I cannot locate how and where to fix it.

     

    (see my original screenshot showing how I intended the form to appear when viewed)

     

    ALSO:

    Overall, this is a common form design I want to continue to use in the future. I don't think it is unreasonable for me to request a simple amount-select-box next to the product name. Your current default set-up of having users check off the item, then select the amount is stupid.

    I am finding it really difficult to create new forms or clone existing forms -- then having to either re-do or jerry-rig the injected CSS from scratch. Is there a better way?

  • Profile Image

    Answered by RainbowChorale on May 04, 2017 at 03:31 PM

    In case you need an URL: http://thebvc.org/BVC-concert-evolution-musical-theater

  • Profile Image
    JotForm Support

    Answered by Kiran on May 04, 2017 at 03:46 PM

    It looks like the other injected CSS code to the form is affecting the height of the product fields on the form. Please also add the CSS code below so that the product items should be displaying correctly.

    .form-product-item  {

    height: 35px;

    }

    Since you wanted to change the position of product labels which is only possible by injecting the CSS code, and the other code added should be affecting the appearance of the form. The form should be working normally. You may also edit the CSS code from the Advanced Form designer so that you can select the fields on the form and change it's corresponding CSS code by it's ID.

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.