What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Is it possible to change the style of the Preview Before Submit widget submit button?

    Asked by matt136 on March 10, 2016 at 01:17 PM
    One last thing, the SUBMIT button is gold for my forms. When adding the preview widget, the button is white. Is there any CSS that can change this or can it not be changed due to it being a widget?
    change style custom CSS
  • Profile Image

    Answered by Ben on March 10, 2016 at 01:23 PM

    It is actually possible to do that. However it is important to note that the same depends on the way your submit button looks. What I mean by this is that if you change your submit button, the preview before submit widget's own submit button will still look the same as it does, so you need to have a different style added that would mimic the latest change.

    To add the style that looks as the submit button, you should add the following CSS to your form:

    #checkButton.preview-submission-button {
        background: #d9b866 none repeat scroll 0 0;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: none;
        color: #fff;
        font-family: "Josefin Sans",sans-serif;
        font-size: 16px;
        font-weight: normal;
        padding: 9px 15px;
        text-shadow: none;
    }

    It will make sure that other (default) styles are ignored and that the ones that make it look like the submit button currently on your form.

    You should add it like the previous code, by following these steps: Inject Custom CSS Codes and by adding it after all the other code in there.

    Do let us know how it goes :)

  • Profile Image

    Answered by matt136 on March 10, 2016 at 02:26 PM

    Ben,

     

    This is brilliant, you guys are really helpful, thank you :)

     

    Additionally, can I apply this to the 'Back' button in the preview and maybe the 'Choose File' button? So that the style runs throughout the form.

     

    Really appreciate your help, thanks again.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 10, 2016 at 03:53 PM

    On behalf of my colleague you're welcome. 

    Regarding to the Back button and the Choose File button, yes you can change the style as well. For the Back button you only need to inject this CSS code:

    button#backToForm {

        background: #d9b866 none repeat scroll 0 0;

        border: 1px solid #ccc;

        border-radius: 6px;

        box-shadow: none;

        color: #fff;

        font-family: "Josefin Sans",sans-serif;

        font-size: 16px;

        font-weight: normal;

        padding: 9px 15px;

        text-shadow: none;

    }

    The Choose File button does work on a different manner than the Submit and Back buttons, this is why the CSS code to change its style is a bit different, you will need to add this CSS to change it.

    .form-all .form-upload::-webkit-file-upload-button {

          visibility: hidden;

        }

        .form-all .form-upload::before {

            content: 'Choose File';

            background: #d9b866 none repeat scroll 0 0;

            border: 1px solid #ccc;

            border-radius: 6px;

            box-shadow: none;

            color: #fff;

            font-family: "Josefin Sans",sans-serif;

            font-size: 16px;

            font-weight: normal;

            padding: 9px 15px;

            text-shadow: none;

        }

    Hope this helps. 

  • Profile Image

    Answered by matt136 on March 10, 2016 at 04:09 PM

    Hi Kevin_G,

     

    Thank you very much for your response.

     

    The CSS works perfectly - very nice. Thank you!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 10, 2016 at 04:13 PM

    You're welcome and great to know it worked. 

    Do not hesitate to contact us if you need more help, we will be glad to assist you.