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

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

thanks.

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.

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.

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

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

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.

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:

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

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

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..

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. 

Thanks, I appreciate your help!