CSS changes made inside of Form Designer are not applied to the form

  • demcalary
    Asked on May 3, 2015 at 12:21 AM

    The font size is too small on the Submit and Clear Form buttons on my website form, but I am not able to enlarge it in the Designer>CSS panel. The CSS for .form-submit-button and .form-submit-reset is unresponsive when I make changes to font-family, font-weight, and font-size. Although changes do appear in the example window to the left of the CSS panel, they do not show up in the Preview window or on my website.

    The problem appears limited to those three attributes, because other properties for those two buttons are responsive to style changes, such text-transform and color choices for font, button background, and button border.

    I would like to enlarge the buttons' font and make it bold. What is the solution?

    Jotform Thread 563231 Screenshot
  • BJoanna
    Replied on May 3, 2015 at 4:43 AM

    I have cloned and tested your form and I noticed that you added CSS for submit button and clear form button that are not shown when form is preview. 

    I have added !important to your CSS code. A rule that has the !important directive will always be applied no matter where that rule appears in the CSS document.

    CSS changes made inside of Form Designer are not applied to the form Image 1 Screenshot 40

    CSS changes made inside of Form Designer are not applied to the form Image 2 Screenshot 51

    After adding !important to your CSS code your form will look like this.

    CSS changes made inside of Form Designer are not applied to the form Image 3 Screenshot 62

    Here is mine cloned form http://form.jotformpro.com/form/51222474077957? 

    Hope this will help. Let us know if you need further assistance. 

  • demcalary
    Replied on May 3, 2015 at 9:56 AM

    Your solution worked! 👍 I had forgotten about the "!important" command, although have used it before in other situations.

    Thanks so much. I'm grateful. 😀