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

    Could you show me how to apply CSS to the Input Mask widget please?

    Asked by snaplash on March 11, 2016 at 11:43 PM

    Hey Jotform!

     

    I tried searching, but could you show me how to add the following CSS to Masked Input "Property Price" on form https://form.jotform.com/60690023930954?

     

     border-top-width : 0!important;

        border-right-width : 0!important;

        border-left-width : 0!important;

        border-bottom-width : 1px!important;

        border-bottom-left-radius : 0px;

        border-bottom-right-radius : 0px;

        border-color : #5f5f5f!important;

        width : 160px!important;

        font-family : Lato;

        font-size : 24px;

        font-weight : 300!important;

        color : #5f5f5f;

        background : transparent;

        position : relative;

        text-align : left;

        padding-left:10px;

       

     

    I added this to the #maskedInput tag but the fonts and many other attributes would not change.

    Any help you can offer would be spectacular!

    I am trying to get the "Property Price" to look like the fields above and below.

     

    Thank you!

    Mark.

    input mask mask how JotForm size font attributes
  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 12, 2016 at 04:06 AM

    Hello Mark,

    The correct syntax of your custom css code should be:

    #maskedInput{

    border-top-width: 0 !important;

    border-right-width: 0!important;

    border-left-width: 0!important;

    border-bottom-width: 1px!important;

    border-bottom-left-radius: 0px;

    border-bottom-right-radius: 0px;

    border-color: #5f5f5f !important;

    width: 160px !important;

    font-family: Lato;

    font-size: 24px;

    font-weight: 300!important;

    color: #5f5f5f;

    background: transparent;

    position: relative;

    text-align: left;

    padding-left: 10px;

    }

     

    I have added the above custom css code in your widget. Please check the screenshot below:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by snaplash on March 12, 2016 at 04:59 AM

    Hello Ashwin!

     

    Thanks for helping me!

    Unfortunately the font will not set to 300 weight and the bottom cuts off

     

    Am I doing something wrong...?

  • Profile Image
    JotForm Support

    Answered by Boris on March 12, 2016 at 05:56 AM

    I see that the masked input field is the one named "Property Price". Upon inspecting the field, it appears that the custom CSS is applied to this field correctly:

    When it comes to the field being cut off, I see that it displays correctly on Firefox, and is getting cut off in Chrome:

    The reason it is getting cut off is because the widget resides inside an iFrame, so that it can have all its functionality separated from any scripting conflicts between the form and the widget. The widget tries to resize its iFrame on the form so that everything from inside the iFrame can be shown, but sometimes it can't manage to do so due to custom CSS inside the widget.

    The input field inside the iFrame is set to height of 65 pixels, while the iFrame itself has only 24 pixels.

    In order to fix this, we can simply add a small bit of CSS code inside the form itself (and not inside the widget), so that the iFrame containing the widget will have more space:

    #customFieldFrame_914 { min-height: 65px; }

    You can add this code to your form by opening it up in the Designer, switching to the CSS tab, and pasting the code at the bottom of the textbox there. Please let us know how it goes.

  • Profile Image

    Answered by snaplash on March 12, 2016 at 11:26 AM

    Boris! 

     

    Many many thanks for your detailed and clear answer! All is working fine but one thing.

    The Font is listed in the widget as 

    #maskedInput {font-family:inherit}

     

    Even though my css says:

    font-family : Lato!important;

        font-size : 24px!important;

     

        font-weight : 300!important;

     

    My font-weight will not change and also I cannot get rid of the blue highlight box.

     

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 12, 2016 at 12:35 PM

    First of all, on behalf of my colleagues you are welcome. 

    Now, I'm not sure if understood your request, I have checked your form and seems like it is applying the CSS style, it also is shown in the console. 

    Were you able to apply the CSS code? 

    Please, do let us know, we will be glad to take other look to your form. 

  • Profile Image

    Answered by snaplash on March 12, 2016 at 12:46 PM
    Unfortunately, the font weight of 300 will not apply to the css in the
    widget.
    Could you show me how to do that please?
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on March 12, 2016 at 01:14 PM

    Could you please try to set:

    font-weight: bold !important;

    Please let us know if that could work for you, since, I checked and number values for font-weight doesn't affect weight of font.

     We'll wait for your response.

    Thank you.