Editing the Jotform credit card image

  • Profile Image
    jolomero
    Asked on February 19, 2013 at 07:12 PM

    We are using Paypal Pro to embed a credit card interface into our form, so our registrants don't have to go to the Paypal page.

    Beside the button for credit cards, there is an image (attached) that includes icons for Discover and Amex.  We don't offer payment by either of those cards.

    Is there another icon I can use (since I see it is a jotform image - http://jotformpro.com/images/credit-card-logo.png) that only shows visa and mastercard, or do I need to supply my own and somehow imbed it using CSS injection.

    Thanks for helping me out on this!

    Cheers, 

  • Profile Image
    abajan
    Answered on February 19, 2013 at 07:33 PM

    Unfortunately, to the best of my knowledge, there's no alternative icon available. I'll submit a ticket to see if the relevant people on our team can come up with a set of icons from which users can choose.

    In the meantime, I'll see if I can come up with a workaround for you.

  • Profile Image
    jolomero
    Answered on February 19, 2013 at 07:34 PM

    Wonderful, thanks.  I have an alternative image - actually yours which I've cropped to remove the amex and discover icons.  will pass it along if it helps.

    :)

  • Profile Image
    abajan
    Answered on February 19, 2013 at 07:35 PM

    Yes, please do.

    Thanks.

  • Profile Image
    jolomero
    Answered on February 19, 2013 at 07:37 PM

    Ok uploaded to my own server.. you can d/l it directly:

    http://cloud.itsallaboutconnecting.ca/image/3G0l2e2v0I38

     

    Let me know when you have it and I'll cancel the link

  • Profile Image
    abajan
    Answered on February 19, 2013 at 07:40 PM

    Got it. You may cancel the link.

    Thanks.

  • Profile Image
    jolomero
    Answered on February 19, 2013 at 07:42 PM

    Done, thank you!

  • Profile Image
    abajan
    Answered on February 20, 2013 at 04:14 AM

    Hi again,

    Please do the following:

    1. Copy this URL to your clipboard

    2. With the form loaded in the form builder, click the Registration Fees field

    3. Click the Power Tools menu and then click Image
     


    4. Select Enter URL and click Next
     


    5. Click the text box, paste the URL that was copied in step 1 and click Save Image
     


    6.
    Add the following rules to the form's injected CSS:

    label[for="input_19_paymentType_credit"] img {
    visibility: hidden;
    }

    #id_23 img {
    position: absolute;
    margin-top: -66px;
    margin-left: 185px;
    }


    7. Save the form

    When done, the form should look like this one

    Should you need further assistance, please let us know.

    Thanks.

  • Profile Image
    abajan
    Answered on February 20, 2013 at 04:58 AM

    Oops! That does not work because when credit card is selected, the image vanishes! Back to the drawing board! :(

  • Profile Image
    abajan
    Answered on February 20, 2013 at 05:32 AM

    I'm afraid that unless we can come up with an injected CSS solution, your only alternative would be to embed the form's full source into a web page (see this guide) and manually replace the http://jotformpro.com/images/credit-card-logo.png image with your own.

  • Profile Image
    abajan
    Answered on February 20, 2013 at 07:11 AM

    It turns out that the image wasn't vanishing at all. It was just being pushed "beyond the fold" (the bottom) of the page. Simply dragging the image up one field, fixed the problem. (Well, sort of because it's somewhat misaligned with the PayPal card image but it's better than having to resort to embedding the form's source in a web page.) 

  • Profile Image
    jillynne
    Answered on February 20, 2013 at 05:24 PM

    I have the same issue except that we do accept Discover. Is there a way I can get just Visa MasterCard & Discover logos to show and not the AmEx on my form?

     

    https://secure.jotform.us/jillynne/creativejpay

  • Profile Image
    jeanettebmz
    Answered on February 20, 2013 at 06:19 PM

    @jillynne

    You will need hide the current image

    label[for="input_19_paymentType_credit"] img {
    visibility: hidden;
    }

    Then add an image with just the required Credit Card logo into an image repository tool. It should be added as image URL as explained on Abajan's post above,

     

    For that particular image URL , the id is 23


    #id_23 img {
    position: absolute;
    top: 200px;
    margin-left: 185px;
    }

    However, it might vary in your form's case as well as the custom CSS positioning codes

    Should you have more questions, let us know

  • Profile Image
    jolomero
    Answered on February 20, 2013 at 08:38 PM

    Ok, I'm understanding what it is I have to do, and I'm having difficulty with replacing the image.  I've checked the source code of the page Abajan made, and even with the css added in, it's not making sense.

    What would happen if I used the CSS to completely replace the image?  I know I can do it for websites I have complete control over, just not sure if I can do it in this instance.

    Any comments?

  • Profile Image
    Welvin
    Answered on February 20, 2013 at 11:33 PM

    @jolomero,

    You will have to add the "Image" field into your form, this field can be seen under Power Tools in our form builder. After that, inject the custom CSS codes;

    label[for="input_19_paymentType_credit"] img {

    visibility: hidden;

    }

     

    #id_23 img {

    position: absolute;

    margin-top: -66px;

    margin-left: 185px;

    }

    The codes highlighted in Green is to hide the current CC images on the payment tool, the second codes highlighted in yellow is to position your own custom CC images as replacement to the hidden default CC images.

    One best solution for that is to clone back the form given by my colleague Abajan by following this guide: How to Clone a Form from a Web Page and edit the image after.

     

    Thanks

     

  • Profile Image
    Welvin
    Answered on February 20, 2013 at 11:37 PM

    By the way, the image is under the Secure Logo; just click on the field, change it by inserting your own link on the Image source button;

     

    Thanks

  • Profile Image
    jillynne
    Answered on February 22, 2013 at 04:34 PM

    I'm having problems getting this figured out too. The response above to my question about replacing the logo says this -- please see my questions next to items below:

    @jillynne

    You will need hide the current image --- I cannot figure out where I can enter this code

    label[for="input_19_paymentType_credit"] img {
    visibility: hidden;
    }

    Then add an image with just the required Credit Card logo into an image repository tool. It should be added as image URL as explained on Abajan's post above,

    What URL do I enter? The one referenced above in Abajan's post refers to an image of only a MasterCard and Visa card. I also want Discover on mine. I did make a new image, but not sure where I can upload it and then be able to get a URL for it.

     

    For that particular image URL , the id is 23 -- again, where do I insert this code?


    #id_23 img {
    position: absolute;
    top: 200px;
    margin-left: 185px;
    }

    However, it might vary in your form's case as well as the custom CSS positioning codes

    Should you have more questions, let us know

     

     

    Thanks for your help.

  • Profile Image
    Mike_T
    Answered on February 22, 2013 at 05:30 PM

    I cannot figure out where I can enter this code.

    You will need to inject the custom CSS codes under form styles:

    How to Inject Custom CSS Codes

    What URL do I enter? The one referenced above in Abajan's post refers to an image of only a MasterCard and Visa card. I also want Discover on mine. I did make a new image, but not sure where I can upload it and then be able to get a URL for it.

    For example, you can upload it to your JotForm account. To do this, add the Image element to the form, and upload your image file.

    Then, select the Image field and click on the Image Source icon, copy your image URL.

    You can delete that added image from the form (it will not delete the image from the server, so URL will be active), and use the image URL everywhere you want.

    Again, where do I insert this code?

    It will be the same place for injected CSS. When you add the image to your form, we will be able to provide you with the correct CSS for your case.

    Thank you.

  • Profile Image
    NeilVicente
    Answered on February 27, 2013 at 10:18 PM

    @jolomero, @jillynne

    You can now easily select which credit card images to display on your Paypa Pro integrated form.

     

    Best regards

  • Profile Image
    abajan
    Answered on February 28, 2013 at 04:38 AM

    Very cool, Neil :)

  • Profile Image
    jillynne
    Answered on February 28, 2013 at 09:28 AM

    Perfect -- Thanks!!

  • Profile Image
    jillynne
    Answered on February 28, 2013 at 09:32 AM

    I just tried this and although it looks right when editing the form, when I preview it or look at it online, the icons have totally disappeared.

     

    https://secure.jotform.us/jillynne/creativejpay

  • Profile Image
    abajan
    Answered on February 28, 2013 at 09:35 AM

    Yes, I discovered this issue this morning while testing a form of my own and have alerted our Tier 2 team about it. It worked well yesterday but something has gone awry.

    Well try to fix the issue ASAP.

    Our apologies for the inconvenience.

  • Profile Image
    NeilVicente
    Answered on February 28, 2013 at 10:55 AM

    Sorry about that. The said problem is now fixed.

    Please resave your form if the changes do not reflect.

  • Profile Image
    jillynne
    Answered on February 28, 2013 at 10:57 AM

    Looks good now!

  • Profile Image
    jolomero
    Answered on February 28, 2013 at 11:26 AM

    Yes, thank you for all the work in getting this done!  It's a lovely feature and it seems to be working perfectly on my 3 forms!

    Now,  how to shift the default from papal to credit card!

    PS: You guys are great!

  • Profile Image
    abajan
    Answered on February 28, 2013 at 11:31 AM

    @jolomero

    On behalf of our team, thanks so much for that wonderful compliment. Comments like that definitely brighten our day :)

    Cheers