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

    How can I customise the buttons in preview before submit?

    Asked by julianl on August 21, 2015 at 02:03 AM

    Hi. How are we all? I have put the preview before submit widget into my form. I went to the designer to inject some css into the widget so it was uniform with the rest of my form. I found there wasn't an obvious way to find the button to style it with css. How can I find out what the selector is for the button to inject the required css? Cheers :)

     

    Page URL:
    http://www.jotform.com//?formID=50487564696976#

    preview button preview
  • Profile Image
    JotForm Support

    Answered by mert on August 21, 2015 at 03:29 AM

    Hi,

    For changing specific ID's CSS, you need to follow these steps:

     

    1) First you need to click "CSS" tab.

    2) Then select the specific button or label.

    3) Now on the right side you can see the object's ID, you can fill inside of the curly braces with CSS features just for that object.

     

    For further questions, please feel free to ask.

  • Profile Image

    Answered by julianl on August 24, 2015 at 06:45 PM
    Hi Mert.
    The problem is the button from the “preview before submit” widget’s button is not showing up in the designer when I attempt to inject
    the css so I don’t know what the object’s i.d. is. How can I find out what the objects id is? Thanks
    ...
  • Profile Image

    Answered by victor on August 24, 2015 at 07:11 PM

    Hi Julian,

    Are you referring to the "REVIEW QUOTE AND SUBMIT" button? If so you can try inject CSS code, using the following tag. 

    .preview-submission-button

    Please let us know if this helps.

    Regards

    Victor M Larrea

     

  • Profile Image

    Answered by julianl on September 02, 2015 at 12:45 AM
    Hi Victor
    I tried the selector however it does not seem to be changing anything.
    http://www.jotform.com//?formID=50487564696976#design
    It is giving the green light to the css but the button still looks the same?
    There is something I am missing here. I am just trying to get the button
    to look the same as all the other buttons. What should I do now?
    Cheers
    ...
  • Profile Image
    JotForm Support

    (Private)

    Answered by EltonCris on September 02, 2015 at 09:18 AM

    My colleague is right, .preview-submission-button is the correct class selector. Though I can see that the styles are not taking effect because it is overpowered by an existing class selector. Please replace your current CSS codes with the following instead. This should help.

    .preview-submission-button {

        background: #393838 !important;

        color: #FFFF01 !important;

        text-shadow: none !important;

        border: 1px solid #CCC !important;

        box-shadow: none !important;

        padding: 8px !important;

        border-radius: 6px !important;

    }

    Result:

    Cheers!

  • Profile Image

    Answered by julianl on September 02, 2015 at 06:45 PM
    Hi EltonCris
    Yes, I knew I was doing something wrong. It is the first time I have run into this scenario
    whilst trying to modify the styling of a widget. Thanks for the help ☺
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on September 02, 2015 at 08:56 PM

    No worries.

    Feel free to let us know if you need further assistance. Cheers!