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

    Knob Canvas: How to add °C after the value?

    Asked by Wtfuck on February 04, 2017 at 02:28 PM
  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 04, 2017 at 10:53 PM

    May you provide us the widget you're referring to? 

    We will wait for your response. 

  • Profile Image

    Answered by Wtfuck on February 05, 2017 at 06:29 AM

    Hi

    Here is the link

    https://widgets.jotform.com/widget/knob_canvas

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 05, 2017 at 11:52 AM

    You can do it with some CSS code, here is the one that I used on my end: 

    This one should be injected to the form: 

    #cid_8::before{

     content: "°C" ;

        position: absolute;

        margin-top: 76px;

        margin-left: 110px;

        font-style: normal;

        font-variant: normal;

        font-weight: bold;

        font-stretch: normal;

        font-size: 47px;

        line-height: normal;

        font-family: Arial;

        text-align: center;

        color: white;

        padding: 0px;

        -webkit-appearance: none;

    }

    The ID where the code should be injected will change, this guide will help you to find fields IDs: https://www.jotform.com/help/146-How-to-find-field-IDs-and-names 

    Just replace the number on my sample code with the number in the ID you will find, it may change so it could also be "cid_9" or "cid_10", following the guide above will help you to find it. 

    This guide will help you to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    The next code needs to be injected to the widget:

    #dial{

        margin-left: -170px !important;

    }

    To add it click on the wizard icon, go to the CSS tab and paste the given code  there: 

    This should be the result: 

    Here's also the link to my sample form: https://form.jotform.com/70354475015957 

    Feel free to clone it

  • Profile Image

    Answered by Wtfuck on February 05, 2017 at 03:05 PM

    Awesome you rocks Kevin !