Would you like to restrict the Phone field to only accept numbers? By default, the Phone form field will accept letters, characters, and numbers but when you click to the next field a validation error would appear.
Using a small code snippet you can easily change this field by not allowing users to enter any letters or special characters. When a user tries to enter a letter or special character the key would not be entered.
Creating the form
First, you’ll need to create a new form and add your fields. If you need any assistance in creating your form, please see this documentation.
Adding the CSS class
Next, you’ll need to add a CSS class to the Phone form field. Whenever a Phone field with this class is used, it will only accept a numeric value.
By adding this CSS class to any form field that accepts the CSS classes, you can restrict that field to accept only numbers.
To add a CSS class, select the Phone form field you’ve added to your form and in the Advanced tab, add numbersOnly to the CSS Classes.
Adding the snippet to restrict the Phone field to only numbers
Now it’s time to add the snippet to your site that would restrict the field to only allow numbers.
If you need any help in adding snippets to your site, please review this tutorial.
This snippet will automatically search for any form field with the CSS class of numbersOnly and will prevent the default entering of characters unless it matches anything except the 0-9 key entry.
And that’s all you need! Would you like to make the phone number inside the email notifications a link? Take a look at our tutorial on How to Make Phone Numbers a Link in Email Notifications.
Action reference: wpforms_wp_footer_end