Button styling mismatch between preview and edit mode.

  • Profile Image
    Asked on October 28, 2019 at 03:16 PM

    Why doesn't the preview of a form look more like the form when it's in the editor, and why is the button styling inconsistent?

  • Profile Image
    Answered on October 28, 2019 at 05:18 PM

    Thank you for contacting us. You need to fix the inject CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    The width of the code is not the same in the preview, because this code has a colon after the name class,  please remove it:

    .form-all: {

        width : 275px;


    In regards to the button, it currently looks that way because of this code:

    .form-submit-button {

        display : block;

        margin : 0 auto;

        background-color : #9ec645;

        text-transform : uppercase;

        width : 225px;

        color : #fff;

        font-size : 16px;

        font-weight : bold;

        border : 0;

        border-radius : 0;


    If you want to actually use one of the button styles, you may remove that code, example:


    Let us know if you need more help.