How to style the "submit" button?

  • Profile Image
    fradem
    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
    aytekin
    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
    fradem
    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:  http://unbouncepages.com/tour-de-1dia-a-fatima-batalha-obidos-nazare-e-alcobaca
  • Profile Image
    asunwatcher
    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
    sullivanforsenate
    Answered on October 09, 2010 at 05:00 PM

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

  • Profile Image
    carsaig
    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: http://www.jotform.com/form/3385305713

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

    Many thanks!
    Just what I asked for :p

    Mario Frade
    Lisbon, Portugal 

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

    how do i put this code on button?

  • Profile Image
    shanmiran
    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
    aytekin
    Answered on January 25, 2011 at 10:14 AM

    It is already rounded on all browsers except Internet Explorer. 

  • Profile Image
    natel
    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
    skech
    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
    NeilVicente
    Answered 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
    Joe
    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
    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
    allanftd
    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:

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

    @livingfresh

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

    Thank you!