Resumen de IA
Introducción
¿Te gustaría cambiar el estilo del texto de marcador de posición del campo de formulario 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 de marcador de posición. En este tutorial, te guiaremos paso a paso.
Por defecto, el campo donde introduces tu tarjeta de crédito tiene un estilo predeterminado.
Ten en cuenta que este fragmento solo se aplicará al campo de formulario Tarjeta de crédito de Stripe cuando se utilice el Modo de campo de tarjeta de crédito de la pestaña Pagos de la configuración de WPForms y se establezca en Elemento de tarjeta.
Para obtener más información sobre esta opción, consulta esta útil guía.
Creación del formulario
Comenzaremos creando un nuevo formulario y añadiendo un campo de Tarjeta de crédito de Stripe al formulario.
Si necesitas ayuda para crear este tipo de formulario, consulta esta documentación.
Una vez que hayas añadido 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 de marcador de posición del nombre en la tarjeta.
Añadir el fragmento
Para cambiar el estilo del texto de marcador de posición, como el tamaño de fuente, el color, la familia de fuentes, etc., podemos añadir un poco de PHP a nuestro sitio.
Si necesitas ayuda para añadir fragmentos a tu sitio, consulta este tutorial.
/*
* Update placeholder text styles on Stripe Credit Card form field
*
* @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.
Ahora verás que el estilo del campo Tarjeta de crédito de Stripe ha cambiado.
Estilo del texto de marcador de posición
El fragmento anterior solo estilizará el campo real del Número de tarjeta; si deseas estilizar el texto del marcador de posición para que coincida, necesitarás añadir algo de CSS.
Si necesitas ayuda para añadir CSS a tu sitio, consulta este tutorial.
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.