Personalizando o estilo dos campos de pagamento

Gostaria de estilizar campos individuais nos seus formulários, sem afetar outros campos do formulário? Com o seletor CSS correto, pode alterar os estilos de qualquer componente do formulário de acordo com as suas necessidades.

Este tutorial fornece uma lista de seletores necessários para estilizar campos de pagamento no WPForms.

Nota: As etapas deste tutorial são avançadas e exigem algum conhecimento de CSS. Se preferir não utilizar qualquer código, pode consultar o nosso guia sobre como estilizar WPForms no editor de blocos.

Usando os snippets de código abaixo

Segue-se uma lista dos selectores CSS necessários para direcionar campos de fantasia específicos com o seu código CSS.

Também incluímos os estilos padrão que o WPForms aplica automaticamente a esses seletores. Para personalizar qualquer parte do seu formulário, pode copiar um snippet CSS deste tutorial para o seu site e depois editá-lo conforme necessário.

Nota: Não tem a certeza de como adicionar CSS ao seu site? Confira o tutorial do WPBeginner sobre como adicionar CSS personalizado ao seu site WordPress.

Campos de pagamento

Nota: Para saber mais sobre como utilizar o código abaixo, consulte o nosso tutorial sobre como personalizar o estilo de campos padrão e outros elementos de formulário.

Campos de pagamento

Item único

Campo de item único

Preenchimento de um único item

.wpforms-form .wpforms-field.wpforms-field-payment-single {
    padding: 10px 0;
    clear: both;
}

Etiqueta de item único

.wpforms-form .wpforms-field.wpforms-field-payment-single .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Vários itens

Preenchimento de vários itens

.wpforms-form .wpforms-field.wpforms-field-payment-multiple {
    padding: 10px 0;
    clear: both;
}

Etiqueta de vários itens

.wpforms-form .wpforms-field.wpforms-field-payment-multiple .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Itens de caixa de seleção

Preenchimento de itens de caixa de seleção

.wpforms-form .wpforms-field.wpforms-field-payment-checkbox {
    padding: 10px 0;
    clear: both;
}

Etiqueta de itens da caixa de verificação

.wpforms-form .wpforms-field.wpforms-field-payment-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Etiquetas de itens de caixa de verificação

.wpforms-form .wpforms-field.wpforms-field-payment-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.wpforms-form .wpforms-field.wpforms-field-payment-select {
    padding: 10px 0;
    clear: both;
}

.wpforms-form .wpforms-field.wpforms-field-payment-select .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Cartão de crédito Stripe

Preenchimento do cartão de crédito Stripe

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card {
    padding: 10px 0;
    clear: both;
}

Etiqueta de cartão de crédito Stripe

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Sub-rótulos de cartão de crédito Stripe

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Caixa de introdução do número do cartão de banda

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-stripe-credit-card-cardnumber {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 8px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Nome da faixa na caixa de introdução do cartão

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card input[type=text] {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Quadrado

Enchimento quadrado

.wpforms-form .wpforms-field.wpforms-field-square {
    padding: 10px 0;
    clear: both;
}

Rótulo quadrado

.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Sub-rótulos quadrados

.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Caixa de introdução dos dados do cartão quadrado

.wpforms-form .wpforms-field.wpforms-field-square .sq-card-component {
    position: relative;
    height: inherit;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 2px;
}

Nome quadrado na caixa de introdução do cartão

.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-square-cardname {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Authorize.Net

Preenchimento do Authorize.Net

.wpforms-form .wpforms-field.wpforms-field-authorize_net {
    padding: 10px 0;
    clear: both;
}

Etiqueta Authorize.Net

.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Sub-rótulos Authorize.Net

.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Caixa de entrada do número do cartão Authorize.Net

.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-cardnumber {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Mês e ano do cartão Authorize.Net

.wpforms-form .wpforms-field.wpforms-field-authorize_net select {
    max-width: 100%;
    text-transform: none;
    white-space: nowrap;
}

Caixa de entrada do código de segurança do Authorize.Net

.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-code .wpforms-field-authorize_net-cardcvc {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Cupão

Preenchimento de cupões

.wpforms-form .wpforms-field.wpforms-field-payment-coupon {
    padding: 10px 0;
    clear: both;
}

Etiqueta de cupão

.wpforms-form .wpforms-field.wpforms-field-payment-coupon .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Caixa de introdução de cupões

.wpforms-form .wpforms-field.wpforms-field-payment-coupon input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Botão Aplicar cupão

.wpforms-form .wpforms-field-payment-coupon-button {
    font-size: var(--wpforms-label-size-sublabel-font-size, 14px);
    font-weight: 500;
    line-height: 100%;
    background-color: var(--wpforms-label-sublabel-color, rgba(0,0,0,0.5));
    box-shadow: none;
    color: var(--wpforms-button-text-color, #fff);
    border: none;
    border-radius: var(--wpforms-button-border-radius, 3px);
    padding: 0 var(--wpforms-button-size-padding-h, 15px);
    white-space: nowrap;
    margin-left: 15px;
    height: var(--wpforms-field-size-input-height);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-in-out;
    text-decoration: none
}
/* Apply button focus and hover styles */
.wpforms-form .wpforms-field-payment-coupon-button:hover,
.wpforms.form .wpforms-field-payment-coupon-button:active,
.wpforms.form .wpforms-field-payment-coupon-button:focus {
    background-color: var(--wpforms-field-text-color, rgba(0,0,0,0.7));
    border: none;
    box-shadow: none;
    color: var(--wpforms-button-text-color, #fff)
}

Total

Acolchoamento total

.wpforms-form .wpforms-field.wpforms-field-payment-total {
    padding: 10px 0;
    clear: both;
}

Rótulo total

.wpforms-form .wpforms-field.wpforms-field-payment-total .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

É isso mesmo! Agora já sabe como utilizar estes selectores para aplicar CSS personalizado aos campos de pagamento nos seus formulários.

Em seguida, gostaria de ter ainda mais opções de personalização? Não deixe de conferir nosso tutorial sobre como personalizar o botão Enviar.