Referência de Configurações de Estilo de Formulário
Neste Documento
Tempo de leitura: 4 minutos | Dificuldade: Intermediário
Visão Geral
Este é um guia completo de todas as configurações de estilo de formulário disponíveis no WP Simple Pay. Use-o em conjunto com o guia principal de estilo de formulário para obter instruções detalhadas de configuração.
Pré-requisitos
- WP Simple Pay Pro com uma licença Plus ou superior
- Um formulário de pagamento usando o tipo de formulário no local (Embutido ou Sobreposição)
Predefinições de Tema
| ID do Tema | Nome | Primário | Secundário | Texto | Fundo |
|---|---|---|---|---|---|
padrão |
Padrão | #0f8569 |
#0e7c62 |
#32325d |
#ffffff |
pôr do sol |
Pôr do Sol | #e74c3c |
#c0392b |
#2c3e50 |
#ecf0f1 |
floresta |
Floresta | #27ae60 |
#219955 |
#2c3e50 |
#f9f9f9 |
oceano |
Oceano | #3498db |
#2980b9 |
#2c3e50 |
#ecf0f1 |
monocromático |
Monocromático | #333333 |
#555555 |
#333333 |
#ffffff |
brilho do sol |
Brilho do Sol | #f1c40f |
#f39c12 |
#34495e |
#ffffff |
coral |
Coral | #e67e22 |
#d35400 |
#2c3e50 |
#f9f9f9 |
minimalista |
Minimalista | #bdc3c7 |
#95a5a6 |
#2c3e50 |
#ffffff |
Quando você seleciona um tema, a cor primária é mapeada para o plano de fundo do botão e a cor de destaque, a cor secundária é mapeada para o estado de foco do botão, a cor do texto é mapeada para as cores gerais de texto e rótulo, e a cor de fundo é mapeada para os planos de fundo do formulário e da entrada.
Configurações de Cor
Todas as configurações de cor aceitam:
- Cores Hex:
#0f8569,#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - Valor vazio (herda o padrão ou volta para uma configuração pai)
| Configuração | Descrição | Comportamento de Fallback |
|---|---|---|
| Plano de Fundo do Formulário | Plano de fundo do contêiner do formulário | Transparente (herda o plano de fundo da página) |
| Plano de Fundo da Entrada | Plano de fundo do campo de entrada | Transparente |
| Cor do Texto Geral | Todos os elementos de texto | Padrão do navegador |
| Cor do Texto do Rótulo | Apenas rótulos de campo | Retorna à Cor do Texto Geral |
| Cor do Texto de Entrada | Texto dentro das entradas | Retorna à Cor do Texto Geral |
| Cor do Título | Título do formulário | Retorna à Cor do Texto Geral |
| Cor da Descrição | Descrição do formulário | Retorna à Cor do Texto Geral |
| Cor Primária (Acento) | Estados de foco, realces | Padrão do tema |
| Cor da Borda | Bordas de entrada e elementos | Padrão do tema |
| Cor da Borda de Erro | Bordas de erro de validação | Padrão vermelho |
| Cor do Texto de Erro | Texto da mensagem de erro | Padrão vermelho |
| Fundo do Botão | Fundo do botão de envio | Cor primária |
| Texto do Botão | Texto do botão de envio | Branco |
| Fundo do Botão ao Passar o Mouse | Estado de passagem do mouse sobre o botão Enviar | Primário mais escuro |
Configurações de Tipografia
| Configuração | Descrição | Valores Aceitos | Padrão |
|---|---|---|---|
| Tamanho da Fonte do Rótulo | Tamanho do rótulo do campo | Inteiro positivo (pixels) | 14 |
| Peso da Fonte do Rótulo | Peso do rótulo do campo | normal, bold, 100–900 |
— |
| Tamanho da Fonte de Entrada | Tamanho do texto de entrada | Inteiro positivo (pixels) | 16 |
| Tamanho da Fonte do Título | Tamanho do título do formulário | Inteiro positivo (pixels) | 24 |
| Peso da Fonte do Título | Peso do título do formulário | normal, bold, 100–900 |
— |
| Tamanho da Fonte da Descrição | Tamanho da descrição do formulário | Inteiro positivo (pixels) | 16 |
| Peso da Fonte da Descrição | Peso da descrição do formulário | normal, bold, 100–900 |
— |
Configurações de Design e Layout
| Configuração | Descrição | Valores Aceitos | Padrão |
|---|---|---|---|
| Raio da Borda do Formulário | Arredondamento dos cantos do contêiner do formulário | Inteiro positivo (pixels) | 0 |
| Raio da Borda da Entrada e Botão | Arredondamento dos cantos da entrada/botão | Inteiro positivo (pixels) | 4 |
| Preenchimento do Formulário | Espaçamento interno do contêiner do formulário | Inteiro positivo (pixels) | 0 |
Aplicabilidade
| Tipo de Formulário | Estilos Aplicados? |
|---|---|
| Embutido no local | Sim |
| Sobreposição no local (Modal) | Sim |
| Checkout da Stripe (Fora do local) | Não |
| Página de pagamento (No local) | Sim |
Próximos Passos?
- Estilizando formulários de pagamento com Estilo de Formulário – Guia de configuração passo a passo
- Tipos de Exibição de Método de Pagamento – Escolha entre layouts de Abas e Acordeão
Ainda tem d uevovidas? Estamos aqui para ajudar!
Última Modificação: