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

    Field mask for credit card: how to apply ?

    Asked by gyangting on August 23, 2014 at 03:51 PM

    Hi,

     

    I need to apply a credit card field mask in this form: http://form.jotformpro.com/form/42326489833968

    Can you help me achieve that ?

     

    Thanks,

    Guy

    credit card mask credit card field input mask
  • Profile Image
    JotForm Support

    Answered by jonathan on August 23, 2014 at 08:25 PM

    Hi Guy,

    Since you are using the Stripe payment tool in your form http://form.jotformpro.com/form/42326489833968

    you cannot really use the field Input Mask feature in the CC number input field in your form.

    The Input Mask functionality is only available to Textbox field

     

    Hope this help. Inform us if you need further assistance.

    Thanks.

     

     

  • Profile Image

    Answered by gyangting on August 24, 2014 at 02:28 AM

    Thanks Jonathan.

    I noticed that.

    But isn't there a way to apply javascript?

    In this thread, jedcardonna mentioned javascript as an solution (for something else):

    http://www.jotform.com/answers/418265-Stripe-Passing-name-and-first-name-to-Stripe-card-form#8

     

    Thanks,

    Guy

  • Profile Image
    JotForm Support

    Answered by jonathan on August 24, 2014 at 07:15 AM

    Hi,

    Yes we can use injected javascript when using the form's source code to have masked input for the payment tools CC textbox.

    Something similar to this test page.

    I have used this javascript code http://pastie.org/4683528

    BUT... the problem here will be -- if you take a look at the Stripe tool, the CC input textbox does not have dashes(or any other pattern) . The CC number input textbox needs to be all numbers only.

    If we add other characters into the data of CC number, it will not be accepted or it will become an invalid data when pass on to the Stripe payment tool.

    What I think can be done is to just add a separate textbox with masked on, and then copy the data form that masked textbox into the CC number textbox(of Stripe) without any of the masked characters. The CC number data must be without any other character except the CC number only.

    I'll try create a demo form so that my explanation is better understand. I will get back to you on this.

    Thanks.

     

     

  • Profile Image

    Answered by gyangting on August 24, 2014 at 07:25 PM

    Thanks a lot for looking into this Jonathan.

    There's another issue related to this: having the number pad keyboard coming up when typing the card number, instead of the qwerty keyboard, which is coming up now.

    I believe having type="number" can bring up the number pad keyboard on smartphones.However,ashwin_d says this is not possible in this post :http://www.jotform.com/answers/419798-how-to-add-type-number-to-credit-card-field#1

    Do you think javascript could help with this as well?

    Looking forward to your solutions!

    Guy