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

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

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! 

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!

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

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,

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?

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

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.