Customize Submit button

  • gaetanlaporte
    Asked on November 7, 2014 at 8: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

     

  • Ben
    Replied on November 7, 2014 at 9: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.

    Customize Submit button Image 1 Screenshot 20

    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
  • gaetanlaporte
    Replied on November 7, 2014 at 9: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

  • Ben
    Replied on November 7, 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

  • gaetanlaporte
    Replied on November 7, 2014 at 10:12 AM

    It worked!

    thanks a lot Ben!

  • Ben
    Replied on November 7, 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