What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Submit button on my website is not the same as in the JotForm preview

    Asked by janicehales on October 01, 2014 at 04:51 AM

    Hi I have resized my button, I can see it large on the jot form preview but not on my website  when i update.

     

    The webpage will be showing on an iPad

     

     

    Page URL:
    http://janicehales9.wix.com/primewest

    different style submit button submit style
  • Profile Image

    Answered by Ben on October 01, 2014 at 08:32 AM

    Hi Janice,

    I took a look at your jotform and I see what is the issue. If you select some specific style of the button then that style will be included as another class for your button and its style will not allow to much change to be made because of the priority, so we need to be more specific.

    This is the code that changes the button (to what I believe you wanted to achieve)

    button.form-submit-button {
    width:125px !important;
    height:55px !important;
    border:2px solid #ccc !important;
    font-size: 30px !important;
    }

    This here is a complete style that you should inject into your jotform while removing the previous styles (simply because there are 2 repeats of the styles so we remove what is not needed..

    form-textbox {height: 35px !important;width: 280px !important;font-size: 18px !important;}
    button.form-submit-button {
    width:125px !important;
    height:55px !important;
    border:2px solid #ccc !important;
    font-size: 30px !important;
    }

    You can follow these instructions to see how to inject styles: Inject Custom CSS Codes

    You can see the changed button here http://form.jotformpro.com/form/42733012437952

    If you want you can also just clone the jotform to your account - How to Clone an Existing Form from a URL

    I hope this is what you wanted to accomplish. :)

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by janicehales on October 01, 2014 at 05:20 PM

    Hi Ben I copied the code but unfortunately it is still not the same. What I see on jot form and jot form preview are different and also when i look at the website its different again....strange

  • Profile Image
    JotForm Support

    Answered by Welvin on October 01, 2014 at 08:40 PM

    I don't see any problem here, they looks the same using Chrome and Firefox - preview and to your website. Please try clearing your browsers cache. Or re-embed your form using our iFrame method: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. If it's the same, please let us know and add a screenshot of the difference.

    Thank you!