How do I control the colour, shape and size of the 'Submit' button?

  • Profile Image
    GlobeTechnical
    Asked on December 01, 2012 at 11:52 AM

    Hi,

    I've tried injecting custom CSS in order to change the colour of the 'Submit' button, as I had seen suggestions on how to do this on other forum threads - but it had no effect. Could you please point me in the right direction and advise on how to get it working for my form entitled 'GT Contact Form'?

    Also, the button displays a different size and shape in each browser and this is making it difficult to align it properly with the rest of the form. Do you know of a way to force the button to be displayed in precise dimensions, measured in px? Please see attached screen shot for examples of this issue.

    Top-left = IE8, top-right = IE9, bottom-left = Firefox, bottom-right = Chrome

    Many thanks,

    Leon

  • Profile Image
    fxr
    Answered on December 01, 2012 at 03:37 PM

    Have you seen the button style gallery, you access it by clicking on the submit button field to select it, then clicking the 'Button Style' button?

     

    As regards, your other question, each browser has their own idiosyncrasities over how they render CSS, its quite difficult to get an element to look *exactly* the same regardless of browser. Are you sure one have a slightly more rounded corner in Chrome over Firefox is that much of a deal breaker?

    Your 4 forms look pretty much identical to me.

  • Profile Image
    GlobeTechnical
    Answered on December 03, 2012 at 12:11 PM

    I have looked through the button gallery. I doubt that using a different button would solve the problem.

    If you look closely at the 4 images in my original post, you'll see that IE8 and IE9 display the button with sharp corners (actually, it looks like IE9 displays it with rounded corners but then adds an outline with right-angled corners). the difference in shape between FF and Chrome doesn't bother me...it's the size difference between all 4 causing alignment issues that is a problem.

    I am aware that different browsers handle css differently - if you look at my injected CSS for this form, you'll notice that I've got some code in there that forces each browser to render the text and drop-down fields in specific px measurements. This helped me with formatting issues for the rest of the form. Each browser still renders the form slightly differently, but it at least matches the rest my page since they will render everything on the page in their particular way.

    Therefore, I'm thinking there must be some similar way of forcing each browser to at leat try and render the button using specific dimensions.

    The key thing here is that I want the right edge of the button to sit flush with the right-hand edges of the fields above - and for the bottom edge to be perfectly level with the bottom of the captcha box. Do you know of a way to achieve this in a way that will work for all browsers? I wouldn't care about the button size and shape as much if it would at least line-up properly.

    Many thanks,

    Leon

  • Profile Image
    EduardoMendez
    Answered on December 03, 2012 at 01:19 PM

    Hi there

    Can you try this clone of your form?

    http://form.jotformpro.com/form/23375055000946?

    If that is what you are looking for, you can clone the form and use it as your own if you wish.

    WHat I did:

    text box area is set to a width of 420px

    I set the with of #id_16 (captcha div) to 210 and the #id_20 (submit div) to 210.

    I aligned the submit button right (it has no padding on the right already.

    That should make it align correclty in all browsers.

    Please give it a try and let me know if you need further assistance!

  • Profile Image
    GlobeTechnical
    Answered on December 05, 2012 at 12:02 PM

    @ EduardoMendez - thanks for the advice. That works perfectly for getting the right edge horizontally aligned.

    The bottom edge still isn't perfect across all browsers. We're talking about a very small difference of about 5px (Chrome displays the button ~2px too high, Firefox displays it ~2px too low, IE8 - ~1px too low, IE9 - perfect).

    I know this may seem trivial but I'd prefer to get it perfectly aligned in all cases if possible. Are you able to offer any further advice?

    I'm also still interested in modifying the colour of the button. I'm happy with the style - I just want to be able to choose the specific colour(s) using hex so it matches our corporate colours.

    Many thanks.

  • Profile Image
    idarktech
    Answered on December 05, 2012 at 03:32 PM

    @GlobeTechnical

    We will look into this for you. Hopefully my colleagues an I will be able to come up a better one. We'll keep you posted.

    --

    I'd suggest to restore your submit button to default and start creating a customized one. This CSS Button Generator may help you create the styles you want (be sure to use .form-submit-button as your button class). However, if you'd like to change the hex colors of your current button styling, you may customize this code (this might be a bit laborious I think :).

    .form-submit-button-simple_orange{

    border: 1px solid #D85D00 !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #ffcc7a;

    -webkit-box-shadow: inset 0px 1px 0px 0px #FFCC7A;

    box-shadow: inset 0px 1px 0px 0px #FFCC7A;

    background: #FF6C00;

    background: -moz-linear-gradient(top, #FAA51A 0%, #FF6C00 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAA51A), color-stop(100%,#FF6C00));

    background: linear-gradient(top, #FAA51A 0%, #FF6C00 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#ff6c00', GradientType=0 );

    }

    Thank you.

  • Profile Image
    idarktech
    Answered on December 06, 2012 at 04:22 AM

    @GlobeTechnical

    Sorry for the delay. Regarding on the submit button alignment, this is the best I can come up with. Feel free to check and clone this form. http://form.jotformpro.com/form/23401812578957?.

    Hope this helps. Thanks!

  • Profile Image
    GlobeTechnical
    Answered on December 07, 2012 at 09:05 AM

    @idarktech

    Thanks for looking into this for me. I've copied over the relevant code to my form and it's looking much better. Still a discrepancy of ~2px across browsers but I can live with this.

    Also made a slight change to button colour as per your advice. Wasn't too laborious actually. I just used VB Colour Picker to work out which parts of the button correspond to the various hex values you provided - so I now have more control over the appearance going forward.

    Thanks again for your help.

    Regards,

  • Profile Image
    jonathan
    Answered on December 07, 2012 at 09:13 AM

    @GlobeTechnical

    We are glad to know that all is at satisfactory now.

    Please do not hesitate to contact us again anytime for any assistance or inquiry you need.

    Thanks.