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

    Hide prices and tickboxes on purchase form?

    Asked by tmgdesign on August 03, 2013 at 02:26 PM

    Hello,

    I am trying to create a PayPal form that will allow the user to select a number of options and then pay. I am aware that you can only have 1 set of pricing options per product, so I have made the form using different products as options. I was just wondering how I would hide the tickboxes, the prices for the individual products, and the small text under the dropdowns using CSS. I have attached 2 screenshots of how it looks now, and how I would like it to look.

    Thanks in advance.


    Matt

    Page URL:
    http://form.jotformeu.com/form/32145147087352

    Screenshot
    purchase prices paypal form product different
  • Profile Image

    Answered by pinoytech on August 03, 2013 at 03:38 PM

    Hi Matt,

    Can you please take a look at this cloned form if this is something you want to achieve?

    http://www.jotformpro.com/form/32145649751963

    If yes, inject this custom css into your form.

    #input_3_1005, #input_3_1006, #input_3_1007 {

    display: none !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 03:49 PM

    Yes, I would like the tick boxes removed, thankyou. I would also like the prices next to each of the titles (£30.00, £9.00, £4.00) hidden as well as the small text under the dropdowns (Design options, quantity, paper type) so it looks like the screenshot.

    Thanks

  • Profile Image

    Answered by pinoytech on August 03, 2013 at 04:31 PM

    Hi,

    Inject this custom css into your form:

    .form-product-details, .form-sub-label {

    display: none !important;

    }

    Cloned form: http://www.jotformpro.com/form/32145649751963

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 04:41 PM

    Brilliant, thanks! The FINAL thing.. is there a way of lining up the total and submit button with the boxes? As they are alligned slightly left at the minute. 

    Thanks so much for your assistance so far!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 04:46 PM

    And also make the gaps inbetween shorter, like the form on the right of this webpage http://www.printing.com/uk/designs/info/32673/solicitors-business-card-

  • Profile Image

    Answered by pinoytech on August 03, 2013 at 06:13 PM

    Hi,

    I've updated the clone form again, kindly take a look at it if I did it correctly or not: http://www.jotformpro.com/form/32145649751963

    Code:

    .form-payment-total {

    position: absolute;

    margin-left: 10px !important;

    margin-top: -10px !important;

    }

    .form-submit-button {

    position: absolute;

    margin-left: 10px !important;

    margin-top: -10px !important;

    }

    .form-product-item {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    }

    #input_3_custom_1005_0, #input_3_custom_1006_0, #input_3_custom_1007_0.form-dropdown {

    margin-top: -23px !important;

    position: absolute;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 06:23 PM

    Thanks so much!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 06:34 PM

    If you could do the last thing for me, if I added a coupon box, how would I remove the border around the box, and apply all of the above codes to it?

    Thanks for everything

  • Profile Image

    Answered by pinoytech on August 03, 2013 at 07:01 PM

    Kindly take a look the cloned if this is what you want to achieve:

    http://www.jotformpro.com/form/32145649751963

    If yes, inject this custom css into your form:

    #cid_3 div {

    border: none !important;

    }

    Feel free to contact us again, if you need futher assistance.

    Thank you!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 07:31 PM

    That's perfect, but I'm having trouble adding everything to the CSS. This is my final form, with all my new fields etc added. Could you apply everything and then send me the finished CSS link? If you can, that would be much appreciated. Could you also make the 'coupon code' bit not bold. 

    http://form.jotformeu.com/form/32145147087352

    Thanks so much

  • Profile Image

    Answered by pinoytech on August 03, 2013 at 07:47 PM

    Hi,

    I've already injected the custom css into your form. Kindly take a look at your form now: http://www.jotformeu.com/form/32145147087352 

    Here's the custom css:

    #input_3_1005, #input_3_1006, #input_3_1007, #input_3_1008 {

    display: none !important;

    }

    .form-product-details, .form-sub-label {

    display: none !important;

    }

    .form-payment-total {

    position: absolute;

    margin-left: 10px !important;

    margin-top: -10px !important;

    }

    .form-submit-button {

    position: absolute;

    margin-left: 10px !important;

    margin-top: -10px !important;

    }

    .form-product-item {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    }

    #input_3_custom_1005_0, #input_3_custom_1006_0, #input_3_custom_1007_0, #input_3_custom_1008_0.form-dropdown {

    margin-top: -23px !important;

    position: absolute;

    }

    #cid_3 div {

    border: none !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 08:46 PM

    For some reason the coupon bit is still showing up as bold :(

  • Profile Image

    Answered by tmgdesign on August 03, 2013 at 09:07 PM

    And its gone all funny on me! grr.. could you reapply the settings please

  • Profile Image

    Answered by jefreylandicho on August 04, 2013 at 03:44 AM

    Please inject this code to make the coupon font normal(not in bold).

    #coupon-header { font-weight:normal !important;}

  • Profile Image

    Answered by tmgdesign on August 04, 2013 at 09:46 AM

    Thanks guys

  • Profile Image

    Answered by tmgdesign on August 04, 2013 at 09:06 PM

    I've got another question... is it possible to add conditions to a PayPal form? I'm going to be selling printing services such as business cards, so I have a few options such as single or double sided, quantity etc. However, I would like it so if they select something from a dropdown, the dropdown below changes to another product. For example:

    Single or double sided     (DROPDOWN)

    Quantity (DROPDOWN)

    If single is chosen, the quantities in the box show the prices for single sided cards. If double sided is chosen, the quantities show the prices for the double sided cards. 

    Is this possible?

  • Profile Image
    JotForm Support

    Answered by Welvin on August 05, 2013 at 01:06 AM

    Hi,

    Please open a separate thread for that question and we'll assist you there. 

    Thanks