-
HareKrishna108Asked on November 12, 2021 at 5:40 AM
Hi!
I screwed up the style one of my form's STYLE by accident!
Help!
Can you fix it for me?
CLICK for 3 minute video report: https://www.screencast.com/t/HVBGcKjE89
Thanks!
Jim
Here is the CORRECT format style I need: https://form.jotform.com/211935478142256
Here is the "screwed up" format style (should be the same style as "CORECT" form:
-
Mike_G JotForm SupportReplied on November 12, 2021 at 5:52 AM
We will be glad to help you with your concern. Please allow me some time to work on a solution to your concern. I'll get back to you on this ticket as soon as possible.
-
Mike_G JotForm SupportReplied on November 12, 2021 at 7:59 AM
Apologies for any delays. I have created a cloned version of the form you are having issued with (https://form.jotform.com/213153108617954) where I have applied the changes that I will be explaining below.
Here's the link to the cloned version of your form: https://form.jotform.com/213153172482955
The first thing I did to that form is update its theme from the "old default theme" to the "new default theme".
After that, you need to reload the builder page, which is important for you to see the changes correctly.
The next thing that you need to do is change the colors of your form. It should have the following colors:
You can copy the colors here:
- Page Color: #2462B9
- Form Color: #E4EFFF
- Font Color: #12458D
- Input Background: #FFFFFF
Lastly, inject the custom CSS codes below into your form:
.form-line[data-payment=true] .show_desc .form-product-description {
display: block;
padding: 4px 0;
font-weight: bold;
color: black;
font-size: 16px;
}
.form-header-group, .form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper, .form-pagebreak-next, .form-pagebreak-back, .form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-radio:hover+span:before {
border-color: #2462B9 !important;
}
Note: Only the codes above should be injected into your form.
Reference Guide: How-to-Inject-Custom-CSS-Codes
And that's it. Load your form on your browser after and feel free to let us know if you need any further assistance.
-
HareKrishna108Replied on November 13, 2021 at 11:55 AM
Thanks for looking into this for me!
I think I've left something out in the settings. CLICK HERE: https://www.screencast.com/t/ystcuBkos
Thanks
Jim
-
Basil JotForm SupportReplied on November 13, 2021 at 1:08 PM
Hi,
Please remove the current CSS code and the following CSS code instead:
.form-product-name{
font-weight: bold;
}
.form-product-description {
display: block;
padding: 4px 0;
font-weight: bold;
color: black;
font-size: 16px;
}
This should make it look more similar.
Regarding having a template, cloning the form should work, but another option would be to share the form s a template and use that template every time.
Guide: https://www.jotform.com/help/157-sharing-a-form-in-the-form-templates-gallery/
Please let us know if you require any further assistance.
-
HareKrishna108Replied on November 13, 2021 at 2:06 PM
Thanks Basil !
You "Da Man"
You can close this ticket
Jim