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

    Widget entries on Calculate Fields

    Asked by slross on January 18, 2014 at 04:42 PM

    I'm working with the widgets tool and for example the one called 'flat radio buttons', I can't seem to be able to include the value of the chosen radio button in the 'calculate fields' option which calculates entries from standard fields etc. When checking the Properties the standard fields have a 'field name' section in the general settings tab, however the widget doesn't list these field details so therefore there is no field name to appear when using the calculate fields option ?

     

    Is there a work round to this ?  Thx

    radio buttons name settings section
  • Profile Image
    JotForm Support

    Answered by jonathan on January 18, 2014 at 06:08 PM

    Hi,

    Please refer also to this guide -How-to-perform-calculation-in-the-form

    Unfortunatelly, you cannot use the flat radio widget in the calculator field as it lacks the necessary field property it requires. But I checked on the regular Radio Option button, and you can use it instead.

    I am sorry, but there seems to be no workaround we can offer for this on the form builder.

    If you use the regular radio option button, we can probably assist in adding CSS codes to stylized it to make it also appear like the flat radio widget. 

    Thanks.

  • Profile Image

    Answered by slross on January 18, 2014 at 06:31 PM

    Hi and thanks for the prompt reply. If you could let me have the css codes to change the radio buttons to look like the flat radio widget that would be greatly appreciated. Thx again, Stuart

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 18, 2014 at 07:22 PM

    @slross

    You can try the following CSS codes.

    input[type=radio].form-radio {

    display:none;

    }

    input[type=radio].form-radio + label {

    padding-left:26px;

    height:22px;

    display:inline-block;

    line-height:22px;

    background-repeat:no-repeat;

    background-position: 0 0;

    font-size:17px;

    vertical-align:middle;

    cursor:pointer;

    }

    input[type=radio].form-radio:checked + label {

    background-position: 0 -21px;

    }

    input[type=radio] + label {

    background-image:url(https://shots.jotform.com/elton/radio_flat.png);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

     

    }

    Sample: http://form.jotform.com/form/40036523992858?

    Hope this helps. Regards!

     

  • Profile Image

    Answered by slross on January 18, 2014 at 07:28 PM

    That's great thanks so much !

  • Profile Image

    Answered by slross on February 18, 2014 at 04:48 PM

    Hi,

    I've been using the code as above given to me on 18th Jan and whilst it works fine in Chrome, there is a problem with it in Internet Explorer.  This being the fact that you cannot click on the radio button directly to select it, you have to click on the text to the side of it ? It appears to be misaligned in this browser ?  If possible could you supply the code to correct this ?

     

    Many thanks,

     

    Stuart

    PS.  Would it be someway possible to have a different radio button graphic for each field ?  If so could you please supply the example code to do this.

  • Profile Image
    JotForm Support

    Answered by jonathan on February 18, 2014 at 05:11 PM

    Hi Stuart,

    Can you please share to us the URL of the form where you have applied this. Perhaps the form itself is just not properly made the reason there is misalignment.

    I tested the code provided by our colleague EltonCris on a new form, and they work just fine on IE9 browser. You can check this form http://www.jotform.me/form/40487076928466

    To change the image used on the CSS codes, you just need to alter this line of code

    background-image:url(https://shots.jotform.com/elton/radio_flat.png);

    The highlighted texts in read is the URL path of the image file used.

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

  • Profile Image

    Answered by slross on February 18, 2014 at 05:37 PM

    Thanks for your prompt reply.

    I am still experiencing the same problem with the test form you have supplied;

     

    http://www.jotform.me/form/40487076928466

     

    I'm running IE11 and if you hover the cursor over the round grey circle (radio button) it doesn't change to the pointing hand symbol, it only changes to this once I move it to the right and hover it over any of the text, i.e. Option 1 etc.

     

    Thanks for the further guidance regarding changing the image used for the radio button, however I wanted to how it is possible to have more than one different image for the radio button in a form, i.e. each radio field in a form would show a different image etc.

     

    Thanks, Stuart

  • Profile Image
    JotForm Support

    Answered by TitusN on February 18, 2014 at 07:18 PM

    Hello Stuart,

    Thank you for the feedback.

    It appears the cursor changes into a hand from my end on windows 8, IE 11. 

    Please try clearing your cache to see if this helps.

    To apply different background images, you may need to use the form's source code to do that, creating unique id's for each radio button so that you can apply unique images using CSS.

    As it stands, the radio button containers have the same id/class name.

    My colleagues have recieved your email as well, and may advice on other possible workarounds.