How to add instruction like tooltip message for credit card security code.

  • Profile Image
    myempower
    Asked on February 12, 2013 at 07:44 AM

    Hi, How can I add Instruction for Security Code. In Jotform there is no instruction like this. Thanks

     

  • Profile Image
    jefreylandicho
    Answered on February 12, 2013 at 10:05 AM

    To add instruction, you can use hover text tool. To access it, you will need to select or open the field property option.

  • Profile Image
    myempower
    Answered on February 12, 2013 at 11:21 AM

    Hi, 

    I know how to use the hover text, but how can i make hover text just beside the security code just like paypal and etc they have guidance for CSC.

    I can't make the hover text just beside the security code. How can I make that. please advise me. thanks

  • Profile Image
    jefreylandicho
    Answered on February 12, 2013 at 12:02 PM

    You could inject a custom css code that will do what you need. To learn how to inject a custom CSS in JotForm, please follow the link below

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you can provide me a link to your website which contain the form I could help you generate a code or you can also visit the link below on how to use CSS hover command.

    http://www.w3schools.com/cssref/sel_hover.asp

    Let us know if you need further assistance.

  • Profile Image
    myempower
    Answered on February 12, 2013 at 12:32 PM

    Here is the form 

    https://www.myempower.my/teen-empowerment-camp/register-now/

    Thanks for the great support :)

  • Profile Image
    EltonCris
    Answered on February 12, 2013 at 02:27 PM

    Hi,

    I think the easiest way to achieve that is to create a pure CSS tooltip. It would be pretty useless to moved the hover description you had currently since the payment credit card field uses Hide/Show condition which changes the form height depending on the selected payment method. Therefore, the current description remains on it's position even the credit card is hidden. If you like, Inject the following CSS codes to your form. Guide: How to Inject Custom CSS Codes to your Form

    tbody > tr + tr + tr > td span + span:hover:after{

    content: "*SECURITY CODE: For MasterCard or visa, it's the last three digits in the signature area on the back of your card. For American Express, it's the four digits on the front of the card.";

    position:absolute;

    font-size:11px;

    top:220px;

    left:530px;

    width:170px !important;

    height:90px;

    border: 1px solid #444;

    white-space:normal !important;

    color:#111;

    border:1px solid #DCA; 

    background:#fffAF0;

    border-radius:3px;

    padding:15px;

    }

    Here's how it works. Screen:

    Demo: http://htmlpaste.com/2ab57bd5b4c42a196469c11fbd1bced1ee3d4b32

    Hope this helps. Thanks!

  • Profile Image
    myempower
    Answered on February 13, 2013 at 06:21 AM

    Wow fantastic support. Thanks :)

  • Profile Image
    EltonCris
    Answered on February 13, 2013 at 09:16 AM

    Welcome, cheers!