Using Masked Input widget in calculations and passing its values to another form

  • Profile Image
    Asked on September 24, 2017 at 08:03 AM

    Hello guys,


    I've got a problem with the masked input.

    1. the problem with , and . for thousands and decimals is not working as it should. In Europe, we use . for thousands and , for decimals. But it's almost not possible to change this, and make calculations with it.  But the main problem with the masked input is, if you use it in a loan calculation simulation tool, and let people play around with loan amount, loan duration, .... its not tha easy to change a number once the field is filled out, to change it with another number the thousands and decimals digits are enoyingly .

    2. But the value from a masked input field is not possible to take with to another form. with the url methode, the number field on the seccond form stays empty, number, text or masked input on seccond form, they all stay empty.

    3. But in fact the only thing i need instead of the masked input is a way to put the Euro € symbol in the input field just like tons of youre templates have font awesome or other icons in the inputfield. The euro is part of the font awesome catalogue, so in fact this must be possible. But i'm not as experienced to achieve this, i found that i need to insert CSS, but when i do, i copy the demo i dont see it. Is it possible that the icons and CSS method is not chrome complieant?

    This is the form where i need the € symbol in the input field instead of behind the field  the euro in font awesome is

    i only need this like this contact form template the icons at the start of the fields, i need a € behind the input, but in the same field? How can i achieve this?  Futhermore when i see for instance 123 contactforms, or cognitoforms, gravity, ..... they all have a currency field with the possibility to calculated with it, ....  So you guys shouldnt stay behind i think.

  • Profile Image
    Answered on September 24, 2017 at 10:51 AM

    1. I understand what you mean with the input masked widget. However, there is no other way for this to work aside from using the standard thousand and decimal separators. If you will use the widget, you have to use comma as the separator for thousands then the dot for the decimal.

    2. Well, I think this is because you are not using the correct field names. Can you share us your two forms and the fields where you would want to get the value and pass to (2nd form)?

    3. As far as I know, Font Awesome doesn't give you the option to use their tool for importing fonts. A workaround for this would be to use an icon then do it with CSS. I'll play around with this with your form and let you know the CSS.

  • Profile Image
    Answered on September 24, 2017 at 11:14 AM

    I'm sorry for my previous statement, I just figured out that the form you've shared is using font awesome icons.

    Anyways, you can inject the following custom CSS codes to add the Euro symbol in the first number field in your form, the Loan Amount:

    @import url(//;

    div#cid_66:before {

        font-family: FontAwesome;

        content: "\f153";

        position: absolute;

        height: 100%;

        width: 18px;

        line-height: 25px;

        text-align: center;

        font-size: 16px;


    To apply the CSS to other fields, just copy it and change the cid_66 to the correct field ID number. Here's how you can find the field IDs: 

    Let us know if you need further assistance.