Customizing Square Widget

  • swinkcreative2
    Asked on February 7, 2017 at 2: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)

     

     

  • Mike
    Replied on February 7, 2017 at 3:42 PM

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

    Example:

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

    Customizing Square Widget Image 1 Screenshot 20

    Related guide:

    Customize Your Form Using Custom CSS Codes

    Thank you.

  • swinkcreative2
    Replied on February 7, 2017 at 3: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?

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