### [Cómo cambiar el estilo del marcador de posición de la tarjeta de crédito de Stripe](https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/)
**Publicado:** 13 de abril de 2021
**Autor:** Equipo Editorial
**Extracto:** Este tutorial te mostrará cómo cambiar el estilo del campo de tarjeta de crédito de Stripe y el texto del marcador de posición usando PHP y CSS.
**Contenido:**
## Introducción
¿Te gustaría cambiar el estilo del texto del marcador de posición del campo de formulario de **tarjeta de crédito de Stripe** con WPForms? Usando un pequeño fragmento de PHP y también CSS personalizado, puedes cambiar fácilmente el estilo del texto del marcador de posición. En este tutorial, te guiaremos a través de cada paso.
Por defecto, el campo donde ingresas tu tarjeta de crédito tiene un estilo predeterminado.
Ten en cuenta que este fragmento solo se aplicará al campo de formulario de **tarjeta de crédito de Stripe** cuando se utiliza el **Modo de campo de tarjeta** de la pestaña **Pagos** de la configuración de WPForms y se establece en **Elemento de tarjeta**.
Para obtener más información sobre esta opción, [consulta esta útil guía](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#Selecting_a_Credit_Card_Field_Mode "Stripe Pro Addon").
## Creación del formulario
Comenzaremos creando un nuevo formulario y agregando un campo de **tarjeta de crédito de Stripe** al formulario.
Si necesitas ayuda para crear este tipo de formulario, [consulta esta documentación](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Cómo instalar y usar el complemento Stripe con WPForms").
Una vez que hayas agregado el campo al formulario, selecciona el campo y haz clic en **Opciones de campo**, luego haz clic en la pestaña **Avanzado** y coloca algún texto de **Marcador de posición** dentro del **Texto del marcador de posición del nombre en la tarjeta**.
## Adición del fragmento
Para cambiar el estilo del texto del marcador de posición, como el tamaño de fuente, el color, la familia de fuentes, etc., podemos agregar un poco de PHP a nuestro sitio.
Si necesitas ayuda para agregar fragmentos a tu sitio, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms").
```
/*
* Actualizar estilos de texto del marcador de posición en el campo de tarjeta de crédito de Stripe
*
* @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
*/
function wpf_dev_stripe_card_field_style( $element_style ) {
$element_style = [
'base' => [
'iconColor' => '#b95d52',
'fontFamily' => 'Roboto, sans-serif',
'fontSize' => '16px',
'fontWeight' => '100',
'backgroundColor' => '#f6f6f6',
'::placeholder' => [
'color' => '#b95d52',
'font-family' => 'Roboto, sans-serif',
'font-size' => '16px',
'font-weight' => '100',
]
],
];
return $element_style;
}
add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );
```
Para obtener una lista completa de todas las propiedades de los objetos, consulta [esta documentación](https://stripe.com/docs/js/appendix/style "Propiedades de estilo del objeto Stripe JS").
Ahora, verás que el estilo del campo de **tarjeta de crédito de Stripe** ha cambiado.
## Estilo del texto del marcador de posición
El fragmento anterior solo estilizará el campo **Número de tarjeta** real; si deseas estilizar el texto del marcador de posición para que coincida, necesitarás agregar algo de CSS.
Si necesitas ayuda para agregar CSS a tu sitio, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo agregar estilos CSS personalizados para WPForms").
```
input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
```
¡Y eso es todo lo que necesitas! ¿Te gustaría también enviar metadatos a Stripe? Echa un vistazo a nuestro artículo sobre [Cómo enviar metadatos a los pagos de Stripe](https://wpforms.com/developers/how-to-send-metadata-to-stripe-payments/ "Cómo enviar metadatos a los pagos de Stripe").
**Categorías:** Tutoriales
**Etiquetas:** CSS, PHP
---