-
swinkcreative2Asked 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)
Page URL: https://form.jotform.com/70375228868164 -
MikeReplied 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;
}Related guide:
Customize Your Form Using Custom CSS Codes
Thank you.
-
swinkcreative2Replied 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 LeadReplied 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.