How to style the "submit" button?

  • Profile Image
    Asked on October 06, 2010 at 12:47 PM

    I know you can insert css in the form.

    But I guess if you're using Jotform, you're probably not a CSS guru (I know I'm not, that's why I love Jotform).



    But the "submit" button is really, really important to stand out.

    Maybe you're already thinking about adding a "style button" option to the "submit" button toolbar, aren't you? :-)

    (button size, width, height, background, over state, etc...)


    Mario Frade

    Lisbon, Portugal

  • Profile Image
    Answered on October 06, 2010 at 03:22 PM

    Do you have an example in mind? Can you send us the link for it? If you do have an example, we can probably provide the CSS code for it to use it on the new Preferences "Inject Custom CSS" feature.

  • Profile Image
    Answered on October 06, 2010 at 03:32 PM

    You already have a few variables for the "submit button" on the toolbar:

    . Submit Text

    . Button Align

    I'm proposing another one:
    . Button Style
    Where I could choose, for example:
    - border thickness
    - border color
    - background color
    - background color:hover
    - text font
    - text size
    - text format (bold, italic)
    - button height
    - button width
    - etc
    Whis this new tool, one could customize the most important button in a form: the submit button.
    One could make it bigger or smaller, and style text and colors according to the page where the form would be inserted.
    I like big glassy buttons :-)
    Like this one:
  • Profile Image
    Answered on October 09, 2010 at 03:51 AM

    Bump for this. I was just looking for the same editing options - it would be wonderfully handy!

  • Profile Image
    Answered on October 09, 2010 at 05:00 PM

    Would love more options on the button as well...  Just chiming in!

  • Profile Image
    Answered on December 05, 2010 at 02:41 PM

    is there a way to align the button?

    I'm trying really hard using the align tags but I just can't get round it :-( Even with firebug. I injected some other css which is fine but the button align is just mystey to me...

    I would love to see the button BESIDE my form and not beneath it.

    look here:

  • Profile Image
    Answered on December 06, 2010 at 02:44 AM

    @fredem Try this

    .form-submit-button, .form-submit-reset, .form-submit-print {
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        background: #ff3019;
        background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
        border: 2px solid #FFFFFF;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        overflow: visible;
        padding: 10px;
        text-shadow: 0 0 5px #777777;
        width: auto;

    It works on Firefox, Safari, Chrome and Opera a simpler version on IE.

    @carsaig Check out the toolbar when button is selected you'll see the button align option there.

  • Profile Image
    Answered on December 15, 2010 at 08:43 AM

    Many thanks!
    Just what I asked for :p

    Mario Frade
    Lisbon, Portugal 

  • Profile Image
    Answered on January 04, 2011 at 05:46 AM

    @ aytekin


    I just injected the CSS you posted.  I think it's a definite improvement over the default one! ^.^


  • Profile Image
    Answered on January 24, 2011 at 04:35 PM

    how do i put this code on button?

  • Profile Image
    Answered on January 24, 2011 at 04:48 PM

    got it, another question, how to get a round shape button? Any css please?

  • Profile Image
    Answered on January 25, 2011 at 10:14 AM

    It is already rounded on all browsers except Internet Explorer. 

  • Profile Image
    Answered on February 02, 2011 at 01:56 PM

    I vote for prettier buttons too.  Bigger sizes, different colors, different text etc.  If a toolbar came across the top specifically for buttons that would be great.

  • Profile Image
    Answered on April 14, 2011 at 09:42 AM

    I know shanmiran got this, how does this work, where do you put the code, is it straight after the code for the form or somewhere inside the form source code?

  • Profile Image
    Answered on April 14, 2011 at 02:04 PM


    You put the codes in the Inject Custom CSS textarea.

    1.  Go to Setup & Embed tab

    2.  Click Preferences button

    3.  Click Form Styles

    4.  Click on the Inject Custom CSS textarea

    Copy and paste the codes provided by Aytekin

    Hope that helps. Let us know if you have additional questions.

  • Profile Image
    Answered on June 18, 2011 at 10:08 PM

    How do i make a submit btton in microsoft publisher for this???? Please reply.

    Contact Information
    Full Name: *
    Phone Number: *
    Email: *
    Email (Confirm): *
    Transportation Service Information
    Type of Service: *
    Please Select Your Vehicle Type: *
    Total Hours: *
    Coupon Code:(Must be entered for special rates)
    Previously Quoted Rate:
    Pick Up Info
    City: *
    Number Of Passengers:*
    Date: *  
    Time: *
    City: *
    Drop-Off Instructions:
    Payment Information
    Bill:(Acct. No.)
    Credit Card: *
    Credit Card #: *
    Expiration Date: * MM/YY
    Card Security Code: *
    Name Of Cardholder: *
    Billing Address: *
    Business Associate
    Family / Friend
    Limo Directory
  • Profile Image
    Answered on June 19, 2011 at 09:20 PM

    Hi Joe,

    Do you mean you want to create a Submit button that you can use for your form in MS Publisher? You can try to go directly and consult their official support page for tutorials and community help:

    For any questions or concerns regarding JotForm, please do not hesitate to contact us. Thanks!



  • Profile Image
    Answered on November 09, 2012 at 08:15 AM

    I can't change the width of submit button? I change width in styles, but nothing happens

  • Profile Image
    Answered on November 09, 2012 at 08:27 AM


    May we ask your form url/Id for further assistance?

    Thank you!