What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by myempower 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

    Answered by jefreylandicho 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

    Answered by myempower 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

    Answered by jefreylandicho 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

    Answered by myempower 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
    JotForm Support

    Answered by EltonCris 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

    Answered by myempower on February 13, 2013 at 06:21 AM

    Wow fantastic support. Thanks :)

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 13, 2013 at 09:16 AM

    Welcome, cheers!