How do I format the payment amount to have a dollar sign in front?

  • Profile Image
    FineLinesFurnishings
    Asked on September 25, 2017 at 04:19 PM

    Trying to have the payment amount box have a $ sign in front of the number.  Currently only has the USD next to it.


    thanks.

  • Profile Image
    aubreybourke
    Answered on September 25, 2017 at 07:13 PM

    You can try using the "Masked Input Widget". Just search for it on the widgets tab and drag it onto your form.

    You can configure it by clicking on the magic wand.

  • Profile Image
    FineLinesFurnishings
    Answered on September 26, 2017 at 12:20 PM

    This doesn't answer how to use the widget.  I put in place but need the actual field to have a $ sign in it.

    This is a prepopulated field that I need to have formatted.

  • Profile Image
    aubreybourke
    Answered on September 26, 2017 at 01:05 PM

    If you click on the wizard (magic wand icon) You will see it automatically adds a $ sign.

     

    Just for example I have named it "Total Order Amount". So there are now two fields called "Total Order Amount".

    To have the masked input widget display the Total order amount, you will need to setup a condition to copy the value of the Total Order Amount (form calculation widget) to the Total Order Amount (masked input widget)

    I also used the following CSS code to hide the amount field in the payment integration:

    #input_12_donation{
    display: none !important;
    }
    #label_input_12_donation{
      display: none !important;
    }

    How to Inject Custom CSS Codes

    Only problem is that it says USD. Its not possible to remove this label via CSS or any way other than using editing the full source code and deleting it manually:

    How to get the Full Source Code of your Form


  • Profile Image
    FineLinesFurnishings
    Answered on September 26, 2017 at 01:08 PM

    Is this the only way to add a $ sign in front of my amount?  Seems awfully complicated than just adding it as a format???

  • Profile Image
    Welvin
    Answered on September 26, 2017 at 02:13 PM

    I'm looking at this now. You have the payment integration in the form (http://www.jotform.us/form/72614330650145), there is currently no way you can add the currency sign in it. You can do it with CSS instead. I'm on it. I'll let you know.

  • Profile Image
    Welvin
    Answered on September 26, 2017 at 02:31 PM

    Inject the following custom CSS codes to your form:

    @import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css);

    div#cid_12:before {

        font-family: FontAwesome;

        content: "\f155";

        position: absolute;

        height: 100%;

        width: 18px;

        line-height: 25px;

        text-align: center;

        font-size: 15px;

    }

    input#input_12_donation {

        width: 20%;

        padding-left: 15px;

    }


    The result will be like this:

  • Profile Image
    FineLinesFurnishings
    Answered on September 26, 2017 at 02:37 PM

    Where would this CSS code go?  At the bottom of the current code that's there?

  • Profile Image
    Welvin
    Answered on September 26, 2017 at 02:44 PM

    Yes, at the bottom. But you can also place it at the top.

  • Profile Image
    FineLinesFurnishings
    Answered on September 26, 2017 at 02:51 PM

    I just copied and pasted this information into the Custom CSS area and it didn't change anything.  It put it on multiple lines, how should the final look be formatted for CSS?  

    I don't know how to program in CSS..

  • Profile Image
    Welvin
    Answered on September 26, 2017 at 03:08 PM

    I wonder if you are working on a different form. You do not have an existing CSS in the form yet you've mentioned there was. Did you remove them already?

    I am on this form on your account https://www.jotform.com/72614330650145. I've added the CSS. I can see it's not visible in the form builder but works in the preview. 

  • Profile Image
    FineLinesFurnishings
    Answered on September 26, 2017 at 05:26 PM

    Thanks, I appreciate your help!