How to Change the look of the Submit Button

  • Profile Image
    alvincosio
    Asked on August 06, 2013 at 05:34 PM

    Hi,

    need help. i am creating an email subscription. problem is the submit button is not editable. i know it can edit by using the injecting a code but i don't know how to create a code. i want something like this. (please see attached pic)

     

    the submit button is squared and beside the textbox

    please help thanks,

    Alvin

     

     

  • Profile Image
    alvincosio
    Answered on August 06, 2013 at 06:22 PM

    In addition to my question, i already made an update. please see my forms at 

    http://www.southernindustrialandtruck.ca/blank-page

    i cannot do by myself. please help guys

    i cannot align the textbox and the subscribe button, and please remove the spaces of  textbox and submit button

    and lastly i want to make the font of hint example to be smaller around 7 or 8px and the hint example text must be center to the textbox.

     

    Thanks in advance.

     

  • Profile Image
    alvincosio
    Answered on August 06, 2013 at 06:41 PM

    i just got the code, the problem right now is when i view into different browser there is a misalignment of textbox and subscribe button. IE is the only browser that has no misalignment issue.

    chrome = slight misalignment of textbox and subscribe button

    mozilla  = misalignment and there is a space between textbox and subscribe button

    ie = no misalignment

     

    look at the form:  

    http://www.southernindustrialandtruck.ca/blank-page

     

    Thanks

     

     

  • Profile Image
    khrisell
    Answered on August 06, 2013 at 08:26 PM

    Hello,

    You don't need CSS code injecting when editing the look of your Submit button because we have several designs ready for you to use.

    We have a button gallery from where you can choose a design to your submit button.

    You can even add your own Submit button Image.

     

    With regards to the alignment, You can also modify it from the properties tab above.

    Please let us know if you need further assistance on this.. 

    Thank you for using JotForm.

    Happy to help! :)

  • Profile Image
    alvincosio
    Answered on August 07, 2013 at 09:08 AM

    Hi there, yes i already do that. But my problem now is misalignment when view in firefox and chrome. Internet explorer has no misalignment issue. You can see it in my link above.

    http://www.southernindustrialandtruck.ca/blank-page

     

    Please help

  • Profile Image
    pinoytech
    Answered on August 07, 2013 at 11:38 AM

    Hi,

    I've fixed the issue of your form for you. Kindly take a look at your website now: http://www.southernindustrialandtruck.ca/blank-page/4578330356

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image
    alvincosio
    Answered on August 07, 2013 at 11:45 AM

    it works, however when you test it without filling the email address and click the subscribe button there is a misalignment again between the textbox and subscribe button

  • Profile Image
    EltonCris
    Answered on August 07, 2013 at 02:04 PM

    @alvincosio

    Add the following CSS codes to your form, this might help aligned the email input on error state.

    .form-line-error input{

    box-shadow: none !important;

    height: 26px !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Thanks!

  • Profile Image
    alvincosio
    Answered on August 07, 2013 at 03:00 PM

    yes. it works. thank you very much