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

    Increase Button Font Size

    Asked by Chris  on June 08, 2014 at 01:35 PM

    Hi,

    I have injected the CSS for increasing the button font as mentioned in another thread and it works fine as long as I am just in edit mode. (It will show it as BIG like I want) However when I go to "Preview" or live on my site, it is still small.

    This is the entire CSS code I am injecting into the form.

    Any ideas why it will not pick up the Code for that subit button?

    I have tried embedding it in both Script and Iframe and cleaned out all cache as well as trying different browsers.

    ----------

    /* Remove exclamation mark image */

    .form-error-message img {

    display: none;

    }/* Background of entire field. If necessary, add a "color" declaration

    which matches that in the .form-all rule. */

    .form-line-error {

    background: none repeat scroll 0 0;

    }/* Change background color of "This field is required."

    and make message bold */

    .form-error-message {

    background: #336699 !important;

    font-weight: bold;

    }/* the actual input */

    .form-validation-error {

    background-color: #ffffff; /* the background */

    border: 1px solid red !important; /* the border */

    -moz-box-shadow:0 0 1px red !important; /* the shadow effect on the border */

    -webkit-box-shadow: 0 0 1px red !important; /* the shadow effect on the border */

    box-shadow: 0 0 1px gray !important; /* the shadow effect on the border */

    }/* color of arrow attached to the above message which points to the unfilled field */

    .form-error-arrow {

    border-color: transparent transparent #336699;

    }

    .form-submit-button { font-size: 30px; }

    li {

    list-style-type:none;

    }

    ------------------------------------------------------------

    JOTFORM EDIT MODE SCREENSHOT:

    Edit Mode

    JOTFORM PREVIEW AND MY WEBSITE LIVE MODE
    Preview and Live
    Page URL:
    https://leadershipstudies.org/forms/contact.php

    size font size font JotForm style cache
  • Profile Image

    Answered by BryanPaulo on June 08, 2014 at 01:46 PM

    Thank you so much for contacting us.

    Kindly update your current CSS code with the following:

    .form-submit-button {

    font-size: 30px !important;

    }

    Save you form then re-embed if necessary.

    Let us know if you need further help.

  • Profile Image

    Answered by Kochc on June 08, 2014 at 01:56 PM

    Fantastic, Thanks Bryan, that was the trick. Works great now. Appreciate the quick reply too!