Resumo de IA
Introdução
Gostaria de alterar o estilo do texto de placeholder do campo de formulário Cartão de Crédito Stripe com o WPForms? Usando um pequeno trecho de PHP e também CSS personalizado, pode facilmente alterar o estilo do texto de placeholder. Neste tutorial, vamos guiá-lo através de cada passo.
Por defeito, o campo onde insere o seu cartão de crédito é estilizado com alguns estilos padrão.
Por favor, note que este trecho só será aplicado ao campo de formulário Cartão de Crédito Stripe quando usar o Modo de Campo de Cartão de Crédito nas Definições do WPForms, no separador Pagamentos, estiver definido como Elemento de Cartão.
Para saber mais sobre esta opção, consulte este guia útil.
Criação do formulário
Começaremos por criar um novo formulário e adicionar um campo Cartão de Crédito Stripe ao formulário.
Se precisar de ajuda para criar este tipo de formulário, consulte esta documentação.
Depois de adicionar o campo ao formulário, selecione o campo e clique em Opções do Campo, depois clique no separador Avançadas e coloque algum texto de Placeholder dentro do Texto de Placeholder do Nome no Cartão.
Adição do trecho de código
Para alterar o estilo do texto de placeholder, como tamanho da fonte, cor, família da fonte, etc., podemos simplesmente adicionar um pouco de PHP ao nosso site.
Se precisar de ajuda para adicionar trechos ao seu site, consulte 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 uma lista completa de todas as propriedades do objeto, consulte esta documentação.
Agora, verá que o estilo do campo Cartão de Crédito Stripe foi alterado.
Estilização do texto de placeholder
O trecho acima irá apenas estilizar o campo Número do Cartão, se quiser estilizar o texto de placeholder para corresponder, precisará de adicionar algum CSS.
Se precisar de ajuda para adicionar CSS ao seu site, consulte 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;
}
E é tudo o que precisa! Gostaria também de enviar metadados para o Stripe? Dê uma vista de olhos ao nosso artigo sobre Como Enviar Metadados para Pagamentos Stripe.