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

  • Profile Image
    jldance
    Asked on June 11, 2020 at 02: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


  • Profile Image
    Amin_N
    Answered on June 11, 2020 at 03: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.

  • Profile Image
    Amin_N
    Answered on June 11, 2020 at 03: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


  • Profile Image
    jldance
    Answered on June 11, 2020 at 03: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

  • Profile Image
    Amin_N
    Answered on June 11, 2020 at 05: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.

  • Profile Image
    jldance
    Answered on June 11, 2020 at 05: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

  • Profile Image
    Amin_N
    Answered on June 11, 2020 at 07: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.

  • Profile Image
    Amin_N
    Answered on June 11, 2020 at 07: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;
     
    }


  • Profile Image
    jldance
    Answered on June 12, 2020 at 09: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

  • Profile Image
    BJoanna
    Answered 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.PNG

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

  • Profile Image
    jldance
    Answered on June 12, 2020 at 06: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

  • Profile Image
    Amin_N
    Answered on June 12, 2020 at 07:59 PM

    Please inject the following CSS code into your form:

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

    Result:

    1592006328Screenshot_2020-06-13 The Easi

  • Profile Image
    jldance
    Answered 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

  • Profile Image
    Amin_N
    Answered on June 13, 2020 at 01: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.