Resumo de IA
Quer alterar o aspeto dos botões dos seus formulários?
O WPForms permite-lhe personalizar os estilos dos botões utilizando controlos de estilo integrados no editor de blocos ou via CSS.
Personalize os Estilos dos Botões do Formulário Agora!
Neste artigo, vamos mostrar-lhe como personalizar os estilos dos botões utilizando ambos os métodos. Veja qual funciona para si!
Neste Artigo
Como Personalizar Estilos de Botões no WPForms com CSS
Antes de começarmos, terá de instalar e ativar o plugin WPForms no seu site. Além disso, terá de criar pelo menos um formulário. Veja o nosso tutorial sobre como criar um formulário de contacto simples como exemplo para começar.
Opção 1: Fazer Personalização em Todo o Site (CSS)
Personalizar os estilos dos botões do seu formulário é bastante fácil assim que tiver o código CSS que pretende utilizar. Se quiser, pode simplesmente copiar e colar um dos exemplos abaixo ou até combiná-los.
O trecho de código deve ser colado na sua secção CSS Adicional no painel Personalizar. Isto pode ser feito navegando para Aparência » Personalizar » CSS Adicional. Depois, basta clicar em Guardar e Publicar, e já está.
Um método ainda mais fácil é usar um plugin como o WPCode, que lhe permite adicionar diferentes tipos de trechos de código ao seu site. Neste caso, basta colar o código CSS para o estilo do botão clicando no botão Usar Trecho.
Agora vamos dar uma vista de olhos em algumas formas diferentes de estilizar os botões do seu formulário com CSS.
Como Criar um Botão com Fundo Transparente
Quer criar um fundo transparente para o seu botão 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 vista de olhos em alguns exemplos de botões transparentes em diferentes sites.
Exemplo #1: Botão de Formulário Transparente
Exemplo #2: Botão de Chamada para Ação Transparente
Para criar um botão com fundo transparente, tudo o que precisa de fazer é copiar o trecho de código abaixo para a sua secçã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 */
}
Eis 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 gradiente não é uma nova tendência. No entanto, se esses botões de estilo gradiente multicoloridos se adequam melhor ao seu site, pode seguir este tutorial.
Como é feito com CSS, pode facilmente aumentá-lo ou diminuí-lo sem perder resolução. Se procura uma ferramenta para criar CSS para gradientes, pode usar o editor de gradientes da ColorZilla.
No CSS abaixo, usámos estilos específicos do navegador para garantir que o gradiente aparece 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 */
}
Eis como o botão ficará:
Como Criar um Botão com Cantos Arredondados
Quer que os utilizadores prestem atenção aos seus botões de chamada para ação? De acordo com algumas pesquisas, cantos arredondados melhoram o processamento de informação e atraem o nosso olhar para o centro do elemento.
Se procura atrair a atenção dos utilizadores, pode querer testar as suas taxas de conversão de formulários 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 */
}
Eis como o botão ficará:
Como Substituir o Seu Botão por uma Imagem
Usar um botão gráfico é provavelmente a forma mais fácil de personalizar o botão do seu formulário.
Pode encontrar facilmente vários botões gráficos para descarregar e usar em sites de stock photos. Depois, pode substituir o botão do seu formulário por um botão gráfico.
Certifique-se de que carrega o gráfico do botão para o carregador de mídia, indo a Mídia » Adicionar Novo. Depois 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 o seu formulário, os seus utilizadores terão várias perguntas em mente. Para aumentar as conversões, pode responder a essas perguntas com o texto apropriado no seu botão ou à sua volta.
Ao criar um botão para o seu formulário, olhe para ele através dos olhos dos seus visitantes. Isso ajuda-o a escrever o texto apropriado para o seu botão, focado na conversão.
Na maioria dos casos, para incluir todos esses detalhes no seu botão, terá de criar um botão de múltiplas linhas. Eis 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 */
}
Eis como o botão ficará:
Opção 2: Personalizar um Estilo de Botão Individualmente
E se quiser que o seu novo estilo seja usado apenas num único formulário WPForms, mas não em todos os formulários do seu site?
Se preferir alterar o estilo do botão de um botão de formulário individual usando CSS, precisa de encontrar o ID exclusivo do seu formulário.
Primeiro, abra uma página que contenha o formulário que pretende modificar. Mova o rato para qualquer campo no formulário, clique com o botão direito » Inspecionar Elemento.
O ecrã do navegador irá dividir-se e verá o código fonte da página. No código fonte, precisa de localizar a linha de início do código do formulário.
Como pode ver na captura de ecrã acima, o código do nosso formulário de contacto começa com a linha:
div class="wpforms-container wpforms-container-full" id="wpforms-14"
Usaremos este ID no nosso CSS para estilizar o nosso formulário de contacto. Substituiremos .wpforms no nosso primeiro trecho de CSS por #wpforms-14.
O atributo id é um identificador exclusivo gerado pelo WPForms para este formulário em particular, pelo que o estilo não será aplicado em mais nenhum lugar.
Por exemplo, 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 a Todos os Formulários e localizar a coluna Shortcode. Encontrará o ID do formulário aqui num instante.
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 controlos de estilo integrados no WPForms o ajudarão a obter o estilo de botão que pretende mais facilmente.
Este post sobre como estilizar formulários de contacto no WordPress explica mais sobre as opções de estilo de formulários 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
Pode alterar o tema de cor, os campos do formulário, os rótulos, os botões e os estilos do contentor e do fundo sem escrever qualquer CSS nas definições do bloco WPForms.
Aceder às Definições de Estilo dos Botões
Em Estilos de Botão, 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 entre as quais pode escolher.
- Tamanho: Esta opção indica o tamanho do botão. Pode escolher entre Pequeno, Médio e Grande.
- Borda: Com esta configuração, pode dar aos seus botões uma borda sólida, tracejada ou pontilhada.
- Espessura da Borda: Isto indica aos seus botões a espessura das suas margens. Pode escolher uma unidade diferente se pixels (px) não forem o que precisa para o seu design.
- Raio da Borda: Pode alterar a forma como os cantos dos seus botões são arredondados para os tornar mais suaves ou mais nítidos. Embora os pixels (px) sejam a unidade padrão, pode alterá-la para se adequar às necessidades do seu design.
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!
FAQs sobre Personalização de Estilos de Botão com CSS
A personalização de estilos de botões é um tópico de interesse popular entre os nossos leitores. Aqui estão respostas a algumas perguntas comuns sobre o assunto:
Como alterar o estilo de um botão em CSS?
Para alterar a aparência de um botão usando CSS, pode especificar estilos personalizados para propriedades como cor de fundo, borda, tamanho da fonte, preenchimento e muito mais. No WordPress, pode colar os 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 WordPress como o WPForms. Ele fornece ferramentas de arrastar e soltar para facilitar a criação de formulários.
Para estilos de botões personalizados, vá à secção CSS Adicional no WordPress e insira o seu código CSS, visando os nomes de classe específicos do formulário ou botão que o WPForms fornece.
Como personalizo o meu botão de envio?
Para personalizar o 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, veja como personalizar a sua página de login no WordPress
Agora que sabe como estilizar formulários de contacto com CSS, pode querer dar uma vista de olhos em como criar uma página de login personalizada para o seu site. Também temos algumas compilações de plugins para o ajudar a escolher os melhores plugins à medida que o seu site cresce:
- Melhores Plugins de SEO
- Melhores Plugins de Redes Sociais
- Melhores Plugins de Backup
- Melhores Plugins de Registo de Email
- Melhores Plugins TikTok
- Melhores Plugins SMTP
Crie o seu formulário WordPress agora
Pronto para criar o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, 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 de ser capaz de permitir que alguém escolha quantidades de cada item e, em seguida, poder enviá-lo por e-mail.
Item e custo estão todos num campo. Só preciso de ser capaz de adicionar um botão +/- ao lado de cada item.
Alguma ideia de como posso fazer isto facilmente?
Obrigado
Olá Paul,
Ainda não temos a capacidade de incluir quantidades de itens desta forma, embora esteja no nosso radar para adicionar no futuro!
Se estiver disposto a considerar uma alternativa modificada, pode alavancar o campo Itens do Menu Suspenso para fazer o que procura de uma forma ligeiramente diferente — a demonstração mais fácil disso é ver o vídeo curto aqui: https://cl.ly/3Y2f3o3q1C0M. Basicamente, 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. Isto permite-lhe oferecer múltiplos produtos e várias quantidades de cada um desses produtos.
Lamento não podermos oferecer exatamente o que procura, mas espero que isto ajude!
Se tiver mais alguma questão sobre isto, por favor contacte-nos no suporte 🙂
Todos estes são ótimos exemplos. Mas como se desativa a sombra ao passar o rato? Quero apenas um botão que seja puro texto em maiúsculas e a negrito que diga “SUBMIT”. O texto deve mudar para cinzento ao passar o rato e ao ser ativado. Sem borda, fundo, sombra…
Olá Gary,
O nosso botão de submissão não inclui qualquer sombra por defeito, por isso, se estiver a ver uma, é provável que esteja a ser adicionada pelo seu tema. Como todos os temas fazem isto de forma um pouco diferente, precisaríamos de ver um formulário incorporado para ajudar a removê-la.
Para remover todos estes outros estilos, precisará de algumas linhas de CSS adicionais. Temos um tutorial aqui especificamente sobre como personalizar o botão de submissão, incluindo estilos de hover. Os exemplos apresentados aí devem guiá-lo através de tudo o que precisa para criar o aspeto personalizado que está a descrever.
Espero que isto ajude! Se tiver alguma questão, por favor diga-nos! Apoiamos todas as licenças pagas no nosso canal de suporte privado e o WPForms Lite no nosso fórum 🙂
Tentei copiar e colar o código para o estilo do botão transparente no meu Tema Filho Genesis e não teve qualquer efeito na alteração do aspeto dos botões. Porquê acha que isso acontece?
Segui as instruções – Aparência>Personalizar>CSS Adicional>Guardar.
Obrigado!
Olá Toni,
Essa é uma ótima pergunta, e a resposta pode variar muito de site para site (mesmo dentro do mesmo tema). Sugiro que comece com o nosso tutorial Como Resolver Problemas de CSS que Não Funciona, que aborda todas as questões mais comuns e como resolvê-las.
Se tentar isso e ainda assim ficar preso, por favor contacte-nos no suporte para que possamos ajudá-lo a resolver mais problemas 🙂
Não consigo perceber porque é que isto não funciona. Inseri o código na secção de CSS Personalizável, mas o botão permaneceu o mesmo.
Quero torná-lo transparente como o primeiro exemplo transparente que tem acima, mas simplesmente não regista.
Também espero mover o formulário real mais para baixo na página, mas isso também não parece estar a funcionar.
Olá 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 isto:div.wpforms-container-full .wpforms-form button[type=submit] { background-color: transparent !important; }Temos mais dicas sobre como fazer o CSS funcionar em este tutorial de resolução de problemas de CSS.
Se experimentar estas ideias de resolução de problemas e ainda estiver a ter problemas, por favor, diga-nos! Fornecemos suporte a os nossos utilizadores com licença paga aqui e a os nossos utilizadores Lite aqui.
Espero que ajude! 🙂
Só queria agradecer por criar esta publicação… Ótimo trabalho, isto ajudou-me imenso!
Nancy,
Fico muito feliz por ver que considera a publicação útil 🙂
Olá,
Como posso alterar a altura do botão de envio. A sua altura é maior que a de outros botões no Wordpress e não sei que css usar.
Obrigado desde já.
Olá Lewis,
A forma mais fácil de personalizar a altura do botão de envio é ajustando o seu preenchimento (a distância entre o texto do botão e a borda). Eis o CSS de que precisaria para o fazer:
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 para os valores predefinidos (10 píxeis em cima e em baixo), mas pode alterá-los para quaisquer números que desejar. Para manter o texto verticalmente centrado, certifique-se apenas de que mantém o preenchimento superior e inferior com o mesmo valor.
E caso ajude, pode encontrar o nosso tutorial completo sobre personalização do botão de envio aqui.
Espero que isto ajude! 🙂
Olá,
Como posso alterar o tamanho das caixas de seleção para as tornar mais pequenas?
Obrigado desde já.
Olá Lewis,
Peço desculpa, no entanto, as caixas de seleção são geradas pelo navegador e, por isso, não conseguimos personalizar o seu tamanho. Embora alguns temas forneçam modificações de código extensivas para estilizar caixas de seleção de formas personalizadas, estas tendem a causar problemas (entrar em conflito com alguns navegadores, por vezes até quebrar algumas funcionalidades, etc.), razão pela qual é geralmente evitado.
Olá @ JESS, observei que você é a estrela aqui, estou tendo um problema com o meu botão de envio, assim que você passa o rato sobre o botão de envio, a cor de destaque se espalha para além do botão de envio e isso é muito feio e nada profissional, como resolvo isso. Suspeito que esteja a captar a cor do meu tema, mas não sei como desativá-la. Aqui está o link para uma melhor compreensão. Basta passar o rato sobre o botão de envio e ver o efeito feio. [URL removido]
Olá Emmanuel,
Teremos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem de suporte para que possamos ajudá-lo.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um ticket de suporte.
Caso contrário, fornecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Há planos para criar um pacote de add-ons com alguns estilos diferentes de botões de envio?
Olá Alex — Atualmente não temos planos para isso, mas anotei a ideia na nossa lista de pedidos de funcionalidades. Obrigado pela sugestão! 🙂
Olá
Estou apenas a perguntar como podemos adicionar isto a todos os campos do formulário? Tenho o meu formulário sobre uma imagem e gostaria de uma borda branca à volta de uma fonte branca com fundo transparente. Obrigado
Olá Jennifer,
Claro, os exemplos acima são especificamente para botões, mas também temos tutoriais para ajudar a estilizar os seus formulários em geral! Sugiro começar com o nosso guia para iniciantes (que cobre a adição de uma borda, etc.). Depois, se quiser um pouco de inspiração extra, pode consultar as nossas ideias de estilo adicionais (CSS incluído).
Espero que isto ajude! 🙂
Olá
É possível ocultar o botão de envio? Tentei diferentes CSS, mas não consigo fazê-lo funcionar. Quero usar o formulário apenas para informação, por isso não preciso do botão.
Obrigado
Olá Nicole,
Teríamos todo o gosto em ajudar! Para o fazer, precisaríamos apenas que entrasse em contacto connosco com o URL do seu formulário (isto permitir-nos-á criar um trecho de CSS para si).
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um ticket de suporte.
Caso contrário, fornecemos 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 CSS sobre como fazer isto. Poderia ajudar?
Obrigado.
Efkan
Olá Efkan,
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 fica um ótimo tutorial do WPBeginner sobre como adicionar CSS personalizado como este ao seu site. :)
Olá!
Obrigado por toda esta informação útil. Ainda tenho uma questão, no entanto.
Consegui alterar a cor de fundo do botão de envio e também adicionei com sucesso uma cor separada ao passar o rato por cima – e ao focar, para que a cor do botão mude quando os utilizadores navegam até ele.
O que não consigo decifrar é como manter a cor de passagem do rato no lugar depois de o botão ter sido clicado e estar ativamente a enviar. Assim que um utilizador afasta o cursor do botão, a cor de passagem do rato volta à cor original, o que pode fazer parecer que o botão não foi clicado (mesmo que o texto diga "a enviar...").
É uma questão do seletor :active que estou a perder, ou há algo mais que estou a perder?
Agradeço qualquer orientação que possa oferecer.
Olá Joe,
Poderemos ter de analisar o código em si, por isso, quando tiver oportunidade, entre em contacto com a nossa equipa de suporte e nós analisaremos mais a fundo e guiá-lo-emos. :)
Estou interessado em alterar a cor de fundo das mensagens de validação. Alguma recomendação?
Olá Janine,
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 isto ajude! 🙂
Obrigado Daisy
Tentei esse código para alterar 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?
Olá Janine,
Se tiver um plugin de cache instalado no seu site (ou se o seu host fizer cache), você vai querer limpar/desfazer o cache 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 a acompanhar a minha questão sobre 5 posts acima. Conforme instruído, enviei a minha questão para a equipa de suporte há cerca de três semanas e não obtive resposta.
Encontrei uma espécie de solução alternativa, mas ainda estou interessado em saber se é possível alterar a cor do botão de envio – e mantê-la alterada – quando os formulários estão a ser enviados.
Obrigado pela ajuda.
Olá Joe,
Peço desculpa pela confusão – parece que um dos membros da nossa equipa de suporte respondeu ao seu e-mail em 25 de março, mas não temos a certeza se o recebeu (pode ter sido filtrado como spam/lixo eletrónico, por isso vale a pena verificar lá, só por precaução).
Para resumir a resposta deles, no entanto, infelizmente não temos como realizar o que você está a tentar fazer. O problema é que o texto "A enviar" é exibido por JavaScript e não altera o CSS do botão – e, portanto, não há nada de útil para, em certo sentido, "agarrar" em termos de CSS personalizado. Pode ser possível conseguir usando algum JavaScript/jQuery criativo, mas não podemos fornecer qualquer suporte para este nível de personalização. Peço desculpa pelo inconveniente!
Olá, como posso fazer o botão Enviar ficar na mesma linha que as caixas de texto Nome e Email.
Fiz as caixas de texto Nome e Email em linha usando a opção de layout.
Olá Mike,
Eu recomendaria definitivamente a consulta do nosso guia que mostra como exibir o seu formulário numa única linha.
Espero que isto ajude! 🙂
Olá! Como posso mudar o meu botão de envio para ter apenas uma linha de texto?
Agora o botão é 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, pode tentar personalizar o botão de envio com CSS personalizado. Temos um ótimo tutorial sobre como fazer isto aqui.
Espero que ajude!
Tenha um bom dia 🙂
Olá!
O que acontece quando queremos que o botão de envio do Wpforms tenha o mesmo aspeto que os restantes 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 altera a aparência de todo… Devemos introduzir o nome da classe de alguma forma especial?
Olá Juanma.
Peço desculpa por qualquer confusão!
Pode conseguir isto com CSS personalizado. Por favor, consulte este artigo no nosso site para mais detalhes.
Espero que ajude!
Tenha um bom dia 🙂
Olá equipa 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.
Por favor, note que código personalizado está fora do âmbito do nosso suporte, não podemos ajudar com personalizações ou implementação de código personalizado.
No entanto, verifiquei no nosso sistema e vejo que temos uma sugestão para conseguir o que procura:
div.wpforms-container-full .wpforms-form .wpforms-submit-container {text-align: center !important;
}
Espero que ajude.
Tenha um bom dia 🙂
Olá! Como altero a cor de fundo do botão para a cor que o botão tem enquanto está a “enviar” após o envio ser pressionado? Obrigado!! (^_^)y
Olá Kate — Teríamos todo o gosto em ajudar! Quando tiver um momento, envie-nos uma mensagem para o suporte para que possamos ajudar.
Se tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, por isso, por favor, envie um pedido de suporte. Caso contrário, fornecemos suporte complementar limitado no fórum de suporte WPForms Lite WordPress.org.
Obrigado 🙂
Como posso alterar a cor de fundo ao passar o rato por cima?
Olá Francesco - Ótima pergunta!
A forma mais fácil de personalizar a cor de fundo do botão de envio ao passar o rato por cima é adicionando o código CSS conforme mostrado aqui no tutorial
Espero que isto ajude!
Obrigado e tenha um bom dia 🙂
Talvez simples, mas não encontrei:
Por favor, como posso fazer com que o botão “Enviar” tenha a função de redirecionar (link) para outra página? Ou seja, não enviar mas redirecionar?
Olá Roman – Boa pergunta!
Sim, pode redirecionar para outra página navegando para Construtor de Formulários > Definições > Confirmação > selecionar ‘Tipo de Confirmação’ como ‘Ir para URL (Redirecionar)’ > e adicionar o URL de redirecionamento de confirmação. Aqui está um ótimo guia sobre isto.
Espero que ajude! Obrigado e tenha um bom dia 🙂
Por favor, ajude. Tentei mudar o botão de envio para ter um raio de 5px. Não sei se estou a inserir o código CSS incorretamente?
Obrigado!
Olá Jillian – Teríamos todo o gosto em ajudar 🙂
Caso ajude, aqui fica um ótimo tutorial da WPBeginner sobre como adicionar CSS personalizado como este ao seu site.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um pedido de suporte. Assim, poderemos discutir mais detalhes e investigar isto mais a fundo.
Obrigado 🙂
Olá,
Aqui está o link do meu site onde coloquei o WPForms.
[URL Removido]
Quero que os botões "Seguinte, Anterior, Enviar etc." tenham o mesmo estilo dos botões do meu tema.
Por favor, ajude
Olá Abubakar – Obrigado por entrar em contacto 🙂
Pode personalizar os botões de envio no 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 contactar a nossa equipa de suporte.
Obrigado e tenha um bom dia 🙂
Olá! Ótimo artigo!
Como adiciono um ícone ao pairar sobre o botão de envio? Procurei literalmente em todo o lado por este código e não o consigo encontrar.
Obrigado!
Olá JP – Obrigado por entrar em contacto!
Para fazer o que mencionou, pode considerar usar o FontAwesome, e uma forma de adicionar o Font Awesome ao seu site é usar o plugin ‘Better Font Awesome’
Quando 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 pode substituí-lo pelo código do seu ícone preferido, indo à galeria do Font Awesome
Espero que isto ajude! 🙂
Olá. A usar a versão Lite. Quando paira o rato, o botão move-se ligeiramente e parece ter um contorno branco. O CSS que estou a usar:
.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 de pairar ou o movimento do botão? Obrigado
Olá Kas - O código CSS parece bom para mim. Suspeito que isto seja um conflito de estilo do tema que está a causar o comportamento estranho com o estilo de passagem do rato.
Neste caso, por favor, contacte o nosso suporte gratuito no fórum de suporte WPForms Lite do WordPress.org.
Obrigado 🙂
Olá,
Estou à procura de ajuda sobre como alinhar ao centro o meu botão de envio nos meus formulários. Não vi nenhuma forma de fazer isso, e o alinhamento normal ao centro com CSS não está a funcionar.
Como resolvo isto? Obrigado!
Olá Seth - Por favor, use este código CSS para centrar o botão de envio.
Espero que isto ajude! 🙂
Olá
Tenho um formulário com campos em linha, mas não aceita as minhas definições de preenchimento no botão de envio, o texto de envio está desalinhado.
Já experimentei as opções acima:
padding-top, padding-bottom, e apenas padding – mas nenhuma funcionou…
Pode ajudar-me?
Obrigado desde já!
Olá Rodrigo - Parece que o estilo do tema está a substituir o formulário neste caso.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso por favor envie um ticket de suporte. Caso contrário, fornecemos 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 🙂 por isso…
Como posso adicionar um botão de envio PayPal Buy Now, checkout?
Obrigado por qualquer ajuda. O Google não está a ser simpático comigo… 😉
Darren
Olá Robert! Peço desculpa por qualquer confusão. Os botões PayPal são especificamente fornecidos pelo PayPal, com código que também é fornecido por eles. Pode consultar a documentação deles aqui: https://www.paypal.com/buttons/
Caso ajude, o nosso plugin tem a capacidade de processar pagamentos com PayPal através de um dos nossos add-ons. Está disponível com a nossa licença de nível Pro, e pode encontrar mais detalhes sobre isso aqui: https://wpforms.com/addons/paypal-standard-addon/
Espero que isto ajude a esclarecer :) Se tiver mais alguma questão sobre isto, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar-nos algumas questões nos nossos fóruns de suporte.
Como posso fazer o botão de Envio piscar para que as pessoas não o ignorem num formulário longo?
Olá David. Para conseguir o que procura, precisaria de usar animações e estilos de keyframes no seu botão. No entanto, isto não é algo com que possamos ajudar da nossa parte.
Para mais personalização, sugerimos que utilize Codeable ou WPBuff.
Obrigado e tenha um bom dia!
Prezada equipa WPForms,
Gostaria de saber como posso incorporar um formulário num 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, quando copio e colo o shortcode no URL do botão usando o Elementor, ele redireciona para uma página em branco.
Pode ajudar-me com isto sem necessidade de atualizar para um plano pago (nem no WPForms nem no Elementor)?
Obrigado
Olá Reni - Aqui está um guia completo para incorporar WPForms numa página Elementor.
Espero que isto ajude! 🙂
Boa tarde, a minha pergunta é a seguinte:
Como posso configurar os campos para que em vez de me aparecer um retângulo, onde se escreve, apareça uma linha contínua.
Obrigado
Olá Marcos, Para garantir que respondemos à sua pergunta da forma mais completa possível e evitar qualquer confusão.
Importa-se de entrar em contacto connosco com detalhes adicionais para que possamos ajudá-lo ainda mais neste caso?
Obrigado.
Pode alterar o código do URL de Redirecionamento de Confirmação para que o link abra numa nova janela?
Olá Allison, para conseguir isto, terá de implementar algum código personalizado, e aqui está o nosso guia do programador sobre o mesmo
Como o que procura exigiria algum código personalizado, não podemos fornecer suporte para o desenvolvimento personalizado que seria necessário. Caso ajude, pode considerar procurar um serviço como Codeable ou Upwork para potenciais opções de programador.
Obrigado!
Olá, equipa WPForms! Adoro o WPForms e estou atualmente a criar um formulário inteligente usando opções de lógica condicional. Adoro isto, aliás. Para tornar o meu formulário perfeito, existe alguma forma de aplicar a mesma lógica condicional ao BOTÃO DE ENVIO? Noutras palavras, quero que o meu BOTÃO DE ENVIO se oculte até que as caixas apropriadas sejam marcadas (ou os campos obrigatórios sejam preenchidos). Muito obrigado por qualquer ajuda!
Olá Christine,
Lamento, pois atualmente não temos uma funcionalidade integrada para ocultar/mostrar o botão de envio condicionalmente. No entanto, isto pode ser conseguido usando um pouco de código personalizado, como mostrado neste guia do programador
Espero que ajude 🙂
Olá,
É possível adicionar um ícone ao botão de envio?
Obrigado.
Olá Arnold – 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á!
Reparei que o wpforms está a substituir a variável ‘–theme-button-padding’ e a definir a sua própria:
.wpforms-submit { –theme-button-padding: 5px 35px; }
Posso perguntar porque está a anular a definição da propriedade personalizada do tema aqui, em vez de usar a propriedade de padding menos específica?
Obrigado 🙂
Olá Equipa,
Tenho um formulário de várias páginas e estou interessado em colocar dois conjuntos de botões “seguinte & anterior” no formulário. Um conjunto em cima e outro em baixo de cada página, é isto possível?
Obrigado
Olá Grant, atualmente não temos esta funcionalidade por defeito. Para aconselhamento personalizado, pode entrar em contacto com os nossos Consultores de Confiança na equipa de suporte se tiver uma licença WPForms. Por favor, submeta um ticket de suporte e eles entrarão em contacto consigo o mais breve possível (geralmente no prazo de 1 dia útil). Se estiver a usar a nossa versão gratuita, dirija-se ao fórum de suporte WPForms Lite WordPress.org e abra um novo tópico. Obrigado!