Hide prices and tickboxes on purchase form?

  • Profile Image
    tmgdesign
    Asked 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

  • Profile Image
    pinoytech
    Answered 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
    tmgdesign
    Answered 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
    pinoytech
    Answered 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
    tmgdesign
    Answered 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
    tmgdesign
    Answered 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
    pinoytech
    Answered 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
    tmgdesign
    Answered on August 03, 2013 at 06:23 PM

    Thanks so much!

  • Profile Image
    tmgdesign
    Answered 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
    pinoytech
    Answered 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
    tmgdesign
    Answered 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
    pinoytech
    Answered 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
    tmgdesign
    Answered on August 03, 2013 at 08:46 PM

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

  • Profile Image
    tmgdesign
    Answered on August 03, 2013 at 09:07 PM

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

  • Profile Image
    jefreylandicho
    Answered 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
    tmgdesign
    Answered on August 04, 2013 at 09:46 AM

    Thanks guys

  • Profile Image
    tmgdesign
    Answered 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
    Welvin
    Answered on August 05, 2013 at 01:06 AM

    Hi,

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

    Thanks