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

  • JFedGMW
    Asked on May 9, 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.

  • Jan
    Replied on May 9, 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:

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

    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:

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

    Hope that helps. Thank you.

  • JFedGMW
    Replied on May 16, 2017 at 9: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.

  • Welvin Support Team Lead
    Replied on May 16, 2017 at 9: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.