Cómo personalizar el marcador de posición de Authorize.net

Introducción

¿Te gustaría personalizar el marcador de posición de Authorize.net que ves en el campo Número de tarjeta de crédito? Usando CSS puedes estilizar fácilmente no solo el campo del número, sino también el campo Código de seguridad. En este tutorial, te mostraremos el CSS necesario para estilizar estos dos campos.

Por defecto, el campo donde introduces tu tarjeta de crédito tiene un estilo predeterminado.

Creación del formulario

Primero, comenzaremos creando un formulario de donación simple y añadiendo el campo de tarjeta de crédito de Authorize.net. Si necesitas ayuda sobre cómo crear este tipo de formulario, por favor consulta esta documentación.

Una vez que hayas añadido el campo del formulario de Authorize.net, navega a las Opciones del campo y haz clic en la pestaña Avanzado. Desde allí, puedes añadir tu texto de Marcador de posición.

Añadir el CSS

Ahora es el momento de añadir el CSS a tu sitio.

Si necesitas ayuda para añadir CSS a tu sitio, por favor consulta este tutorial.

input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Chrome/Opera/Safari */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 19+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* IE 10+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 18- */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}

El nombre de la clase CSS input.wpforms-field-authorize_net-cardnumber estilizará solo el campo Número de tarjeta, mientras que el nombre de la clase input.wpforms-field-authorize_net-cardcvc solo estilizará el campo Código de seguridad.

Y eso es todo lo que necesitas para personalizar los campos de marcador de posición de Authorize.net. ¿Te gustaría también enviar un número de factura? Echa un vistazo a este artículo sobre Cómo enviar un número de factura a los pagos de Authorize.net.