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.

  • Profile Image

    Edit Submit Button

    Asked by leathersolutions on October 20, 2010 at 09:13 AM

    Hi There

    I would like to edit my submit button to change the background and font colour to match my other buttons, is it possible to do this with code via the inject custom code preference? and if so what would it be?

    The button is here

    Thanks for any help.

    My Forms Inject Custom CSS
  • Profile Image

    Answered by imcobarn on October 20, 2010 at 11:03 AM

    Just add your own styles to button class in your css file to over-ride Jotform's.

  • Profile Image

    Answered by leathersolutions on October 20, 2010 at 03:01 PM

    I have no idea how to do this, I'm using iframe for the code if thats relevant.

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 21, 2010 at 03:25 AM

    If you can prepare the button as you would like on another page on your site, we can probably provide the inject CSS code to use it on this form.

  • Profile Image

    Answered by leathersolutions on October 21, 2010 at 05:02 AM

    Hi

    I have prepared a button here, thanks for your help

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 21, 2010 at 07:49 AM

    All set.

    Here is the CSS Custom Inject used:

    .form-submit-button {
            background:url(http://leathersolutions.org/images/guestbook.png);
            border:none;
            color:transparent;
            width:98px !important;
            height:42px;
            border:2px solid #ccc;
            cursor:pointer;
    }
    .form-submit-button:hover {
            border-color:black;
    }

  • Profile Image

    Answered by leathersolutions on October 21, 2010 at 12:56 PM

    Hi There

    Thanks, the button looks really good, unfortunately when displayed in IE8 the text takes on a cracked appearance, I've checked using firefox and chrome and its fine, any ideas why this has happened?

  • Profile Image

    Answered by leathersolutions on October 22, 2010 at 06:22 AM

    Hi

    I've modified the button by the custom code preference, thanks again for that, the text in IE8 is still the same, I still don't understand why IE can't read the code and firefox and chrome can.

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 22, 2010 at 08:49 AM

    We are providing CSS inject code to point you to a correct direction. It is provided as is and only as an example. You should probably learn CSS and play around with the fonts etc. to make it work as you would like.

  • Profile Image

    Answered by spodakdental on January 20, 2011 at 09:10 AM

    Hey guys,  could you please tell me the class to address to change the field caption color?  Not the titles ...

    For example when you place a First and Last Name field, each field has a small italicized caption under it "first name" and "last name" they are grey (probably #cccccc or #eeeeee) and I need them to be black.

    Thanks.

  • Profile Image
    JotForm Founder

    Answered by aytekin on January 20, 2011 at 09:18 AM

    .form-sub-label{

          color: black;

    }

  • Profile Image

    Answered by spodakdental on January 20, 2011 at 09:18 AM

    you cool guy.  

  • Profile Image

    Answered by spodakdental on January 20, 2011 at 10:10 AM

    Ugh.  Hey Aytekin -- Internet Explorer (the BANE OF MY EXISTENCE) is showing submit text over the image -- any ideas?  Unless you're running IE 6 7 or 8 you won't be able to see this but, you could pull it up in Adobe Browser Lab -- that's how I found it http://www.invisaligndelray.com

    here's a screen shot of broswerlab: http://tannercampbell.com/screenshot.png

    Thanks.

  • Profile Image

    Answered by spodakdental on January 20, 2011 at 10:17 AM

    And yes, I already removed the submit labels in the form.

  • Profile Image

    Answered by spodakdental on January 20, 2011 at 10:21 AM

    Never mind, got it.

    The Submit names are not permitted to be blank ... so I inserted a space; did the trick.  Thanks.