Como Estilizar Seus Formulários de Pagamento com Estilo de Formulário

Visão Geral

O WP Simple Pay inclui um recurso integrado de Estilo de Formulário que permite personalizar a aparência dos seus formulários de pagamento no site — sem necessidade de CSS personalizado. Escolha entre 8 presets de tema pré-desenhados ou ajuste cores individuais, tipografia e configurações de layout para combinar com sua marca.

As configurações de Estilo de Formulário são configuradas por formulário, então você pode estilizar cada formulário de pagamento de forma independente.

Observação: Os estilos de formulário aplicam-se apenas a formulários de pagamento no site (tipos de exibição Embutido e Overlay). Se o seu formulário usar Stripe Checkout (fora do site), essas configurações não terão efeito. Para usar estilos de formulário, alterne o tipo do seu formulário para “Formulário de pagamento no site” na aba de configurações Geral.

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)

Acessando a Aba Estilo do Formulário

1. Navegue até WP Simple Pay > Formulários de Pagamento no seu admin do WordPress.
2. Clique em um formulário existente para editá-lo ou crie um novo formulário.
3. Clique na aba Estilo do Formulário no editor de formulário.

A aba Estilo do Formulário contém quatro sub-abas: Temas, Cores, Tipografia e Design e Layout.

Escolhendo um Preset de Tema

Os presets de tema aplicam instantaneamente um conjunto completo e coordenado de estilos ao seu formulário. Após aplicar um tema, você pode personalizar ainda mais as configurações individuais nas outras abas.

1. Na aba Estilo do Formulário, selecione a sub-aba Temas (selecionada por padrão).
2. Navegue pelos temas disponíveis. Cada cartão de tema mostra uma prévia da paleta de cores e uma prévia mini do formulário.
3. Clique em um cartão de tema para selecioná-lo.
4. Clique em Publicar ou Atualizar para salvar.

Os seguintes temas estão disponíveis:

Tema	Descrição	Cor Primária
Padrão	Estilo padrão do WP Simple Pay	Teal
Pôr do Sol	Acentos vermelhos quentes com fundo claro	Vermelho
Floresta	Tema verde fresco com fundo limpo	Verde
Oceano	Paleta azul calmante	Azul
Monocromático	Tema simples em preto e branco	Preto
Sunshine	Acentos amarelos brilhantes e alegres	Amarelo
Coral	Paleta de laranja quente	Laranja
Minimalista	Design limpo e minimalista	Cinza

Importante: Selecionar um tema atualiza todas as configurações de cor e estilo para os valores do tema. Quaisquer alterações personalizadas que você fez em configurações individuais serão substituídas.

Personalizando Cores

Clique na sub-aba Cores para ajustar as configurações individuais de cor. As cores são organizadas em seções.

Cores de Fundo

• Fundo do Formulário — Cor de fundo de todo o contêiner do formulário.
• Fundo da Entrada — Cor de fundo dos campos de entrada, selects e dropdowns.

Cores do Texto

• Cor Geral do Texto — Cor padrão para todos os elementos de texto no formulário.
• Cor do Texto do Rótulo — Cor para os rótulos dos campos. Substitui a cor geral do texto apenas para os rótulos.
• Cor do Texto da Entrada — Cor para o texto dentro dos campos de entrada. Substitui a cor geral do texto apenas para as entradas.

Cores do Título e Descrição

• Cor do Título — Cor para o título do formulário. Usa a cor geral do texto como fallback se não estiver definida.
• Cor da Descrição — Cor para a descrição do formulário. Usa a cor geral do texto como fallback se não estiver definida.

Cores de Acento e Borda

• Cor Primária (Acento) — Usada para estados de foco, realces e outros elementos de acento.
• Cor da Borda — Cor da borda para campos de entrada e outros elementos com borda.

Cores de Estado de Erro

• Cor da Borda de Erro — Cor da borda aplicada a campos com erros de validação.
• Cor do Texto de Erro — Cor do texto para mensagens de erro.

Cores dos Botões

• Fundo do Botão — Cor de fundo do botão de envio.
• Texto do Botão — Cor do texto do botão de envio.
• Fundo ao Passar o Mouse no Botão — Cor de fundo ao passar o mouse sobre o botão de envio.

Todos os campos de cor suportam cores hexadecimais (ex: #0f8569) e cores rgba com transparência (ex: rgba(15, 133, 105, 0.8)). Clique na amostra de cor ao lado de qualquer campo para abrir o seletor de cores.

Personalizando a Tipografia

Clique na sub-aba Tipografia para ajustar tamanhos e pesos de fonte.

Tipografia do Rótulo

• Tamanho da Fonte do Rótulo — Tamanho dos rótulos dos campos em pixels. Padrão: 14px.
• Peso da Fonte do Rótulo — Peso dos rótulos dos campos. Opções: Normal, Negrito ou valores numéricos (100–900).

Tipografia da Entrada

• Tamanho da Fonte da Entrada — Tamanho do texto dentro dos campos de entrada em pixels. Padrão: 16px.

Tipografia do Título e Descrição

• Tamanho da Fonte do Título — Tamanho do título do formulário em pixels. Padrão: 24px.
• Peso da Fonte do Título — Peso do título do formulário. Opções: Normal, Negrito ou valores numéricos (100–900).
• Tamanho da Fonte da Descrição — Tamanho da descrição do formulário em pixels. Padrão: 16px.
• Peso da Fonte da Descrição — Peso da descrição do formulário. Opções: Normal, Negrito ou valores numéricos (100–900).

Personalizando o Design e Layout

Clique na sub-aba Design e Layout para ajustar as configurações de espaçamento e raio da borda.

Raio da Borda

• Raio da Borda do Formulário — Controla o quão arredondados são os cantos do contêiner do formulário, em pixels. Defina como 0 para cantos quadrados.
• Raio da Borda da Entrada e Botão — Controla o quão arredondados são os cantos dos campos de entrada e botões, em pixels.

Uma prévia ao vivo ao lado de cada configuração mostra o efeito do valor atual.

Espaçamento

• Preenchimento do Formulário — Controla o espaçamento interno (preenchimento) do contêiner do formulário, em pixels.

Redefinindo Estilos para o Padrão

Para redefinir todas as configurações de estilo para seus valores padrão:

1. Na aba Estilo do Formulário, role até o final de qualquer sub-aba.
2. Clique no botão Redefinir Estilos.
3. Confirme a redefinição quando solicitado.
4. Clique em Publicar ou Atualizar para salvar o formulário.

Isso redefine todas as configurações de cor, tipografia e layout. Não altera o tema selecionado.

Perguntas Frequentes

Por que não vejo a guia Estilo do Formulário?

A guia Estilo do Formulário requer uma licença Plus ou superior. Se você tiver uma licença Personal, verá um aviso de upgrade em vez disso.

Por que há um aviso sobre formulários externos?

Os estilos de formulário se aplicam apenas a formulários de pagamento no site. Se o seu formulário estiver configurado para usar o Stripe Checkout (externo), as configurações de Estilo do Formulário não terão efeito. Altere o tipo de formulário para “Formulário de pagamento no site” na guia Geral do editor de formulários.

Posso usar estilos diferentes para cada formulário?

Sim. As configurações de Estilo do Formulário são salvas por formulário, portanto, cada formulário de pagamento pode ter sua própria estilização exclusiva.

Os estilos de formulário funcionam com formulários de sobreposição (modal)?

Sim. Os estilos de formulário se aplicam a formulários incorporados e a formulários de sobreposição/modal. Para formulários de sobreposição, a cor de fundo do formulário controla o fundo da área de conteúdo modal.

Ainda posso usar CSS personalizado junto com o Estilo do Formulário?

Sim. O CSS personalizado será aplicado sobre as configurações de Estilo do Formulário.

Os estilos de formulário afetam a visualização do bloco Gutenberg?

Sim. Ao inserir um formulário de pagamento usando o bloco WP Simple Pay no editor de blocos, a visualização do bloco reflete as configurações de estilo atuais do formulário.

O que acontece se eu deixar um campo de cor em branco?

Campos vazios herdam padrões sensatos. Por exemplo, as cores do texto de rótulo e de entrada voltam para a cor de texto geral. As cores dos botões voltam para a cor primária do tema.

Próximos Passos?

• Referência de Configurações de Estilo do Formulário – Referência completa de cada configuração e seu valor padrão
• Tipos de Exibição de Método de Pagamento – Escolha entre layouts de Abas e Acordeão