Personalizar o Botão de Envio

Gostaria de personalizar o botão de envio para que se adapte melhor ao design ou à personalidade do seu site? O botão de envio do seu formulário pode desempenhar um papel importante nas taxas de submissão.

Este guia irá abordar como personalizar o texto e o estilo do botão de envio do seu formulário, tanto no construtor de formulários como com o seu próprio CSS.

Alterar o Texto do Botão de Envio

Para alterar o texto 'Enviar' do botão do seu formulário, abra o construtor de formulários em Configurações » Geral. Aqui, verá dois campos para definir o texto no botão de envio:

• Texto do Botão de Envio: O texto exibido quando este botão ainda não foi clicado
• Texto de Processamento do Botão de Envio: O texto exibido após o utilizador clicar neste botão, mas antes de a confirmação ser apresentada ao utilizador

Pode prosseguir e alterar o texto do botão de envio de acordo com a sua preferência. Assim que estiver satisfeito com as alterações, guarde o formulário.

Estilizar o Botão de Envio no Construtor de Formulários

A forma mais rápida de estilizar novamente o seu botão de envio é no construtor de formulários, onde pode ver as suas alterações à medida que as faz. Não é necessário CSS.

Abra o construtor de formulários e vá para Definições » Temas.

Em seguida, procure a secção Estilos do Botão à esquerda.

• Tamanho: Define o quão grande é o seu botão. As opções incluem Pequeno, Médio e Grande.
• Borda: Contorna o seu botão com uma borda Sólida, Tracejada ou Pontilhada.
• Espessura da Borda: Define a espessura da borda. A unidade padrão é pixels (px), mas pode escolher uma unidade diferente.
• Raio da Borda: Arredonda os cantos do seu botão para um aspeto mais suave ou mais acentuado. Pixels (px) é a unidade padrão aqui também.

Abaixo destas, encontrará três opções de cor para o seu botão. Para alterar uma cor, clique na amostra para abrir o seletor de cores. Pode escolher uma cor visualmente ou introduzir um código hexadecimal para um controlo preciso.

• Fundo: Define a cor por trás do rótulo do seu botão.
• Borda: Define a cor da borda do seu botão. Esta opção só se aplica se tiver escolhido um estilo de borda acima.
• Texto: Define a cor do rótulo do seu botão.

Também pode escolher um tema de cor pronto a usar na definição Temas, que atualiza o seu botão juntamente com o resto do seu formulário. Para saber mais, veja o nosso tutorial sobre utilizar temas de formulários.

Assim que estiver satisfeito com as suas alterações, clique em Guardar, depois use o botão Pré-visualizar para ver o seu formulário com os estilos aplicados.

O construtor de formulários cobre as alterações que a maioria dos sites necessita. Para um controlo mais fino, como espaçamento exato, alinhamento do botão, botões de largura total ou uma fonte específica, necessitará de uma pequena quantidade de CSS. Vamos abordar isso a seguir.

Estilizar o Botão de Envio com CSS

CSS dá-lhe controlo total sobre o botão de envio, bem como sobre qualquer outro aspeto do seu formulário. É a ferramenta certa quando precisa de algo que o construtor de formulários ainda não oferece.

Se é novo em CSS ou gostaria de uma revisão, o melhor lugar para começar é com o nosso guia introdutório de CSS.

Aqui está o CSS padrão para um botão de envio WPForms, bem como comentários para notar o que cada linha de CSS faz:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Pode alterar qualquer um destes valores para estilizar o botão de forma diferente. Como exemplo, vamos começar por dar ao nosso botão um fundo amarelo.

O primeiro passo é encontrar o código hexadecimal da cor que queremos. htmlcolorcodes.com e Adobe Color CC são ferramentas gratuitas úteis para isso.

Assim que tivermos o código hexadecimal do tom de amarelo que queremos, podemos criar o nosso CSS:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #FAF243 !important; /* Yellow background */
    color:#000 !important;
}

Em seguida, terá de adicionar este CSS ao seu site. O WordPress mantém o painel CSS Adicional num de dois locais, dependendo do tipo de tema que está a usar:

• Temas Clássicos: Vá a Aparência » Personalizar e selecione CSS Adicional.
• Temas de Bloco: O WordPress oculta o Personalizador quando um tema de bloco está ativo, pelo que adicionará o seu CSS no editor do site. Vá a Aparência » Editor e abra Estilos para encontrar a opção CSS Adicional.

Aqui está o painel CSS Adicional no Personalizador, que é o que verá num tema clássico.

E aqui está no editor do site, que é o que verá num tema de bloco.

Depois de abrir a secção CSS Adicional, cole o seu novo CSS e guarde as suas alterações.

Abaixo está como o nosso botão ficará agora com este CSS aplicado:

Personalizar Estilos de Hover

O CSS permite aplicar estilos completamente diferentes quando um cursor paira sobre um botão. Esta alteração de estilo ajuda na experiência do utilizador porque permite ao utilizador saber que este objeto é clicável.

Abaixo está o CSS padrão no WPForms quando um botão é pairado. Como observado nos comentários, a cor de fundo fica um pouco mais escura e a cor da borda fica um pouco mais clara:

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Poderá notar que isto é muito menos CSS do que vimos para o botão quando não está em sobreposição. Isto acontece porque o CSS aplicará todo o CSS anterior ao seu botão em sobreposição, a menos que seja instruído de outra forma.

Se deixar os estilos padrão, por exemplo, a cor do texto permanecerá preta quando o botão estiver em sobreposição. Isto acontece porque a cor do texto do botão seria normalmente preta, e não lhe dissemos para mudar ao passar por cima.

Tal como no exemplo anterior de CSS personalizado, pode alterar qualquer um destes valores para estilizar os estilos de sobreposição do botão de forma diferente. Para o nosso exemplo, daremos ao botão um fundo amarelo mais escuro quando em sobreposição.

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #e5da00 !important; /* Darker yellow background */
}

Eis como o botão ficará com o CSS aplicado:

Personalizar Estilos de Foco

Tal como pode definir um estilo de sobreposição para o seu botão com CSS, também pode definir um estilo de foco. O estilo de foco é aplicado quando o botão é o ponto focal de quaisquer eventos na página. Por exemplo, se usar a tecla tab para navegar na página.

Usar um estilo de foco melhora a experiência do utilizador, sendo especialmente útil para utilizadores que dependem da navegação por teclado para navegar na web.

Aqui está o CSS padrão no WPForms quando um botão está em foco:

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #ddd;
    border: 1px solid #ccc;
    cursor: pointer;
}

Neste caso, a background-color é um tom ligeiramente mais escuro do que o padrão, e a borda também é subtilmente alterada. Isto permite ao utilizador saber que o botão está agora em foco e receberá quaisquer teclas relevantes.

Para este exemplo, vamos usar uma cor diferente de amarelo, para tornar o estilo de foco distinto do estilo de sobreposição.

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #80ccf6 !important;
}

Com este CSS personalizado aplicado, eis como o botão ficará quando em foco:

Exemplo de CSS

Agora que cobrimos o básico, vamos passar por um exemplo completo de CSS personalizado para um botão de envio.

Aqui está o CSS que adicionaremos para este exemplo, que inclui alterações de estilo tanto para sobreposição como para foco:

/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    padding: 15px !important; /* Increase distance between text and border */
    width: 100% !important; /* Make the button full-width */
    font-size: 1.5em !important; /* Increase text size */
    background-color: #af0000 !important; /* Red background */
    color: #fff !important; /* White text */
    border: 8px double #860b0b !important; /* Dark red, double-line border */
}

/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #860b0b !important; /* Dark red background */
    border: 8px double #af0000 !important; /* Red, double-line border */
}

/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: red !important; /* Dark red background */
    border: 8px double #860b0b !important; /* Red, double-line border */
}

Abaixo está como o nosso botão ficará agora com este CSS aplicado:

Quando em sobreposição:

E quando em foco. Lembre-se, as únicas alterações são as cores de fundo e de borda:

Perguntas Frequentes

Estas são as respostas a algumas das principais perguntas sobre a personalização do botão de envio no WPForms.

Posso alterar o tamanho e o preenchimento do botão de envio?

Parcialmente. No construtor de formulários, vá a Definições » Temas » Estilos do Botão e utilize a definição Tamanho para alternar entre Pequeno, Médio e Grande. Isso é suficiente para a maioria dos sites e também funciona no WPForms Lite.

Se precisar de um tamanho de texto exato ou valores de preenchimento específicos, terá de adicionar um trecho de CSS. Aqui está um exemplo.

div.wpforms-container-full .wpforms-form button[type=submit] {
    font-size: 18px !important; /* Text size */
    padding: 14px 40px !important; /* Space inside the button */
}

Posso alterar a posição do botão para que seja exibido no centro?

O alinhamento do botão ainda não está disponível no construtor de formulários, pelo que precisará de um pequeno trecho de CSS para isso. Por predefinição, os botões de envio do WPForms estão alinhados ao lado esquerdo da página. Para centrar o botão, adicione o seguinte trecho de código ao seu site.

div.wpforms-container-full .wpforms-form button[type=submit] {
    margin: 0 auto !important;
    display: block !important;
}

O código CSS acima aplicará o estilo a todos os formulários no seu site. Se desejar aplicar o estilo a um formulário específico, terá de usar o seletor CSS #wpforms-submit-FORM-ID. Aqui está um exemplo de trecho.

#wpforms-submit-FORM-ID {
     margin: 0 auto !important;
     display: block !important;
}

Veja como o botão ficará no frontend.

Se pretender que o botão seja apresentado a largura total, utilize a propriedade CSS width: 100%. Eis uma versão atualizada do excerto acima.

div.wpforms-container-full .wpforms-form button[type=submit] {
     margin: 0 auto !important;
     display: block !important;
     width: 100% !important;
}

Botão de largura total.

Posso personalizar o botão de envio do WPForms no Elementor Builder?

Sim. O WPForms integra-se com o Elementor para fornecer estilização de formulários diretamente no Elementor Builder. Pode personalizar os seus campos de formulário, rótulos, cores e o botão de envio.

Para saber mais sobre como personalizar o seu formulário no Elementor, consulte o nosso guia sobre adicionar WPForms a uma página do Elementor.

Posso estilizar o botão de envio no Divi?

Sim, embora o estilize no construtor de formulários do WPForms em vez de dentro do Divi. O módulo WPForms não inclui controlos de estilo de formulário, pelo que as suas definições cobrem apenas as opções próprias do Divi, como dimensionamento e espaçamento.

Defina os seus estilos de botão em Definições » Temas no construtor de formulários, e eles serão transferidos para o seu formulário na página Divi. Isto funciona quer incorpore o seu formulário com o módulo WPForms ou o shortcode. Para mais detalhes, consulte o nosso guia sobre adicionar o WPForms a uma página Divi.

Como posso ocultar o botão de envio no meu formulário?

Ocultar o botão de envio é particularmente útil se estiver a usar o addon de Cálculos para criar calculadoras no seu site. Para ocultar o botão de envio do seu formulário, terá de adicionar um excerto de CSS personalizado ao seu site. O excerto de código está disponível na biblioteca de excertos de código do WPForms.

Para obter detalhes sobre como importar este excerto para o seu site, certifique-se de consultar o nosso guia sobre ocultar o botão de envio.

É tudo! Agora pode personalizar o botão de envio do seu formulário, seja no construtor de formulários ou com o seu próprio CSS.

Em seguida, gostaria de estilizar o resto do seu formulário para corresponder? Consulte o nosso guia completo sobre estilização dos seus formulários para ver todas as opções disponíveis no construtor de formulários.