Skip to content

Instantly share code, notes, and snippets.

@jaredatch
Last active September 9, 2024 09:12
Show Gist options
  • Save jaredatch/a02a30dbfe03e097cec336b090bea8f2 to your computer and use it in GitHub Desktop.
Save jaredatch/a02a30dbfe03e097cec336b090bea8f2 to your computer and use it in GitHub Desktop.
WPForms Input Masks

Basic Masks

Basic input masks use symbols to create the mask.

  • 9: Numeric
  • a: Alphabetical
  • A: Alphabetical (forces uppercase)
  • *: Alphanumeric
  • &: Alphanumeric (forces uppercase)

Optional Characters

[]: Example (99) 9999[9]-9999) which allows (99) 99999-9999 or (99) 9999-9999.

Dyanmic

{n}: n Repeats; Example aa-9{4} which allows AA-9999.

{n,m}: From n to m Repeats; Example aa-9{1,3} which allows AA-9, AA-99, and AA-999.

Alternator (OR statement)

|: Example a|9 which allows A or 9.

Date / Time

date:**Your Date Mask**

Example: dd/mm/yyyy which allows 09/29/17.

  • d: Day of the month as digits; no leading zero for single-digit days.
  • dd: Day of the month as digits; leading zero for single-digit days.
  • ddd: Day of the week as a three-letter abbreviation.
  • dddd: Day of the week as its full name.
  • m: Month as digits; no leading zero for single-digit months.
  • mm: Month as digits; leading zero for single-digit months.
  • mmm: Month as a three-letter abbreviation.
  • mmmm: Month as its full name.
  • yy: Year as last two digits; leading zero for years less than 10.
  • yyyy: Year as 4 digits.
  • h: Hours; no leading zero for single-digit hours (12-hour clock).
  • hh: Hours; leading zero for single-digit hours (12-hour clock).
  • hhh: Hours; no limit
  • H: Hours; no leading zero for single-digit hours (24-hour clock).
  • HH: Hours; leading zero for single-digit hours (24-hour clock).
  • HHH: Hours; no limit
  • M: Minutes; no leading zero for single-digit minutes. Uppercase M unlike CF timeFormat's m to avoid conflict with months.
  • MM: Minutes; leading zero for single-digit minutes. Uppercase MM unlike CF timeFormat's mm to avoid conflict with months.
  • s: Seconds; no leading zero for single-digit seconds.
  • ss: Seconds; leading zero for single-digit seconds.
  • l: Milliseconds. 3 digits.
  • L: Milliseconds. 2 digits.
  • t: Lowercase, single-character time marker string: a or p.
  • tt: Two-character time marker string: am or pm.
  • T: Single-character time marker string: A or P.
  • TT: Two-character time marker string: AM or PM.
  • Z: US timezone abbreviation, e.g. EST or MDT. With non-US timezones or in the Opera browser, the GMT/UTC offset is returned, e.g. GMT-0500
  • o: GMT/UTC timezone offset, e.g. -0500 or +0230.
  • S: The date's ordinal suffix (st, nd, rd, or th). Works well with d.

Aliases

Aliases allow you to provide a name and use a pre-packaged input mask.

alias:**Your Alias Here**

  • numeric
  • currency
  • decimal
  • integer
  • percentage
  • email
  • phone
  • url
  • phone
  • phonebe
  • phonenl
  • phoneru
  • phoneuk
  • phoneca
  • phoneus

Regex

Regex... for developers. Inside field setting:

regex:**Your RegEx Here**

Note: not all regex is supported. When using shorthands be aware that you need to double escape.

Technical details available https://github.com/RobinHerbots/Inputmask.

@fastalker
Copy link

Do you have trouble with Safari on iPhone autofilling the phone number when using a mask? It doesn't seem to work for me. Any idea?

@BlakeHampson
Copy link

Is there a way to make the currency alias whole dollar amounts? E.g. $1,000 and not $1,000.00

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment