How to automatically add USD after input in contact form 7

Question

I am trying to create an input box that allow users to enter currency amount. I have created a text box in contact form 7, but it should automatically add "USD" at the end, as soon as someone enters the digit into the input box.

If it's not possible, USD written at the end of the input field would be fine too.

You need to use jquery for it. Or if only html and css look at http://stackoverflow.com/a/2913366/3697102 — Ayan, Jul 15 '16 at 13:25
Contact Form 7 allows you to add your own html to the form in WordPress. Is there a reason you haven't simply put "USD" next to the form field there? — Nathaniel Flick, Jul 15 '16 at 13:59

Shaggy · Answer 1 · 2016-07-18T12:59:23.177

2

As it is a required field, you can achieve this by adding a tag containing the "USD" text immediately after the input and set its display to none while the input is empty using the :invalid pseudo-class:

#input:invalid+span{
  display:none;
}

<input id="input" required type="number" value=""><span>USD</span>

edited Jul 18 '16 at 12:59

answered Jul 15 '16 at 13:30

Shaggy

6,696
2
25
45

How to automatically add USD after input in contact form 7

1 Answers1