Resumo de IA
Você quer mudar a aparência dos botões dos seus formulários?
O WPForms permite personalizar estilos de botões usando controles de estilo integrados no editor de blocos ou via CSS.
Personalize os Estilos dos Botões do Formulário Agora!
Neste artigo, mostraremos como personalizar estilos de botões usando ambos os métodos. Veja qual funciona para você!
Neste Artigo
Como Personalizar Estilos de Botões no WPForms com CSS
Antes de começarmos, você precisará instalar e ativar o plugin WPForms em seu site. Além disso, você precisará criar pelo menos um formulário. Veja nosso tutorial sobre como criar um formulário de contato simples como exemplo para começar.
Opção 1: Fazendo Personalização em Todo o Site (CSS)
Personalizar os estilos dos botões do seu formulário é bem fácil depois que você tem o código CSS que deseja usar. Se quiser, você pode simplesmente copiar e colar um dos exemplos abaixo ou até mesmo combiná-los.
O trecho de código deve ser colado na sua seção CSS Adicional no painel Personalizar. Isso pode ser feito navegando para Aparência » Personalizar » CSS Adicional. Em seguida, basta clicar em Salvar & Publicar, e pronto.
Um método ainda mais fácil é usar um plugin como o WPCode, que permite adicionar diferentes tipos de trechos de código ao seu site. Neste caso, você só precisará colar o código CSS para o estilo do botão clicando no botão Usar Trecho.
Agora vamos dar uma olhada em algumas maneiras diferentes de estilizar os botões do seu formulário com CSS.
Como Criar um Botão com Fundo Transparente
Você quer criar um fundo transparente para o botão do seu WPForms? Botões com fundo transparente, também conhecidos como botões fantasma, são uma tendência popular de design web.
Geralmente é usado em formulários e chamadas para ação colocados sobre imagens de fundo amplas. Dê uma olhada em alguns exemplos de botões transparentes em diferentes sites.
Exemplo nº 1: Botão de Formulário Transparente
Exemplo nº 2: Botão de Chamada para Ação Transparente
Para criar um botão com fundo transparente, tudo o que você precisa fazer é copiar o trecho de código abaixo na sua seção CSS Adicional .
div.wpforms-container-full .wpforms-form button[type=submit] {
color: #0099CC; /* Text color */
background-color: transparent; /* Remove background color */
border: 2px solid #0099CC; /* Border thickness, line style, and color */
border-radius: 5px; /* Adds curve to border corners */
text-transform: uppercase; /* Make letters uppercase */
}
Veja como o botão ficará:
Como Criar um Botão com Gradiente de Cor
Ao contrário dos botões fantasma, usar um botão com gradiente não é uma tendência nova. No entanto, se esses botões com estilo de gradiente multicolorido se adequam melhor ao seu site, você pode seguir este tutorial.
Como é feito com CSS, você pode facilmente aumentá-lo ou diminuí-lo sem perder resolução. Se você está procurando uma ferramenta para criar CSS para gradientes, pode usar o editor de gradientes da ColorZilla.
No CSS abaixo, usamos estilos específicos do navegador para garantir que o gradiente apareça no maior número possível de navegadores diferentes.
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
background: #0099cc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */
}
Veja como o botão ficará:
Como Criar um Botão com Cantos Arredondados
Você quer chamar a atenção dos usuários para as chamadas para ação? De acordo com algumas pesquisas, cantos arredondados melhoram o processamento de informações e atraem nossos olhos para o centro do elemento.
Se você está procurando atrair a atenção dos usuários, pode querer testar suas taxas de conversão de formulário criando um botão com cantos arredondados para o seu formulário WordPress.
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #0099CC; /* Blue background color */
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
}
Veja como o botão ficará:
Como Substituir Seu Botão Por Uma Imagem
Usar um botão gráfico é provavelmente a maneira mais fácil de personalizar o botão do seu formulário.
Você pode encontrar facilmente vários botões gráficos para baixar e usar em sites de fotos de banco de imagens. Em seguida, você pode substituir o botão do seu formulário por um botão gráfico.
Certifique-se de fazer o upload do gráfico do botão para o uploader de mídia indo em Mídia » Adicionar Novo. Em seguida, substitua o URL abaixo pelo URL da sua imagem:
http://yoursite.com/your-image.jpg
div.wpforms-container-full .wpforms-form button[type=submit] {
background-image: url(http://yoursite.com/your-image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: transparent; /* Hide the 'submit' text */
border: none; /* Remove the border */
}
Como Criar um Botão de Múltiplas Linhas
Antes de enviar seu formulário, seus usuários terão várias perguntas em mente. Para aumentar as conversões, você pode responder a essas perguntas com o texto apropriado dentro ou ao redor do seu botão.
Ao criar um botão para seu formulário, olhe para ele através dos olhos de seus visitantes. Isso o ajudará a escrever o texto apropriado para o seu botão voltado para a conversão.
Na maioria dos casos, para incluir todos esses detalhes em seu botão, você terá que criar um botão de múltiplas linhas. Veja como criar um botão de formulário de múltiplas linhas no WPForms.
div.wpforms-container-full .wpforms-form button[type=submit]:after {
content: 'Second line text'; /* Text for second line of button */
display: block; /* Puts this text on its own line */
font-size: 10px;
margin-top: 5px; /* Add distance from first line of text */
font-weight: normal; /* Remove bold style */
}
Veja como o botão ficará:
Opção 2: Personalizando um Estilo de Botão Individualmente
E se você quiser que seu novo estilo seja usado apenas em um único formulário WPForms, mas não em todos os formulários do seu site?
Se você preferir alterar o estilo do botão de um botão de formulário individual usando CSS, você precisa encontrar o ID exclusivo do seu formulário.
Primeiro, abra uma página que contenha o formulário que você deseja modificar. Mova o mouse para qualquer campo no formulário, clique com o botão direito » Inspecionar Elemento.
A tela do navegador será dividida e você verá o código-fonte da página. No código-fonte, você precisa localizar a linha inicial do código do formulário.
Como você pode ver na captura de tela acima, o código do nosso formulário de contato começa com a linha:
div class="wpforms-container wpforms-container-full" id="wpforms-14"
Usaremos este ID em nosso CSS para estilizar nosso formulário de contato. Substituiremos .wpforms em nosso primeiro trecho de CSS por #wpforms-14.
O atributo id é um identificador exclusivo gerado pelo WPForms para este formulário em particular, portanto, o estilo não será aplicado em nenhum outro lugar.
Por exemplo, você pode simplesmente inserir o seguinte trecho no início do primeiro trecho de código.
div#wpforms-14 {background-color: transparent; !important}
Para um método mais direto de localizar o ID do seu formulário, basta ir em Todos os Formulários e localizar a coluna Shortcode. Você encontrará o ID do formulário aqui rapidamente.
Personalize os Estilos dos Botões do Formulário Agora!
Como Personalizar Estilos de Botões Sem CSS
Antes de adicionar CSS, considere se os controles de estilo integrados no WPForms o ajudarão a obter o estilo de botão desejado com mais facilidade.
Este post sobre como estilizar formulários de contato no WordPress explica mais sobre as opções de estilo de formulário sem código do WPForms dentro do editor de blocos do WordPress.
O processo é simples. Abra um formulário e, no editor de blocos, clique no formulário para abrir opções de estilo adicionais para o bloco WPForms.
Opções de Estilo para o Bloco WPForms
Você pode alterar o tema de cores, campos do formulário, rótulos, botões e os estilos de contêiner e plano de fundo sem escrever nenhum CSS nas configurações do bloco WPForms.
Acesse as Configurações de Estilo de Botão
Em Estilos de Botão, você pode alterar o tamanho, cor, borda, espessura da borda, raio da borda e estilo da borda dos seus botões. Aqui estão as opções que você pode escolher.
- Tamanho: Esta opção informa o tamanho do botão. Você pode escolher entre Pequeno, Médio e Grande.
- Borda: Com esta configuração, você pode dar aos seus botões uma borda sólida, tracejada ou pontilhada.
- Espessura da Borda: Isso informa aos seus botões a espessura de suas bordas. Você pode escolher uma unidade diferente se pixels (px) não forem o que você precisa para o seu design.
- Raio da Borda: Você pode alterar o quão arredondados os cantos dos seus botões são para torná-los mais suaves ou mais nítidos. Embora pixels (px) sejam a unidade padrão, você pode alterá-la para atender às suas necessidades de design.
Você também pode alterar as cores de fundo e de texto do seu botão no painel Cores abaixo.
Personalize os Estilos dos Botões do Formulário Agora!
Perguntas frequentes sobre personalização de estilos de botão com CSS
A personalização de estilos de botão é um tópico de interesse popular entre nossos leitores. Aqui estão as respostas para algumas perguntas comuns sobre isso:
Como alterar a estilização de um botão em CSS?
Para alterar a aparência de um botão usando CSS, você pode especificar estilos personalizados para propriedades como cor de fundo, borda, tamanho da fonte, preenchimento e muito mais. No WordPress, você pode colar seus estilos CSS em CSS Adicional no Personalizador.
Como posso criar um formulário com botões personalizados?
Para criar um formulário com botões personalizados, considere usar um plugin do WordPress como o WPForms. Ele oferece ferramentas de arrastar e soltar para facilitar a criação de formulários.
Para estilos de botão personalizados, vá para a seção CSS Adicional no WordPress e insira seu código CSS, direcionando os nomes de classe específicos do formulário ou botão que o WPForms fornece.
Como personalizo meu botão de envio?
Para personalizar seu botão de envio no WPForms, edite o formulário, selecione o “Botão de Envio” e modifique diretamente o rótulo do texto. Use o Editor de Blocos ou CSS Adicional para ajustar ainda mais os estilos do botão com cores, fontes e tamanhos personalizados.
Em seguida, confira como personalizar sua página de login no WordPress
Agora que você sabe como estilizar formulários de contato com CSS, talvez queira dar uma olhada em como criar uma página de login personalizada para o seu site. Também temos algumas compilações de plugins para ajudá-lo a escolher os melhores plugins à medida que seu site cresce:
- Melhores Plugins de SEO
- Melhores Plugins de Mídias Sociais
- Melhores Plugins de Backup
- Melhores Plugins de Log de E-mail
- Melhores Plugins do TikTok
- Melhores Plugins SMTP
Crie Seu Formulário WordPress Agora
Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
Como posso adicionar uma função de quantidade a um formulário WP básico.
Tenho vários itens de loja que podem ser selecionados usando uma caixa de seleção. Preciso ser capaz de permitir que alguém escolha quantidades de cada item e, em seguida, possa enviá-lo por e-mail.
Item e custo estão todos em um campo. Eu só preciso ser capaz de adicionar um botão +/- ao lado de cada item.
Alguma ideia de como posso fazer isso facilmente?
Obrigado
Olá Paul,
Ainda não temos a capacidade de incluir quantidades de itens dessa forma, embora esteja em nosso radar para adicionar no futuro!
Se você estiver disposto a considerar uma alternativa modificada, pode usar o campo Itens do menu suspenso para fazer o que você está pedindo de uma maneira ligeiramente diferente — a demonstração mais fácil disso é assistir ao vídeo curto aqui: https://cl.ly/3Y2f3o3q1C0M. Basicamente, você cria um campo Itens do menu suspenso para cada produto e preenche as opções do menu suspenso com várias quantidades e preços associados. Isso permite que você ofereça vários produtos e várias quantidades de cada um desses produtos.
Sinto muito que não possamos oferecer exatamente o que você procura, mas espero que isso ajude!
Se você tiver mais alguma dúvida sobre isso, sinta-se à vontade para entrar em contato conosco no suporte 🙂
Todos esses são ótimos exemplos. Mas como você desativa a sombra ao passar o mouse? Eu só quero um botão que seja puro texto em negrito e maiúsculas que diga "ENVIAR". O texto deve mudar para cinza ao passar o mouse e ao ser ativado. Sem borda, fundo, sombra...
Olá Gary,
Nosso botão de envio não inclui nenhuma sombra por padrão, então, se você estiver vendo uma, ela provavelmente está sendo adicionada pelo seu tema. Como todos os temas fazem isso de maneiras um pouco diferentes, precisaríamos ver um formulário incorporado para ajudar a removê-la.
Para remover todos esses outros estilos, você precisará de algumas linhas extras de CSS. Temos um tutorial aqui especificamente sobre como personalizar o botão de envio, incluindo estilos de passagem de mouse. Os exemplos mostrados lá devem guiá-lo por tudo o que você precisa para criar o visual personalizado que você está descrevendo.
Espero que isso ajude! Se você tiver alguma dúvida, por favor, nos avise! Apoiamos todas as licenças pagas em nosso canal de suporte privado e WPForms Lite em nosso fórum 🙂
Tentei copiar e colar o código para o estilo de botão transparente no meu Tema Filho Genesis e não teve nenhum efeito na alteração da aparência dos botões. Por que você acha que isso acontece?
Segui as instruções – Aparência>Personalizar>CSS Adicional>Salvar.
Obrigado!
Olá Toni,
Essa é uma ótima pergunta, e a resposta pode variar muito de site para site (mesmo dentro do mesmo tema). Eu sugiro começar com nosso tutorial Como Solucionar Problemas de CSS Que Não Funciona, que aborda todos os problemas mais comuns e como resolvê-los.
Se você tentar isso e ainda estiver com problemas, sinta-se à vontade para entrar em contato conosco no suporte para que possamos ajudá-lo a solucionar mais problemas 🙂
Não consigo descobrir por que isso não funciona. Inseri o código na seção CSS Personalizável, mas o botão permaneceu o mesmo.
Quero torná-lo transparente como o primeiro exemplo transparente que você tem acima, mas simplesmente não registra.
Também espero mover o formulário real mais para baixo na página, mas isso também não parece estar funcionando.
Oi Jeremy,
Desculpe pelo transtorno! Alguns temas tornam mais difícil aplicar CSS personalizado, embora geralmente adicionar
!importantajude. Aqui está um exemplo simples para demonstrar como adicionar isso:div.wpforms-container-full .wpforms-form button[type=submit] { background-color: transparent !important; }Temos muitas outras dicas sobre como fazer o CSS funcionar em este tutorial de solução de problemas de CSS.
Se você tentar estas ideias de solução de problemas e ainda estiver vendo problemas, por favor, nos avise! Fornecemos suporte para nossos usuários com licença paga aqui e para nossos usuários Lite aqui.
Espero que isso ajude! 🙂
Só queria agradecer por criar este post… Ótimo trabalho, isso me ajudou muito!
Nancy,
Fico muito feliz em ver que você achou o post útil 🙂
Olá,
Como posso mudar a altura do botão de envio. Sua altura é maior que a de outros botões no WordPress e não sei qual CSS usar.
Obrigado desde já.
Olá Lewis,
A maneira mais fácil de personalizar a altura do botão de envio é ajustando seu preenchimento (a distância entre o texto do botão e a borda). Aqui está o CSS que você precisaria para fazer isso:
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] { padding-top: 10px; padding-bottom: 10px; }Estes estão atualmente definidos como os valores padrão (10 pixels em cima e embaixo), mas você pode alterá-los para quaisquer números que desejar. Para manter o texto centralizado verticalmente, certifique-se de manter o preenchimento superior e inferior com o mesmo valor.
E caso ajude, você pode encontrar nosso tutorial completo sobre personalização do botão de envio aqui.
Espero que isso ajude! :)
Olá,
Como posso mudar o tamanho das caixas de seleção para torná-las menores?
Obrigado desde já.
Olá Lewis,
Peço desculpas, no entanto, as caixas de seleção são geradas pelo navegador e, portanto, não podemos personalizar seu tamanho. Embora alguns temas forneçam modificações extensas de código para estilizar caixas de seleção de maneiras personalizadas, estas tendem a causar problemas (conflitos em alguns navegadores, às vezes até quebram algumas funcionalidades, etc.), razão pela qual geralmente é evitado.
Olá @ JESS, observei que você é a estrela aqui, estou tendo um problema com meu botão de envio, assim que você passa o mouse sobre o botão de envio, a cor de hover se espalha além do botão de envio e isso é muito feio e não profissional, como resolvo isso. Suspeito que esteja pegando a cor do meu tema, mas não sei como desativá-la. Aqui está o link para melhor entendimento. Apenas passe o mouse sobre o botão de envio e veja o efeito feio. [URL removido]
Olá Emmanuel,
Ficaremos felizes em ajudar! Quando tiver um tempo, entre em contato conosco no suporte para que possamos ajudar.
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte.
Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Há planos para criar um pacote de add-on com alguns estilos diferentes de botões de envio?
Olá Alex — Atualmente não temos planos para isso, mas anotei a ideia em nossa lista de solicitações de recursos. Obrigado pela sugestão! 🙂
Olá,
Só queria saber como podemos adicionar isso a todos os campos do formulário? Tenho meu formulário sobre uma imagem e gostaria de uma borda branca em volta de uma fonte branca com fundo transparente. Obrigado
Oi Jennifer,
Claro, os exemplos acima são especificamente para botões, mas também temos tutoriais para ajudar você a estilizar seus formulários em geral! Eu sugiro começar com nosso guia para iniciantes (que cobre como adicionar uma borda, etc.). Então, se você quiser um pouco de inspiração extra, pode conferir nossas ideias de estilo adicionais (CSS incluído).
Espero que isso ajude! :)
Olá
É possível ocultar o botão de envio? Tentei diferentes CSS, mas não consigo fazer funcionar. Quero usar o formulário apenas para informações, então não preciso do botão.
Obrigado
Oi Nicole,
Ficaríamos felizes em ajudar! Para fazer isso, só precisamos que você entre em contato com o URL do seu formulário (isso nos permitirá criar um trecho de CSS para você).
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte.
Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Olá, obrigado pelo artigo. Gostaria de mudar a posição do botão de envio para o lado direito. O padrão é no lado esquerdo. Não consigo encontrar nenhuma descrição de CSS sobre como fazer isso. Você poderia me ajudar?
Obrigado.
Efkan
Oi Efkan,
Você pode reposicionar o botão de envio para a direita usando o seguinte código CSS:
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: right !important; }Caso ajude, aqui está um ótimo tutorial do WPBeginner sobre como adicionar CSS personalizado como este ao seu site. :)
Olá!
Obrigado por todas essas informações úteis. Ainda tenho uma pergunta, no entanto.
Eu mudei com sucesso a cor de fundo do botão de envio, e também adicionei com sucesso uma cor separada ao passar o mouse – e ao focar, para que a cor do botão mude quando os usuários a acessam por tabulação.
O que não consigo resolver é como manter a cor de passagem do mouse no lugar depois que o botão é clicado e está ativamente enviando. Assim que um usuário move o cursor para longe do botão, a cor de passagem do mouse volta à cor original, o que pode fazer parecer que o botão não foi clicado (mesmo que o texto diga "enviando...").
Isso é um problema do seletor :active que estou perdendo, ou há algo mais que estou perdendo?
Agradeço qualquer orientação que você possa oferecer.
Oi Joe,
Podemos precisar dar uma olhada no código em si, então quando tiver um tempo, entre em contato com nossa equipe de suporte e nós investigaremos mais a fundo e o guiaremos. :)
Estou interessado em mudar a cor de fundo das mensagens de validação. Alguma recomendação?
Oi Janine,
Você pode usar o seguinte trecho de código para alterar a cor de fundo:
div.wpforms-container-full .wpforms-form label.wpforms-error { background-color: #FFFFFF !important; }E caso ajude, aqui está um ótimo tutorial do WPBeginner sobre como adicionar CSS personalizado como este ao seu site.
Espero que isso ajude! :)
Obrigada, Daisy
Eu tentei esse código para mudar a cor de fundo da mensagem de validação e não mudou nada. Continua apresentando na cor verde clara com que veio originalmente.
Alguma sugestão?
Oi Janine,
Se você tem um plugin de cache instalado no seu site (ou se seu host faz cache), você vai querer limpar/esvaziar isso primeiro e tentar o código novamente. Se o problema ainda continuar e você tiver uma licença paga, entre em contato com nossa equipe de suporte e eles darão uma olhada. :)
Olá Daisy,
Estou apenas acompanhando minha consulta sobre 5 posts acima. Conforme instruído, enviei minha consulta para a equipe de suporte há cerca de três semanas e não ouvi nada.
Eu encontrei uma espécie de solução alternativa, mas ainda estou interessado em saber se é possível mudar a cor do botão de envio - e mantê-la alterada - quando os formulários estão sendo enviados.
Obrigado pela ajuda.
Oi Joe,
Peço desculpas pela confusão – parece que um dos membros da nossa equipe de suporte respondeu ao seu e-mail em 25 de março, mas não temos certeza se você o recebeu (pode ter sido filtrado como spam/lixo eletrônico, então vale a pena verificar lá, apenas por precaução).
Para resumir a resposta deles, no entanto, infelizmente não temos como realizar o que você está tentando fazer. O problema é que o texto "Enviando" é exibido por JavaScript e não altera o CSS do botão — e, portanto, não há nada bom para, em certo sentido, "agarrar" em termos de CSS personalizado. Pode ser possível alcançar isso usando algum JavaScript/jQuery criativo, mas não podemos oferecer suporte para esse nível de personalização. Peço desculpas pelo inconveniente!
Olá, como posso fazer o botão Enviar ficar na mesma linha das caixas de texto Nome e E-mail.
Eu fiz as caixas de texto Nome e E-mail ficarem na mesma linha usando a opção de layout.
Olá Mike,
Eu definitivamente recomendo conferir nosso guia que mostra como exibir seu formulário em uma única linha.
Espero que isso ajude! :)
Olá! Como faço para que meu botão de envio tenha apenas uma linha de texto?
Agora o botão está enorme por causa de duas linhas de texto...
O formulário de contato é feito com inline como um formulário de uma linha.
Olá Thomas!
Claro, você pode tentar personalizar o botão de envio com CSS personalizado. Temos um ótimo tutorial sobre como fazer isso aqui.
Espero que ajude!
Tenha um bom dia 🙂
Olá!
O que acontece quando queremos que o botão de Envio do Wpforms tenha a mesma aparência dos outros botões do tema?
Pensei que bastaria colar a classe CSS do botão principal do tema no campo “Classe CSS do botão de envio” do construtor de formulários.
No entanto, o botão não muda de aparência... Devemos inserir o nome da classe de alguma forma especial?
Olá Juanma.
Peço desculpas por qualquer confusão!
Você pode conseguir isso com CSS personalizado. Por favor, confira este artigo em nosso site para mais detalhes.
Espero que ajude!
Tenha um bom dia 🙂
Olá equipe de suporte!
Que código CSS devo usar para alterar a localização do botão? Por exemplo, gostaria de mover o botão de Envio para o centro do formulário e mais para baixo.
Obrigado!
Olá Jacqueline.
Observe que código personalizado está fora do nosso escopo de suporte, não podemos ajudar com personalizações ou implementação de código personalizado.
No entanto, verifiquei em nosso sistema e vejo que temos uma sugestão para conseguir o que você procura:
div.wpforms-container-full .wpforms-form .wpforms-submit-container {text-align: center !important;
}
Espero que ajude.
Tenha um bom dia 🙂
Olá! Como faço para mudar a cor de fundo do botão para a cor que o botão tem enquanto está “enviando” após o envio ser pressionado? Obrigado!! (^_^)y
Olá Kate — Teríamos prazer em ajudar! Quando tiver um tempo, por favor, entre em contato conosco pelo suporte para que possamos ajudar.
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um ticket de suporte. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como posso mudar a cor de fundo do hover?
Olá Francesco - Ótima pergunta!
A maneira mais fácil de personalizar o fundo do botão de envio ao passar o mouse é adicionando o código CSS conforme mostrado aqui no tutorial
Espero que isso ajude!
Obrigado e tenha um bom dia 🙂
Talvez simples, mas não encontrei:
Por favor, como fazer o botão "Enviar" ter a função de redirecionar (link) para outra página? Então não enviar, mas redirecionar?
Olá Roman – Boa pergunta!
Sim, você pode redirecionar para outra página navegando em Construtor de Formulários > Configurações > Confirmação > selecione o 'Tipo de Confirmação' como 'Ir para URL (Redirecionar)' > e adicione a URL de redirecionamento de confirmação. Aqui está um ótimo guia sobre isso.
Espero que isso ajude! Obrigado e tenha um ótimo dia 🙂
Por favor, ajude. Tentei mudar o botão de envio para ter um raio de 5px. Não sei se estou inserindo o código CSS errado?
Obrigado!
Olá Jillian – Teremos prazer em ajudar 🙂
Caso ajude, aqui está um ótimo tutorial da WPBeginner sobre como adicionar CSS personalizado como este ao seu site.
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, então, por favor, envie um ticket de suporte. Dessa forma, poderemos discutir mais detalhes e investigar isso mais a fundo.
Obrigado 🙂
Olá,
Aqui está o link do meu site onde coloquei o WPForms.
[URL Removido]
Quero que os botões "Próximo, Anterior, Enviar etc." tenham o mesmo estilo dos botões do meu tema.
Por favor, ajude
Olá Abubakar - Obrigado por entrar em contato 🙂
Você pode personalizar os botões de envio em seu site consultando este artigo. Além disso, temos um ótimo guia sobre como personalizar campos individuais do formulário.
Se precisar de ajuda, não hesite em contatar nossa equipe de suporte.
Obrigado e tenha um bom dia 🙂
Olá! Ótimo artigo!
Como adiciono um ícone ao passar o mouse sobre o botão de envio? Eu procurei literalmente em todos os lugares por esse código e não consigo encontrá-lo.
Obrigado!
Olá JP - Obrigado por entrar em contato!
Para fazer o que você mencionou, você pode considerar usar o FontAwesome, e uma maneira de adicionar o Font Awesome ao seu site é usar o plugin ‘Better Font Awesome’
Quando você tiver adicionado o Font Awesome ao seu site, precisaremos de algum CSS personalizado para adicionar um ícone ao botão de Envio, que incluí aqui
Este trecho com o código ‘\f1d8’ exibirá um ícone de avião de papel, e você pode substituí-lo pelo código do seu ícone preferido acessando a galeria do Font Awesome
Espero que ajude! 🙂
Olá. Usando a versão Lite. Quando passo o mouse, o botão se move ligeiramente e parece ter um contorno branco. O CSS que estou usando:
.wpforms-form button[type=submit] { border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #024488 !important; color: #fff !important; } .wpforms-form button[type=submit]:hover { background-color: #d62598 !important; }
Como removo o foco do hover ou o movimento do botão? Obrigado
Olá Kas - O código CSS parece bom para mim. Suspeito que isso seja um conflito de estilo do tema que está causando o comportamento estranho com o estilo de hover.
Nesse caso, entre em contato com nosso suporte gratuito no fórum de suporte WPForms Lite do WordPress.org.
Obrigado 🙂
Olá,
Estou procurando ajuda sobre como centralizar meu botão de envio em meus formulários. Não vi nenhuma maneira de fazer isso, e o alinhamento central CSS normal não está funcionando.
Como resolvo isso? Obrigado!
Olá Seth - Por favor, use este código CSS para centralizar o botão de envio.
Espero que ajude! 🙂
Olá
Tenho um formulário com campos em linha, mas ele não aceita minhas configurações de padding no botão de envio, o texto de envio está desalinhado.
Já tentei as opções acima:
padding-top, padding-bottom e apenas padding – mas nenhuma funcionou...
Você pode me ajudar?
Obrigado antecipadamente!
Olá Rodrigo - Parece que o estilo do tema está substituindo o formulário neste caso.
Se você tiver uma licença do WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Olá
Sou um novato absoluto em CSS, mas sei copiar e colar 🙂 então...
Como posso adicionar um botão de envio PayPal Buy Now, checkout?
Obrigado por qualquer ajuda. O Google não está sendo legal comigo… 😉
Darren
Olá Robert! Peço desculpas por qualquer confusão aqui. Os botões do PayPal são fornecidos especificamente pelo PayPal, com código que também é fornecido por eles. Você pode consultar a documentação deles aqui: https://www.paypal.com/buttons/
Caso ajude, nosso plugin tem a capacidade de processar pagamentos com PayPal através de um de nossos add-ons. Ele está disponível com nossa licença nível Pro, e você pode encontrar mais detalhes sobre ele aqui: https://wpforms.com/addons/paypal-standard-addon/
Espero que isso ajude a esclarecer 🙂 Se você tiver mais alguma dúvida sobre isso, por favor entre em contato conosco se tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer algumas perguntas em nossos fóruns de suporte.
Como posso fazer o botão Enviar piscar para que as pessoas não o ignorem em um formulário longo?
Olá David. Para conseguir o que você procura, você precisaria usar animações e estilos de keyframes em seu botão. No entanto, isso não é algo com o qual possamos ajudar de nosso lado.
Para mais personalização, sugerimos que você codeable ou WPBuff.
Obrigado e tenha um bom dia!
Prezada equipe do WP Forms,
Gostaria de saber como posso incorporar um formulário em um botão do Elementor.
Já preparei o formulário WP e tentei usar a opção de incorporação de 'shortcode' no formulário WP. No entanto, ao copiar e colar o shortcode no URL do botão usando o Elementor, ele redireciona para uma página em branco.
Você pode me ajudar com isso sem a necessidade de fazer upgrade para um plano pago (seja no WP Form ou no Elementor)?
Obrigado
Olá Reni - Aqui está um guia completo para incorporar WPForms em uma página do Elementor.
Espero que ajude! 🙂
Boa tarde, minha pergunta é a seguinte:
Como posso configurar os campos para que em vez de me sair um retângulo, no qual se escreve, saia uma linha contínua.
Obrigado
Olá Marcos, Para garantir que respondamos à sua pergunta da forma mais completa possível e evitar qualquer confusão.
Você se importaria de entrar em contato conosco com detalhes adicionais para que possamos ajudá-lo ainda mais neste caso?
Obrigado.
Você pode alterar o código de URL de Redirecionamento de Confirmação para que o link abra em uma nova janela?
Olá Allison, para conseguir isso, você precisará implementar algum código personalizado, e aqui está o nosso guia do desenvolvedor sobre o assunto
Como o que você procura exigiria algum código personalizado, não podemos oferecer suporte para o desenvolvimento personalizado que seria necessário. Caso ajude, você pode considerar procurar um serviço como Codeable ou Upwork para possíveis opções de desenvolvedor.
Obrigado!
Olá, equipe WP Forms! Eu amo o WP Forms e estou criando um formulário inteligente usando opções de lógica condicional. Adorei isso, aliás. Para tornar meu formulário perfeito, existe uma maneira de aplicar a mesma lógica condicional ao BOTÃO DE ENVIO? Em outras palavras, quero que meu BOTÃO DE ENVIO desapareça até que as caixas apropriadas sejam marcadas (ou os campos obrigatórios sejam preenchidos). Muito obrigado por qualquer ajuda!
Olá Christine,
Sinto muito, pois atualmente não temos um recurso integrado para ocultar/mostrar o botão de envio condicionalmente. No entanto, isso pode ser alcançado usando um pouco de código personalizado, como mostrado neste guia do desenvolvedor
Espero que ajude 🙂
Olá,
É possível adicionar um ícone ao botão de envio?
Obrigado.
Olá Arnold – Você pode considerar usar o seguinte CSS para adicionar um ícone ao botão de envio:
.wpforms-form button[type=submit]:after { content: "\f345"!important; vertical-align: middle!important; font-size: 1em!important; transition: all 0.5s ease!important; opacity: 1; }Olá!
Notei que o wpforms está substituindo a variável ‘–theme-button-padding’ e definindo a sua própria:
.wpforms-submit { –theme-button-padding: 5px 35px; }
Posso perguntar por que você está substituindo a configuração da propriedade personalizada do tema aqui, em vez de usar a propriedade de padding menos específica?
Obrigado 🙂
Olá Equipe,
Tenho um formulário de várias páginas e estou interessado em colocar dois conjuntos de botões “próximo e anterior” no formulário. Um conjunto na parte superior e outro na parte inferior de cada página, isso é possível?
Obrigado
Olá Grant, atualmente não temos esse recurso por padrão. Para um aconselhamento personalizado, você pode entrar em contato com nossos Consultores Confiáveis na equipe de suporte se você tiver uma licença do WPForms. Por favor, envie um ticket de suporte e eles entrarão em contato com você o mais rápido possível (geralmente dentro de 1 dia útil). Se você estiver usando nossa versão gratuita, por favor, vá para o fórum de suporte do WPForms Lite no WordPress.org e abra um novo tópico. Obrigado!