Auto-formating Phone Numbers in InfoPath

The first thing we will need to do is open up our InfoPath Form. Below is a screenshot of the InfoPath form we will use for this demo:

On the Home tab in InfoPath click on Manage Rules in the ribbon. Click on the Phone Number textbox and add an action rule in the Rules Pane. We are going to add a condition that looks like the following:

Click OK.

Next we are going to add an action to run. So click Add next to Run these actions in the Rules Pane. Add an action to set the value of Phone Number. If the user types in a phone number in a format other than what we want: (xxx) xxx-xxxx then this action rule will re-set the value of the phone number to the correct format.

Copy the following XPath for the Value:

concat(“(“, substring(translate(., “()- “, “”), 1, 3), “) “, substring(translate(., “()- “, “”), 4, 3), “-“, substring(translate(., “()- “, “”), 7, 4))

(hint: make sure to click the checkbox to Edit XPath (advanced) on the bottom right corner of the Value Window). Your Value should look like this:

Your final action rule should look like this:

Click OK.

Now when you preview your form, type a phone number like this: xxx-xxx-xxxx or xxxxxxxxxx. The form should automatically modify the format to this: (xxx) xxx-xxxx.

Optional:

Add a nice placeholder indicating the correct format. To add a placeholder, right click on the textbox. Go into the Textbox Properties. Click on the Display tab and type your placeholder.