Como Personalizar o Placeholder do Authorize.net

Introdução

Gostaria de personalizar o placeholder do Authorize.net que você vê no campo Número do Cartão de Crédito? Usando CSS, você pode estilizar facilmente não apenas o campo do número, mas também o campo Código de Segurança. Neste tutorial, mostraremos o CSS necessário para estilizar esses dois campos.

Por padrão, o campo onde você insere seu cartão de crédito é estilizado com algumas formatações padrão.

Criando o formulário

Primeiro, começaremos criando um formulário de doação simples e adicionando o campo de Cartão de Crédito do Authorize.net. Se precisar de ajuda sobre como criar este tipo de formulário, consulte esta documentação.

Depois de adicionar o campo do formulário Authorize.net, navegue até as Opções do Campo e clique na aba Avançado. A partir daí, você pode adicionar o texto do seu Placeholder.

Adicionando o CSS

Agora é hora de adicionar o CSS ao seu site.

Se precisar de ajuda para adicionar CSS ao seu site, veja 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;
}

O nome da classe CSS input.wpforms-field-authorize_net-cardnumber estilizará apenas o campo Número do Cartão, enquanto o nome da classe input.wpforms-field-authorize_net-cardcvc estilizará apenas o campo Código de Segurança.

E é tudo o que você precisa para personalizar os campos de placeholder do Authorize.net. Gostaria também de enviar um número de fatura? Dê uma olhada neste artigo sobre Como Enviar um Número de Fatura para Pagamentos do Authorize.net.