Submit button on the form builder looks different when previewed

  • Profile Image
    ArizonaNorse
    Asked on January 31, 2018 at 03:55 PM

    My design view is what I want

    Preview (and actual) view reverts to default.

    I want the design view. Have added CSS per your site (I think...). 

     

    Please advise,

    Thanks.

     

  • Profile Image
    Jim_R
    Answered on January 31, 2018 at 05:30 PM

    Hello @ArizonaNorse - This happened because the theme you're using overrides the CSS codes you entered on your FORM BUILDER.

    To make it work the other way around, where your codes will be used instead of the theme's, append the !important tag to all the lines of CSS codes for your submit button.

    BEFORE:

    .form-submit-button {

        background: #FF5733;

        width : 160px;

        height : 50px;

        border : 2px solid #ccc;

        border-radius : 20px;

        font-size : 20px;

    }

    .form-submit-button:hover {

        background : #28B463;

        width : 160px;

        height : 50px;

        background: #28B463;

        border : 2px solid #eee;

        border-radius : 20px;

    }

    AFTER:

    .form-submit-button {

        background: #FF5733 !important;

        width : 160px !important;

        height : 50px !important;

        border : 2px solid #ccc !important;

        border-radius : 20px !important;

        font-size : 20px !important;

    }

    .form-submit-button:hover {

        background : #28B463 !important;

        width : 160px !important;

        height : 50px !important;

        background: #28B463 !important;

        border : 2px solid #eee !important;

        border-radius : 20px !important;

    }