Square Payment Field: Reduce space between title and payment amount field

I need to have less blank space between the Square Payment title and the payment amount shown. How do I do that?

Hi Discovery,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

To reduce the blank space between the Square Payment title and the payment amount field in your form, you can use custom CSS to adjust the spacing and layout of the payment elements.

Here’s how to do it:

1. Open your form in the Form Builder.
2. Go to the Payment field settings by clicking the gear icon on the Square Payment element.
3. Navigate to the Advanced tab and find the option to inject Custom CSS.
4. Use custom CSS code to reduce the margin or padding between the title and the amount. For example, you can target the payment title and amount elements and adjust their spacing like this:

.payment_title_selector {margin-bottom: 5px !important;}
.payment_amount_selector {margin-top: 0px !important;}

Note: You will need to inspect your form’s payment elements to find the exact CSS selectors for the Square Payment title and amount fields. You can use browser developer tools for this.

If you are unfamiliar with CSS or need help identifying the correct selectors, please let me know, and I can guide you further.

Give it a try and let us know how it goes.

There is no option to inject CSS. It only has Hover Text.

Hi Discovery,

Thanks for your update. The option to inject custom CSS is only available for Classic Forms in Jotform. If your form is using the Card Form layout, CSS injection is not supported, which is why you only see the Hover Text option.

Here’s what you can do:

1. Check your form layout: Go to your form settings and verify if your form is set to Card Layout or Classic Layout.
2. If it is Card Layout: Unfortunately, custom CSS injection is not supported. You may consider switching your form to Classic Layout if you want to use custom CSS to adjust spacing.
3. To switch to Classic Layout: Go to Settings > Form Settings > Show More Options > Form Layout, and select Classic Form.
4. Once switched, you will be able to inject custom CSS via the Form Designer to reduce the space between the Square Payment title and the payment amount field.

If switching layouts is not an option, the spacing between elements in Card Forms is controlled by the system and cannot be customized with CSS.

Let us know if you need guidance on switching layouts or further assistance.

Give it a try and let us know how it goes.

Hi DiscoveryCharterSchools, 

You can easily adjust the space below the Stripe Payment Field label by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

#cid_23 > div > div.product-container-wrapper > span {

  margin-top: -20px !important;

  padding-top: -20px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out my screenshot below to see the result:

Give it a try and let us know how it goes.