Submit Button Blues

  • Profile Image
    mackerg4
    Asked on November 07, 2012 at 12:13 PM

    Hi,

    I'm using a 'Contact Us' template (it's the third one from the left on the top row of templates in the Contact Forms section). It's pretty much fine as it is but I need to change the colour of the Send button. So I go to the form, click on the button and select 'Button Style' from the menu to select a blue button instead of the default green button.

    Two things happen that I don't think should: the button remains green on the working window but, more importantly, the text within the button is aligned to the bottom when the form is previewed and published.

    I've also tried changing the button in 'Properties' instead of using the Button Style menu item but still it justifies the text to the bottom.

    I'm using Safari on a Mac and also tried in IE on a Windows 7 machine and the same thing happens.

     

  • Profile Image
    pinoytech
    Answered on November 07, 2012 at 01:43 PM

    Hi,

    I am using Windows 7 system and using chrome, IE and firefox to view your form. However, I couldn't replicate the issue of your form. Can you please open your form using this url: http://www.jotformeu.com/form/23054497323352

    Have you tried already deleting browser cache and cookies? If not, can you please give a try.

    If the said issue still persists, do let us know.

    Thank you!

  • Profile Image
    Bob
    Answered on November 07, 2012 at 04:36 PM
    So are you not seeing the word "Send" appearing at the bottom of the blue box instead of vertically centred? I'm home now and looking at the form you sent me on an iPad so nothing in the cache. I'm seeing it at the bottom of the blue button. Not so easy t send you a screen capture from this device but will check in the morning from win7 and chrome and get back to you.Bob.
  • Profile Image
    jonathan
    Answered on November 07, 2012 at 05:07 PM

    @Bob

    You can use the button property to center-align it within the form.

     

    This is how it looks in ipad 2.0

    Inform us if you have further question.

    Thanks.

  • Profile Image
    guest_23115810578048
    Answered on November 07, 2012 at 05:17 PM
    Hi again,It's the word "send" is at the bottom of the blue button instead of in the middle, vertically. The button position is fine but look at the button itself and where the word "send" appears within the blue background of the button, it's at the bottom instead of in the middle. Look at the position of the text in the green button in your top screen grab and compare it to the position of the text in the blue button.Bob.
  • Profile Image
    jonathan
    Answered on November 07, 2012 at 05:20 PM

    I am sorry for that. I missed on your intial inquiry. You are correct, that indeed look odd. 

    I will check further how we can correct this. I will post back for an update.

    Thanks.

  • Profile Image
    jonathan
    Answered on November 07, 2012 at 05:36 PM

    @Bob

    In the injected CSS code, please look for this code in the .form-submit-button class.

    Then remove the code "line-height:32px;" -- just that line.

     

     

    /*--form submit button style--*/

    .form-submit-button{

    padding:0 20px;

    height:32px;

    line-height:32px;

    border:1px solid #70ad2e;

    background:#5aae00 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6141_form_button.gif) repeat-x;

    color:#fff;

    cursor:pointer;

    text-align:center;

    }

    OR you can put a lower positive number in px (in case you are not satisfied with the alignment)
    Please inform us if this does not work.
    Thanks.

     

  • Profile Image
    mackerg4
    Answered on November 08, 2012 at 05:39 AM

    I think you did it on my form already because this morning it's working and I looked for line-height in the code and it was already gone.

    Thanks, that's great.

  • Profile Image
    jonathan
    Answered on November 08, 2012 at 06:56 AM

    Glad to know its working now. =)

    But to tell you, I did not touch your form.. so, I am not really sure why it is working on your end now.

    Cheers!

  • Profile Image
    mackerg4
    Answered on November 08, 2012 at 07:10 AM

    Er, ???

  • Profile Image
    jonathan
    Answered on November 08, 2012 at 07:28 AM

     

    I know that sounds odd. When I look at your form, I only cloned it. So, I did not touch your own form.

    I cloned your form just now and had a look at its injected CSS code, I found that the code needed removed was not in it anymore. So, the button is now displayed correctly.

     

    Thanks.