CSS applies inconsistently to fields in Payment Gateway (Square)

  • Profile Image
    Asked on March 19, 2019 at 05:09 PM

    Note how all fields on the form got the rounded corners as expected. But only the name fields in the payment gateway area had the CSS applied, not the bottom CC#, CVV, Expiration Date, and Postal Code.

    One would expect the CSS formatting to be applied consistently and reliably.

  • Profile Image
    Answered on March 19, 2019 at 07:11 PM

    These text boxes are different from the normal input textbox. To make it look like the normal textbox design, please inject the custom CSS code below into your form:

    .square-hosted-fields {
        padding : 4px 8px;
        font-size : 14px;
        background-image : none;
        border-radius : 4px;
        box-shadow : none;

    Guide: How to Inject Custom CSS Codes

  • Profile Image
    Answered on March 19, 2019 at 09:30 PM

    Thanks for the tip - I'll try that.

    The default display should present consistent formatting, however, without add'l CSS work by your users. Note that the top two fields and bottom four fields are all within the Square payment gateway widget... one expects fields in the same gateway box to come out looking the same. The way it presents now just looks sloppy and half-baked.

  • Profile Image
    Answered on March 19, 2019 at 10:44 PM

    Thanks for the feedback.

    Our developers are constantly improving the UI and Jotform other features. Please don't hesitate to contact us if you need further assistance.