How do I enlarge the credit card field (or reduce the size of the text being entered)?

  • Profile Image
    Asked on May 09, 2017 at 10:56 AM

    We've discovered that when a user enters a credit card number into the credit card number field in the payment module, the text box is not large enough to display all of the card numbers, leading the user to believe that the field has only accepted 13 digits. How can we enlarge the text field or conversely, reduce the size of the text that displays so that the user can see all of the digits in the credit card number? Thanks.

  • Profile Image
    Answered on May 09, 2017 at 12:35 PM

    I opened your form and I was able to enter 16 digits. I checked this in Google Chrome and Mozilla Firefox. Here's a screenshot:

    If you want to enlarge it, you can use the custom CSS code below:

    .square-hosted-fields {
    width: 170px !important;
    height: 20px !important;

    Here's a guide on how to How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    Answered on May 16, 2017 at 09:02 AM

    I entered this code (actually I changed the width from 170px to 200 px) but it seems that it has not changed my forms. Is this because once a form is created, updates to the theme do not affect the form? Or, do I need to put this code into the CSS for each form and not at the theme level? Please clarify. Thanks.

  • Profile Image
    Answered on May 16, 2017 at 09:38 AM

    The changes should automatically appear on all forms where you used the theme. If not, re-applying the theme should work. But I checked your form, and you are using the default theme. I also cannot seem to find your own theme under your account. 

    The Inject CSS section should also work.

    Let us know if you need further assistance.