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

    Starter CSS - Inject Custom CSS

    Asked by newschool on September 29, 2011 at 12:28 PM

    Can you post a copy of the starter CSS for your existing themes for us to use when using the Inject Custom CSS option.

    Most of what you have for the default is fine, but we would like to tweak it a bit to fit our site. Having a nice clean CSS with all the possible stypes already set out to use would be a great resource for me and others.

    My plan is to create our own style and then use it every time we create a new form for our site.

    cb

  • Profile Image
    JotForm Support

    Answered by idarktech on September 29, 2011 at 12:59 PM

    Hi there,

     

    Let me share you a small compilation yet very useful CSS for your FORM. 

     

     

    To change the color of the heading text:

    .form-header-group, .form-collapse-table, .form-pagebreak {
        color: blue;
    }

    Button's default state:

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-pagebreak-back, .form-pagebreak-next {
        background: -moz-linear-gradient(center top ,#FAA84C 0%, #FF7B0D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #C64F00;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
        color: #FFFFFF;
        font-size: 12px;
        padding: 6px 18px;
        text-shadow: 0 -1px 0 #C64F00;
    }

    This is for the button's hover effect:

    .form-submit-button:hover, .form-submit-reset:hover, .form-submit-print:hover, .form-pagebreak-back:hover, .form-pagebreak-next:hover {
        background: -moz-linear-gradient(center top ,#FBCB5D 0%, #EFA003 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
    }

     

    This is for the button's active state:

    .form-submit-button:active, .form-submit-reset:active, .form-submit-print:active, .form-pagebreak-back:active, .form-pagebreak-next:active {
        background: -moz-linear-gradient(center top ,#EFA003 0%, #FBCB5D 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(0, 0, 0, 0.1) inset;

    }

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

    You can also check here for a full CSS declarations.

     

    I hope this helps.

     

    Kindest Regards,

    idarktech

     

     

     

  • Profile Image
    JotForm Support

    Answered by mliz on September 29, 2011 at 01:29 PM

    Hi Cb,

    You may download the full source code together with the javascript and css files which were used in creating the form.

    To download the full source codes for your form:

    1.  Go to Setup & Embed
    2.  Click the Embed Form button
    3.  Choose Source
    4.  Click the link that says "here"

    Feel free to contact us again if you have other questions. Thank you!