-
kickstockAsked 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?
-
jonathanReplied 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
-
kickstockReplied 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?
-
jonathanReplied 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.
-
kickstockReplied on September 7, 2021 at 7:14 PM
thank you