CSS for image and descriptions for Braintree subscriptions and purchase order

  • anathothgarden
    Asked on February 9, 2018 at 12:32 PM

    Would someone please copy and paste the CSS code I need for each of these forms in order to add an image and description for these subscriptions?

    Thank you!

    https://form.jotform.com/80394510929158

    https://form.jotform.com/80394713629160

    https://form.jotform.com/80385056554157

    https://form.jotform.com/80395332329155


  • Adrian
    Replied on February 9, 2018 at 1:07 PM

    You can add images for products to these forms https://form.jotform.com/80394510929158, https://www.jotform.com/build/80395332329155 because you are using Purchase Order integration and you have created the products inside JotForm.

    Just edit the product that you want to add an image to, choose an image for that product and save.

    1518198602Fullscreen 2 9 18 6 45 PM Screenshot 10


    On your other forms, you are using Braintree integration, and it looks like the subscriptions are being fetched from Braintree, so there is no option to choose an image for those products in JotForm. I am not sure if you have this option in the Braintree website.

    You can improvise with CSS to add images and descriptions to these subscriptions. Here is a sample with the changes I made for one product.
    https://form.jotform.com/80394826255968

    15181996122018 HarvestShare Subscription Screenshot 21

    CSS Code for the Description and the image. you would need to get the ID of each subscription and add separate CSS rules for each.

    #product-name-input_16_tq5r:after {

      content: 'Product Description goes here. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.';

      display: block;

      font-size: 12px;

      padding-left: 20px;

    }

    #product-name-input_16_tq5r:before {

      /* IMAGE URL */

      background-image: url(http://placehold.it/100x100);

      content: '';

      width: 100px;

      height: 100px;

      float: right;

    }


    Let us know if you need further help.


  • anathothgarden
    Replied on February 10, 2018 at 9:05 AM

    Thank you. I understand that I can add an image using the purchase order form, but I also need to add a description. I am using a Braintree integration on one form, and a purchase order form on the other, and I need them to look the same. 

    Here's an example of some forms I have designed on a different account; one with Braintree, the other with purchase order. A support person sent me the CSS code so that I could inject it into the CSS for each form. I don't know how to find the ID for each form to do it myself.

    https://form.jotform.com/80308191822150

    https://form.jotform.com/80308191822150

  • Victoria_K
    Replied on February 10, 2018 at 10:13 AM

    The ID of the form is this long number:

    1518275207CSS for image and descriptions Screenshot 10

    A'll leave this guides here:

    - this link would help you in case you want to clone the form How-to-Clone-an-Existing-Form-from-a-URL

    - and this one will be useful when injecting custom CSS code that my coleague has provided earlier How-to-Inject-Custom-CSS-Codes


    P.S. Get back to us if you still find it difficult to inject custom CSS codes.