Phone input mask

Is there a simple way create a mask to ensure client input matches a phone number pattern, prior to submitting?

In the US it is something like (###)###-####

like this … (555)555-1234

I’ve tried using jquery, jasney, js function loaded in the header, etc etc…

I’ve run into problems with every solution.

I know that I can validate the pattern upon submission, but I want to do this sooner, as the user inputs data.

Example like this.

Is there a simple way to do this?

1 Like

Hi Kevin!

You can do it using some Javascript :slight_smile:

  • Add a workflow for “On change” on your phone input

  • Add a “Change variable value” action, select the value of your input

  • Set this code as Javascript :
    return event.value.replace(/^\(?(\d{3})\)?\s?(\d{3})\-?(\d+)$/, "($1) $2-$3");

This way when the user types something it will be formated the way you want :wink:

Bonus :
If you want to ensure that the format is correct before submiting a form, you can add a an attribute to the phone input:
Name : pattern
Value : \([0-9]{3}\)\s[0-9]{3}-[0-9]{4}
The browser will prevent the submit event from happening.

Capture d’écran 2022-05-11 142242


Amazing!! Thank you for that!

I also added maxlength to HTML attributes to stop the user from entering more digits.

That worked perfectly.


@Marc Another question on this…

Is it possible to do this when the input element is being displayed inside of a collection?

Step 1 doesn’t work for me since It is not possible to have an action to Change Variable Value" since I cannot select the variable.

I’ve tried other javascript:

  • = event.value.replace(/^(?(\d{3}))?(\d{3})-?(\d+)$/, “($1)$2-$3”);
  • event.currentTarget.value = event.value.replace(/^(?(\d{3}))?(\d{3})-?(\d+)$/, “($1)$2-$3”);
  • etc
  • etc

I cannot figure out how to access the target from inside this action for WeWeb.


You cannot access the dom element in the change workflows.
I’m working on adding the dom event to the workflows.
It should be available soon !

1 Like