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 to style the "submit" button?

    Asked by fradem 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
    JotForm Founder

    Answered by aytekin 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 by fradem 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:  http://unbouncepages.com/tour-de-1dia-a-fatima-batalha-obidos-nazare-e-alcobaca
  • Profile Image

    Answered by asunwatcher 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 by sullivanforsenate on October 09, 2010 at 05:00 PM

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

  • Profile Image

    Answered by carsaig 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: http://www.jotform.com/form/3385305713

  • Profile Image
    JotForm Founder

    Answered by aytekin 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 by fradem on December 15, 2010 at 08:43 AM

    Many thanks!
    Just what I asked for :p

    Mario Frade
    Lisbon, Portugal 

  • Profile Image

    Answered by slrli 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 by shanmiran on January 24, 2011 at 04:35 PM

    how do i put this code on button?

  • Profile Image

    Answered by shanmiran on January 24, 2011 at 04:48 PM

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

  • Profile Image
    JotForm Founder

    Answered by aytekin on January 25, 2011 at 10:14 AM

    It is already rounded on all browsers except Internet Explorer. 

  • Profile Image

    Answered by natel 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 by skech 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
    JotForm Support

    Answered by NeilVicente on April 14, 2011 at 02:04 PM

    @skech

    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 by Joe 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
    Address:
    City: *
    State:
    Number Of Passengers:*
    Date: *  
    Time: *
    Destination
    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: *
    Comments:
    HOWDID YOU
    LEARN ABOUT
    OUR WEBSITE:
    Other  
    Yahoo
    Google
    MSN
    AOL
    Business Associate
    Family / Friend
    Limo Directory
  • Profile Image

    Answered by allanftd 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:

    http://office.microsoft.com/en-us/publisher-help/

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

    JOTFORM SUPPORT

     

  • Profile Image

    Answered by livingfresh 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 by pinoytech on November 09, 2012 at 08:27 AM

    @livingfresh

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

    Thank you!