Adding a $ in Configurable List Widget Fields

Hey!

In the Number field of a Configurable List widget, I want to add a $ in the entry field so a) user understands it's currency and b) so they won't add the symbol themselves (it interferes with the calculation).

There must be some custom css to do this but I can't figure it out. Can you help?

thanks!

Stace

Hi Stacey,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

One of our Support Team members has taken over this thread and will assist you further. I will no longer respond here.

Let us know if you have any other questions.

Jotform Support

Hi Stacey,

Can you send me the link to your form so I can take a look for you? You can do it in a few simple steps:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. Under the Quick Share section, you'll see the Form URL under Share With Link. Click Copy Link to copy it to your clipboard.

Once you get back to us, we can take the next step toward solving this.

Sure here you go. https://form.jotform.com/252293819059163
My main objective was to have the values in the “Amount” and “total amount” fields add up which works great.
But those fields require currency values, and if they put the $ in front of their amount like many people would, the calculation doesn’t work. I’d like to add the “$” as a permanent symbol in the field so it’s clear we want a number and they don’t have to add the dollar sign.
Thanks!
Stace
[photo]<https: />
Stacey Altieri
President/CEO, Procedure Portals
203-745-8335<203-745-8335><https: />
<stacey>

</stacey></203-745-8335>...

Hi Stacey, 

You can easily add a dollar sign to your Configurable List by Injecting CSS Codes into your widget. Let me walk you through it:

1. First, copy this code:

.configurable-list-field-wrapper.number {

  position: relative;

}



/* Adding $ sign */

.configurable-list-field-wrapper.number::before {

  content: "$";

  position: absolute;

  left: 8px;

  top: 60%;

  pointer-events: none;

}



/* Add a Space before Number input to avoid overlapping */

.configurable-list-field-wrapper.number input {

  padding-left: 16px !important; 

}

2. In Form Builder, select your Configurable List and click the Wand icon.

3. Now, go to Custom CSS tab to paste the code and click the Update button to save the changes.

Take a look at the screenshot below to see how it works after:Give it a try and let us know how it goes.

Hi Ronald thank you!

Hi Stacey,

To keep the conversation organized, I moved your other question to its own thread, and someone from our Support Team will help you with it here.

Let us know if you have any other questions.