CSS: How can I omit some information from "subscrition/product" details?

  • jldance
    Asked on June 11, 2020 at 2:21 PM

    Dear JotForm Support Team,

    We would like to omit some information from our list of "subscriptions" offered.

    This is our form: https://form.jotform.com/200867437036154

    Under "Levels of Support", we only want to list the amounts, as follow:

    - Lovers - $100

    - Believers - $250

    ...

    - I'd like to make a gift of ___


    Is there a way to do that?

    Thank you in advance,

    Julie


  • Amin JotForm Support
    Replied on June 11, 2020 at 3:42 PM

    Hi there, Julie!

    Thanks for reaching out to us!

    Could you please allow me some time to closely look into this?

    I promise I will be right back the soonest I can.

    Your patience is most appreciated.

  • Amin JotForm Support
    Replied on June 11, 2020 at 3:51 PM

    Hi again, Julie!

    Thanks for patiently waiting.

    Please inject the following CSS code into your form:

    .form-product-details{
      display: none;
    }

    Related guide:

    How-to-Inject-Custom-CSS-Codes


  • jldance
    Replied on June 11, 2020 at 3:58 PM

    Thanks Amin! It kind of worked... the problem is that it also omits the field for people to chose the amount for their contribution...


    https://form.jotform.com/200867437036154

  • Amin JotForm Support
    Replied on June 11, 2020 at 5:40 PM

    Hi again, Julie!

    I'm afraid it won't be possible since it's part of product details.

    Alternatively, you can add an additional simple input field, then use Form Calculation widget to add donation value to total price.

    Related guide: How-to-Perform-Form-Calculation-Using-a-Widget

    I hope I have been of any help.

  • jldance
    Replied on June 11, 2020 at 5:57 PM

    Ok, I will take a look at that guide, thank you.

    Although we have that exact set-up on a different for, I just don't know how it was done: https://form.jotform.com/82777026784166

    Is there anyway we can replicate that?

    Thank you,

    Julie

  • Amin JotForm Support
    Replied on June 11, 2020 at 7:20 PM

    This form seems to be different, besides all products details are right there.

    Can you please allow me some time to try to work it out and find a workaround to show the custom price field?

    Your patience is most appreciated.

  • Amin JotForm Support
    Replied on June 11, 2020 at 7:35 PM

    Please remove the previous CSS code and try the following:

    .form-product-details{
      visibility: hidden !important;
    }

    .form-product-custom_price{
     visibility: visible !important;
     
    }


  • jldance
    Replied on June 12, 2020 at 9:26 AM

    Hi Amin,

    This is great, it absolutely works :)

    I know I am being very detailed, but is there a way to align the "products" with all the other fields in the form? I tried just the align labels left but it is not working on products. I would also like to have the product lines closer together. I tried changing that in the advanced designer but then it will also change the spacing for the credit card details, which are perfectly spaced out.

    https://www.jotform.com/build/200867437036154

    I understand if this is too much of a request but I though I would ask!

    Thank you for all your help,

    Julie

  • BJoanna
    Replied on June 12, 2020 at 10:16 AM

    I'm not sure if I understood your question correctly. Do you want to reduce the spacing between products? If so, you can add this CSS code to your form:

    .form-product-item {

        padding: 0px;

        margin: 0px;

    }

    Result:

    1591971308products Screenshot 10

    If I did not understand your question correctly, please explain in more detail what are you trying to achieve. 

  • jldance
    Replied on June 12, 2020 at 6:28 PM

    Thank you so much, that solves the problem about the spacing.

    The other question was about the alignment of the products. Instead of being directly under the label I would like for them to be aligned with the "box" above, like in this form: https://form.jotform.com/82777026784166.

    Does that make sense?

    Thanks again,

    Julie

  • Amin JotForm Support
    Replied on June 12, 2020 at 7:59 PM

    Please inject the following CSS code into your form:

    .form-product-item-detail{
       width: 300px;
      
    }

    Result:

    1592006328Screenshot 2020 06 13 The Easi Screenshot 10

  • jldance
    Replied on June 13, 2020 at 11:35 AM

    That's great, thank you so much!

    Just so you know, the code didn't work on the published page so I added !important and it looks great.

    Thanks again,

    Julie

  • Amin JotForm Support
    Replied on June 13, 2020 at 1:01 PM

    That's great!

    We're glad we could be of help.

    Should you have any further inquiries, we will be more than happy to help.