Change button style to denim for submit and review button

  • Profile Image
    farahasyiqinzaimudin
    Asked on October 27, 2020 at 05:52 AM

    Please refer to my latest jotform created. https://form.jotform.com/203000339740038

    1) why there is still print button together with my submit button? even after chosen "off" for print button.

    2) how to make my submit button and review button same with other button in the form even after chosen the same design

    Thank you

  • Profile Image
    Vick_W
    Answered on October 27, 2020 at 06:55 AM

    Hi there,

    I've checked your form and it seems that the Print button in the Review Before Submit widget is not set to no yet. Please select NO and make sure you click on the Update Widget button.

    1603794771_5f97f753681b7_

    To apply the same button styles please inject the following CSS in your form.

    .form-all .qq-upload-button, .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        cursor: pointer !important;
        -moz-border-radius: .2em !important;
        -webkit-border-radius: .2em !important;
        border-radius: .2em !important;
        padding: 10px 18px !important;
        color: #eae3d9 !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px !important;
        font-weight: bold !important;
        text-shadow: 0px -2px 0px #0b101d !important;
        border: 1px dashed #eae3d9 !important;
        -moz-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        -webkit-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        background: #4d4d4d !important;
        background-image: url(https://jotform.com/images/denim.png) !important;
    }

    Here is how you can inject CSS into your form.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please try it and let us know if you need further assistance.

    Thanks.

  • Profile Image
    farahasyiqinzaimudin
    Answered on October 28, 2020 at 04:37 AM

    Hi..thank you for your prompt response...

    However, this one still not change ("back" "next")...can you help to check?

    and i would like to change the "add finding" button as the rest of the other button also..is that possible?

    1603874215_5f992da7b5e99_

    Thank you so much!

  • Profile Image
    Vick_W
    Answered on October 28, 2020 at 06:10 AM

    Please remove the code provided yesterday and inject the following CSS code in your form.

    .form-all .qq-upload-button, .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print .form-all, .form-all .form-pagebreak-next  {
        cursor: pointer !important;
        -moz-border-radius: .2em !important;
        -webkit-border-radius: .2em !important;
        border-radius: .2em !important;
        padding: 10px 18px !important;
        color: #eae3d9 !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px !important;
        font-weight: bold !important;
        text-shadow: 0px -2px 0px #0b101d !important;
        border: 1px dashed #eae3d9 !important;
        -moz-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        -webkit-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        background: #4d4d4d !important;
        background-image: url(https://jotform.com/images/denim.png) !important;
    }

    button#form-pagebreak-back_31.form-pagebreak-back.jf-form-buttons {
        cursor: pointer !important;
        -moz-border-radius: .2em !important;
        -webkit-border-radius: .2em !important;
        border-radius: .2em !important;
        padding: 10px 18px !important;
        color: #eae3d9 !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px !important;
        font-weight: bold !important;
        text-shadow: 0px -2px 0px #0b101d !important;
        border: 1px dashed #eae3d9 !important;
        -moz-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        -webkit-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        background: #4d4d4d !important;
        background-image: url(https://jotform.com/images/denim.png) !important;
    }


    For the widget buttons please inject the following CSS code in the CUSTOM CSS section of the widget. You can following this guide. https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    button.add {
        cursor: pointer !important;
        -moz-border-radius: .2em !important;
        -webkit-border-radius: .2em !important;
        border-radius: .2em !important;
        padding: 10px 18px !important;
        color: #eae3d9 !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px !important;
        font-weight: bold !important;
        text-shadow: 0px -2px 0px #0b101d !important;
        border: 1px dashed #eae3d9 !important;
        -moz-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        -webkit-box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        box-shadow: 0 0 0 3px #283045, 0 2px 0 3px #0b101d, 0 6px 3px 1px rgba(0, 0, 0, 0.40) !important;
        background: #4d4d4d !important;
        background-image: url(https://jotform.com/images/denim.png) !important;
    }

    Please let us know if you need further assistance.

    Thanks.