Customize Submit button

  • Profile Image
    gaetanlaporte
    Asked on November 07, 2014 at 08:02 AM

    Hello, i'm not an expert in CSS

    i'm trying to get my form button

    http://awesomescreenshot.com/0c83t1wq84

    http://form.jotformpro.com/form/43024426157954

    like the ones on my theme website

    http://awesomescreenshot.com/0e33t1vo5f

    http://www.monepicierbio.net/nous-joindre

    please could you help me with this

     

    thanks a lot

     

  • Profile Image
    Ben
    Answered on November 07, 2014 at 09:20 AM

    Hi,

    Based on the screenshot that you have added I presume that this is what you would like it to look?

    http://form.jotformpro.com/form/43103714533950

    This is the CSS to do that:

    .form-buttons-wrapper > button.form-submit-button.form-submit-button-simple_green_apple {
        background: none repeat scroll 0 0 #5a8200;
        border: medium none !important;
        border-radius: 2px;
        font-size: 16px;
        font-weight: normal;
        text-transform: uppercase;
        width: 200px;
    }

    If you would also like to change the text displayed you should click on the submit button and then on the Submit Text button in your toolbar.

    You can see here how to Inject Custom CSS Codes and here how to Clone an Existing Form from a URL.

     

    Do let us know if you have any further questions.

    Best Regards,
    Ben
  • Profile Image
    gaetanlaporte
    Answered on November 07, 2014 at 09:39 AM

    Hello, thanks for your support!

    yes this is what i need. Its working!

    i copied the code on 2 others forms (inject CSS)

    and it dont worl. I dont understand why

     

    http://form.jotformpro.com/form/43024426157954

    http://form.jotformpro.com/form/42917742252961

  • Profile Image
    Ben
    Answered on November 07, 2014 at 10:05 AM

    Hi,

    You are welcome.

    I am glad to hear that that is what you were looking for.

    Now the reason why it did not work on other 2 is because you had different themes on the two new jotforms.

    Simple White on http://form.jotformpro.com/form/43024426157954

    and

    Simple Black on http://form.jotformpro.com/form/42917742252961

    Now this would be the CSS code for them:

    http://form.jotformpro.com/form/43024426157954

    .form-buttons-wrapper > button.form-submit-button.form-submit-button-simple_white {
        background: none repeat scroll 0 0 #5a8200;
        border: medium none !important;
        border-radius: 2px;
        color: white;
        font-size: 16px;
        font-weight: normal;
        text-shadow: none !important;
        text-transform: uppercase;
        width: 200px;
    }

    and for

    http://form.jotformpro.com/form/42917742252961

    .form-buttons-wrapper > button.form-submit-button.form-submit-button-simple_black {
        background: none repeat scroll 0 0 #5a8200;
        border: medium none !important;
        border-radius: 2px;
        color: white;
        font-size: 16px;
        font-weight: normal;
        text-shadow: none !important;
        text-transform: uppercase;
        width: 200px;
    }

    Best Regards,
    Ben

  • Profile Image
    gaetanlaporte
    Answered on November 07, 2014 at 10:12 AM

    It worked!

    thanks a lot Ben!

  • Profile Image
    Ben
    Answered on November 07, 2014 at 10:24 AM

    Hi,

    You are welcome.

    Do let us know if you have any further questions and we would be happy to help.

    Best Regards,
    Ben