Form Align and Submit Button Error

  • Profile Image
    thisiswhatwetrainfor
    Asked on May 21, 2013 at 02:05 PM

    Why is there so much padding on my GO button text on top?


    Also how can I align my form all the way to the left? 

    Thanks!

  • Profile Image
    Morian
    Answered on May 21, 2013 at 02:12 PM

    Hello there! I checked your source code and I saw that among your injected CSS code is this

    .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;
     

    }

     

    You can simply adjust that or delete it entirely in order to remove the padding on your GO button 

  • Profile Image
    thisiswhatwetrainfor
    Answered on May 21, 2013 at 02:21 PM

    Thanks, I just updated it and nothing changed....

     

    http://mandilewebdesign.com/thisiswhatwetrainfor/test/contact.html

     

    Any other advice?

  • Profile Image
    Morian
    Answered on May 21, 2013 at 02:30 PM

    Please change the line height value to 16px

    line-height:16px;

    That will center the "Go" of the button. =)

  • Profile Image
    EltonCris
    Answered on May 21, 2013 at 02:35 PM

    @thisiswhatwetrainfor

    To align the form all the way to the left, simply inject this CSS code to your form.

    .form-all {

    margin: 0px !important;

    }

    To center the button text, as per suggested by Morian, use this CSS:

    .form-submit-button {

    line-height: 16px !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Let us know if you require further assistance. Thanks!

  • Profile Image
    thisiswhatwetrainfor
    Answered on May 21, 2013 at 03:23 PM

    Thanks guys, still not working...any other suggestions?

     

    http://mandilewebdesign.com/thisiswhatwetrainfor/test/contact.html

  • Profile Image
    pinoytech
    Answered on May 21, 2013 at 03:39 PM

    Hi,

    I've fixed your form for you by injecting this custom css into your form.

    .form-all {

    margin-left: 0px !important;

    }

    http://mandilewebdesign.com/thisiswhatwetrainfor/test/contact.html

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image
    thisiswhatwetrainfor
    Answered on May 21, 2013 at 04:17 PM

    Thanks!

  • Profile Image
    pinoytech
    Answered on May 21, 2013 at 04:22 PM

    It's my pleasure! Is there anything we can help you?