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

    Number of characters displayed in security code field does not match the requirement

    Asked by campwahanowin on April 20, 2016 at 10:33 AM

    Hello,

    We are using Authorize.net to accept payments through our form.  It seems our customers are finding it difficult to enter AND view all three digits in their security code when entering their credit card information into the form.  One is able to input 3 digits, however only 2 of the 3 digits are visible to the customer.  I have gone through the settings throughout the form and seem to be unable to adjust the visible portion of this field to show one additional digit.  I can do it for other fields on the form, but it seems I have little or no control over the field width in the payment app.

    See image attached.  I had entered 011 into the field, but only 11 shows.  Even if I entered 111, only 11 would be visible.

    Anything you can suggest?  Perhaps it's solely an issue with the Authorize.net app itself and I'm out of luck.  Figured I'd ask.

    Looking forward to hearing from you.

    Ruth

    Page URL:
    https://form.jotform.com/51335208221241

    Screenshot
    number of characters displayed code field
  • Profile Image

    Answered by Ben on April 20, 2016 at 12:54 PM

    To fix that Ruth you should add the following CSS to your form:

    .cc_ccv {
        padding-left: 8px;
        padding-right: 8px;
    }

    It will make the numbers shown properly.

    You can add it to your form by following the steps shown here: Inject Custom CSS Codes

    Do however let us know if you happen to have any issues and we would be happy to assist.

  • Profile Image

    Answered by campwahanowin on April 20, 2016 at 04:44 PM
    I added the CSS in the middle of the middle of the Custom CSS box… and saved, but no changes took place. Is the code supposed to be placed in a particular spot in the CSS?

    Thanks for your help!

    Ruth


    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 20, 2016 at 07:27 PM

    I found the code injected on your form; however, it does not seem to make any difference and I think that this is because you added it inside other rule or something else and this is why it is not currently taking affect. 

    I applied the code provided by Ben above and it took effect on your form, here is the result: 

    To avoid any confusion or avoid the code not working as expected, I would suggest you to paste the code at the end of all the existing code in your form, this should be applied and the result should  be reflected when you test your form. 

    Please do let us know how it goes when you pasted the code at the end of  the existing one. 

  • Profile Image

    Answered by campwahanowin on April 21, 2016 at 10:43 AM
    Thank you…. As suggested, I inserted the code at the end of the existing code. When I clicked to return to the form, I noticed that all the fields had been adjusted to the end of the page, which I didn’t want to happen. Rather, I had wanted to just to adjust the field width of the Security Code box so that all three digits appear when the customer enters their information. Can this be done?

    Thanks again for your assistance!

    Ruth


    ...
  • Profile Image

    Answered by Ben on April 21, 2016 at 12:05 PM

    I took a look at your form Ruth and I see that it was added, but since it was not under all of the other code it was overridden by few other codes.

    I have resolved this for you by applying the change to your form.

    Please do check this out and let us know how it looks for you.

  • Profile Image

    Answered by campwahanowin on April 21, 2016 at 12:44 PM
    MUCH better!!! Thanks so much for your help! It’s perfect now!
    Ruth


    ...
  • Profile Image

    Answered by Ben on April 21, 2016 at 01:45 PM

    Great to hear that Ruth, and you are welcome :)

    Please do let us know if you have any additional issues or any questions and we would be happy to assist with the same :)