I screwed up the style one of my form's STYLES by accident!

  • HareKrishna108
    Asked 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:

    https://form.jotform.com/211936246707257

  • Mike_G JotForm Support
    Replied 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 Support
    Replied 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".

    1636720465 618e5f51a888d zt211112 073229 Screenshot 10

    After that, you need to reload the builder page, which is important for you to see the changes correctly.

    1636720769 618e6081e540e zt211112 073856 Screenshot 21

    The next thing that you need to do is change the colors of your form. It should have the following colors:

    1636721923 618e6503e0621 zt211112 074632 Screenshot 32

    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.

    1636721882 618e64dad0a92 zt211112 075725 Screenshot 43

    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.

  • HareKrishna108
    Replied 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 Support
    Replied 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.

  • HareKrishna108
    Replied on November 13, 2021 at 2:06 PM

    Thanks Basil !

    You "Da Man"


    You can close this ticket


    Jim