Customizing Square Widget

  • Profile Image
    swinkcreative2
    Asked on February 07, 2017 at 02:18 PM

    How do I get the "Payment Field" on the Square Widget to increase in size?

    Also can I get the text fields in the Square Widget to look like the rest of my text fields in my form (larger text fieds, rounded corners etc)

     

     

  • Profile Image
    Mike
    Answered on February 07, 2017 at 03:42 PM

    This is only possible by adding custom CSS to the form.

    Example:

    .square-hosted-fields {
    width: 100%;
    border-radius: 6px;
    }

    Related guide:

    Customize Your Form Using Custom CSS Codes

    Thank you.

  • Profile Image
    swinkcreative2
    Answered on February 07, 2017 at 03:49 PM

    Thank you...  That fixed the First Name and Last Name Fields... but not the rest.

    How do I increase the width of the payment amount field?

    Also the height of the Credit Card Number, Security Code, Expiration Date and Postal Code?

  • Profile Image
    Welvin
    Answered on February 07, 2017 at 05:50 PM

    For the amount field, inject the following custom CSS codes:

    input#input_19_donation {

        width: 100px !important;

    }

    For the other boxes that you've mentioned, the following custom CSS codes:

    iframe#square_cc_number {

        padding: 6px 0;

    }

    iframe#square_cc_ccv {

        padding: 6px 0;

    }

    iframe#square_cc_exp {

        padding: 6px 0;

    }

    iframe#square_cc_postal {

        padding: 6px 0;

    }

    Just adjust the values until you'll see your desired layout.