What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Customizing Square Widget

    Asked by swinkcreative2 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)

     

     

    Page URL:
    https://form.jotform.com/70375228868164

  • Profile Image
    JotForm Support

    Answered by Mike 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

    Answered by swinkcreative2 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
    JotForm Support

    Answered by Welvin 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.