Modifying the color and look of the options within the Paypal Payment Tool

  • Profile Image
    montsho
    Asked on August 10, 2015 at 03:59 AM

    Hey there amazing Jotform support! 

    I want my form check boxes to all LOOK THE SAME.

    I'm trying to make two modifications:

    I'm trying to change the default checklist within the Paypal tool so that the actual check box is a white square box (white outline, transparent background, square to look like the rest of my form).

    AND

    I'd like to change the look of the coupon "Apply" button so it's just plain like the rest of my form.

    AND

    Can I spread the Paypal tool over multiple columns? I'd like the coupon button to be on the same row as the actual products to save space.

     

    Is it possible to make those changes? If so, how?

  • Profile Image
    ashwin_d
    Answered on August 10, 2015 at 07:33 AM

    Hello montsho,

    Let me first try to understand your requirement correctly. You want to implement the following changes in your form:

    #1. The look & feel of product checkbox of your PayPal payment question needs same as the other checkbox of your form.

    #2. Can you please explain the changes you want to implement in the Apply button? Do you want to remove the rectangular box of coupon or you want to change the style of apply button?

    #3. Do you want to move the coupon box next to the paypal product side by side? Something as displayed in the following screenshot:

     

    We will wait for your response.

    Thank you!

  • Profile Image
    montsho
    Answered on August 10, 2015 at 10:14 AM

    1. It took me forever to reply because your image uploader IN NOT WORKING. See screenshot. I tried it in different browsers like 15xs and still nothing.

    I just uploaded the image to Facebook so I'm hoping that'll work.

     

  • Profile Image
    montsho
    Answered on August 10, 2015 at 10:25 AM

    My last response posted as private and it's not. Not sure why that happened.

  • Profile Image
    Mike_G
    Answered on August 10, 2015 at 03:54 PM

    I would like to apologize for the inconvenience. I was able to figure out how you can solve numbers 1 to 3 on the list you have provided using CSS, however, I'm still trying to work on numbers 4 and 5. 

    Here is the code that you can add to your form: 

    #id_97{

    height: 100px !important;

    }

    #coupon-container{

    margin: 0px !important;

    position: relative !important;

    top: -105px !important;

    float: right !important;

    }

    #id_99{

    margin-top: 0px !important;

    }

    .form-section .form-line:nth-child(n+2){

    position: relative !important;

    top: -100px !important;

    }

    .form-section{

    height: 1623px !important;

    }

    #coupon-container{

    border-radius: 0px !important;

    border: 1px solid white !important;

    }

    #coupon-button{

    background-color: #eac42b !important;

    border: 2px solid #eac42b !important;

    color: white !important;

    }

    #input_97_1031, #input_97_1030{

    height: 18px !important;

    width: 18px !important;

    }

    You may use this guide on How-to-Inject-Custom-CSS-Codes to your form.

    As for the result, your form would look like this:

    I hope this helps. Thank you.

  • Profile Image
    montsho
    Answered on August 10, 2015 at 04:10 PM

    I'm gonna give it a try. I just wanted to say I'm not complaining. I hope these work. I love you guys but my only issue is that your forms are not visually uniform and/or aesthetically pleasing. I'm just taking the time to see if I can make a super sleek, super clean form. Thank you guys for being a great support team. AND PLEASE FIX THE IMAGE UPLOADER.

  • Profile Image
    Mike_G
    Answered on August 10, 2015 at 06:08 PM

    I have viewed your form and found out that you've already applied the changes.

     

    Now, for your questions 4 and 5. 

    You can add this codes to your form: 

    #input_97_1031, #input_97_1030 {

    display: none;

    }

    label.form-product-container:before {

    border: 2px solid #ffffff  !important;

    border-radius: 0 !important;

    }

    label.form-product-container:before {

    background-color: transparent;

    border: 2px solid #828282 ;

    }

    label.form-product-container:before {

    border-radius: 2px;

    box-sizing: border-box;

    content: "";

    cursor: pointer;

    display: inline-block;

    height: 18px;

    left: 4px;

    margin-right: 4px;

    position: absolute;

    vertical-align: baseline;

    width: 18px;

    }

    label.form-product-container:after {

    background-color: #ffffff ;

    box-shadow: 0 3px 0 0 #ffffff , 3px 3px 0 0 #ffffff , 6px 3px 0 0 #ffffff , 9px 3px 0 0 #ffffff , 8px 6px 0 0 #234070 , 10px 1px 0 0 #234070 ;

    transform: rotate(-45deg);

    }

    label.form-product-container:after {

    content: "";

    display: inline-block;

    height: 4px;

    left: 10px;

    opacity: 0;

    position: absolute;

    top: 14px;

    width: 4px;

    z-index: 10;

    }

    label.form-product-container {

    float: left;

    line-height: 18px;

    margin-left: 0;

    text-indent: 27px;

    }

    .form-product-item input:checked + label:after {

    opacity: 1;

    }

    And that should result to this, 

    Here is, by the way, the form I have used for testing. 

    I hope this helps. Let us know if you need any further assistance. Thank you.