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

  • Profile Image
    HareKrishna108
    Asked on November 12, 2021 at 05: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

  • Profile Image
    Mike_G
    Answered on November 12, 2021 at 05: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.

  • Profile Image
    Mike_G
    Answered on November 12, 2021 at 07: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

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

    1636720769_618e6081e540e_zt211112_073856

    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

    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

    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.

  • Profile Image
    HareKrishna108
    Answered 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




  • Profile Image
    Basil_A
    Answered on November 13, 2021 at 01: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.

  • Profile Image
    HareKrishna108
    Answered on November 13, 2021 at 02:06 PM

    Thanks Basil !

    You "Da Man"


    You can close this ticket


    Jim