- jborsukowAsked on February 12, 2018 at 11:40 AM
I have a stripe payment section in my form I am trying to edit either in CSS or however and can not. Its the coupon area of stripe when one enters a coupon code I want to expand the size in length and change the font neither I can do in this section for some reason? why and how?
- JotForm SupportEltonCrisAnswered on February 12, 2018 at 01:04 PM
Use this CSS codes to customize the coupon code text box.
Just change the font size to anything you prefer. The coupon container width is optional, you can change it if the coupon text box does not fit in the container anymore.
Here's how to inject custom CSS codes to your form http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.
- jborsukowAnswered on February 12, 2018 at 03:25 PM
Got th button larger and font text for box
But how do I edit the outside to make it larger the green area? cant figure it out what its named?
and all so How do make the FONT larger when I press apply button, it shows the output text?
- JotForm SupportMikeAnswered on February 12, 2018 at 04:46 PM
Try the next CSS to increase the size of the coupon container and the font size of the coupon message.
width: 350px !important;
- jborsukowAnswered on February 12, 2018 at 04:57 PM
That worked perfectly!
question? what does the
How did you know it was called "coupon-container" ? where do you find that?
- JotForm SupportWelvinAnswered on February 12, 2018 at 06:49 PM
The !important rule is used for overriding the CSS that is currently in the form or for the specific element.
The "coupon-container" is the field ID. You can find some of the field ID/Names in the form builder (https://www.jotform.com/help/146-How-to-find-Field-IDs-Names), but not all, so you'll need to do it by inspect element of your browser.
- jborsukowAnswered on February 12, 2018 at 07:58 PM
thank you but the #coupon-container is not shown when looking for it, so that why I asked how he knew what it was..
- JotForm UX ResearcheryorkAnswered on February 13, 2018 at 01:38 AM
In this example, I am using Google Chrome but it works pretty much similar for all mainstream browsers.
First open the developer tools:
Then do the following to find the id or class of the element you are looking for.
I hope this helps you.
- jborsukowAnswered on February 13, 2018 at 08:46 AM
Yes thank you now it says coupon container because I added it in the css but before I added it it didn't say that.. it was something like, unidentified div