How would I insert the '$' on a "number" element?

  • Profile Image
    brfi
    Asked on June 16, 2021 at 05:58 AM

    How would I insert the '$' on a "number" element?

    Using https://www.jotform.com/a, input ID #input_171 as an example.

  • Profile Image
    Patrick
    Answered on June 16, 2021 at 06:11 AM

    Hello! Custom CSS can be used for this purpose. I noticed that you partially implemented the solution yourself. I've prepared the remaining code. Here is the test form: https://form.jotform.com/211662704303951?jumpToPage=5

    If this solves your purpose, then you can use the following CSS code in your form:

    div#cid_171::before {
     content: "$";
     position: absolute;
     bottom: 23px;
     left: 10px;
    }

    input#input_171{
     padding-left: 15px;
    }

    In case you come across any questions, let us know.

    Thank you!

  • Profile Image
    brfi
    Answered on June 16, 2021 at 12:27 PM

    Thank you!

    I understand that adding the "$" sign to the stripe payment field is not possible, since that is a numbers only field and it will not accept non-numbers. However, using CSS, can it make it seem like the "$" sign is there, even if it's not actually in that field?

    I want to change this:
    1623861196_60ca27cc08600_

    to this:
    1623861335_60ca2857049bf_

    (I will remove the "USD" by following your instructions HERE.)

  • Profile Image
    Patrick
    Answered on June 16, 2021 at 02:12 PM

    Hello! Yes, this is possible. You can use the following CSS code to implement this:

    div#cid_194::before{
     content: "$";
     position: absolute;
     top: 10px;
     left: 5px;
     z-index: 1;
    }

    input#input_194_donation{
     padding-left: 15px;
    }

    Here is an example form: https://form.jotform.com/211665116729963?jumpToPage=5

    Let us know if you have any further queries.

    Thank you!

  • Profile Image
    brfi
    Answered on June 16, 2021 at 02:45 PM

    That was spectacular, thank you!!

    One more question, how would I rearrange the stripe element?

    I want to change this:

    1623869062_60ca4686d382e_


    So that it would look like this:

    1623868642_60ca44e2cc868_

  • Profile Image
    Girish
    Answered on June 16, 2021 at 11:45 PM

    Hello,

    I am not sure if that is possible even using CSS.

    But will check and revert.

  • Profile Image
    brfi
    Answered on June 17, 2021 at 02:02 AM

    Thank you. If that is not possible, would I at least be able to move the sublabel to the top and make it the same size as a regular label?

    Never mind, that's a regular option, right on the form.

  • Profile Image
    Patrick
    Answered on June 17, 2021 at 02:26 AM

    Hello! It seems you were able to resolve this at your end. But if you need further assistance with this, let us know.

    Thank you!