Change coupon field and button CSS

kickstock

Asked on September 6, 2021 at 4:09 PM

How do I change the look of the coupon field and its button?
Ex:
Change the color of the button and button font.
Add some margin/padding to coupon field and label, etc.

Form URL: https://form.jotform.com/212205916341144

Also, I have set a discount coupon of $3, but instead of taking the discount off of the product, I'd like the discount to be applied to the Total.
Currently, if I choose a quantity above 1 and add the discount code of "1free", it makes the total $0. This is not how it should be.
If you choose a quantity of 2, your total will be $6. If you add the coupon code, then your total should be $3, not $0.
How can I fix this?
jonathan

Replied on September 6, 2021 at 8:38 PM
You can customize the coupon code button style by injecting custom CSS codes similar to the following.
```
#coupon-button {

border-color: #18bd5b;

background-color: #189263;

color: darkred !important;

font-weight: bolder;

}
```
Just change the #numbers to the one you need.
Example:
User guide : How to Inject Custom CSS Codes
---
Add some margin/padding to coupon field and label, etc.
It was not clear how you want to do this. Please provide more details and I will check again.
---
We will resolve the other question on a separate ticket here https://www.jotform.com/answers/3339999
kickstock

Replied on September 7, 2021 at 3:50 PM

Add some margin/padding to coupon field and label, etc
I was referring to adding custom CSS to the discount code field - as in changing the border color, background color etc. Just as you gave me CSS to change the discount code button
How do I modify the discount code field?
jonathan

Replied on September 7, 2021 at 6:51 PM
Thank you for the clarification. The input field to target is #coupon-input. So you can use something like these to customize the Coupon Code input box.
```
#coupon-input {

    border-color: #f23a3c;

    background-color: #18bd5b;

    color: #900d0d;

    font-weight: bolder;

}
```
Please let us know if you need further assistance.
kickstock

Replied on September 7, 2021 at 7:14 PM

thank you