<html lang="es-es" dir="ltr"><head></head><body>### [Cómo restringir el campo de teléfono para que solo acepte números](https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/)

**Publicado:** 12 de agosto de 2021
**Autor:** Equipo Editorial

**Extracto:** En este tutorial, te mostraremos cómo restringir el campo de Teléfono para que solo acepte números utilizando un pequeño script. 

**Contenido:**

¿Te gustaría restringir el campo **Teléfono** para que solo acepte números? Por defecto, los formatos de teléfono **Internacional** y **Smart** te permitirán introducir letras, pero fallarán en la validación cuando salgas del campo.

![el error de validación predeterminado del teléfono se mostrará cuando salgas del campo](https://wpforms.com/wp-content/uploads/2021/08/wpforms-default-phone-validation.jpg)

Usando un pequeño fragmento de código, puedes deshabilitar fácilmente cualquier carácter del teclado para que no se introduzca a menos que sea un número. Esto significa que, si intentaran escribir cualquier cosa que no fueran números, el texto simplemente no se introduciría, deshabilitando así el campo hasta que se introdujera un número.

## Creación del formulario

Primero, necesitarás crear un nuevo formulario y añadir tus campos. Si necesitas ayuda para crear tu formulario, [consulta esta documentación](https://wpforms.com/docs/creating-first-form/ "Cómo crear tu primer formulario").

![crea tu formulario y añade tus campos](https://wpforms.com/wp-content/uploads/2021/08/wpforms-create-your-form.jpg)

## Añadir la clase CSS

A continuación, necesitarás añadir una clase CSS al campo del formulario **Teléfono**. Siempre que se utilice un campo **Teléfono** con esta clase, **solo** aceptará un valor numérico.

Al añadir esta clase CSS a cualquier campo del formulario que acepte clases CSS, puedes restringir ese campo para que solo acepte números.

Para añadir una clase CSS, selecciona el campo del formulario Teléfono que has añadido a tu formulario y, en la pestaña **Avanzado**, añade **numbersOnly** a las **Clases CSS**.

![añade la clase CSS numbersOnly al campo Teléfono](https://wpforms.com/wp-content/uploads/2021/08/wpforms-add-css-class.jpg)

## Restringir el campo de teléfono solo a números

Ahora es el momento de añadir el fragmento a tu sitio que restringirá el campo para permitir solo números.

Si necesitas ayuda para añadir fragmentos a tu sitio, [revisa este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo añadir PHP o JavaScript personalizado para WPForms").

```

/**
 * Restringir el campo de teléfono para que solo acepte números.
 *
 * @link https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/
 */

function restrict_letters_in_phone_field( ) {
?&gt;

**Categorías:** Campos

**Etiquetas:** Javascript

---</body></html>