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.

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

CSS oferece uma flexibilidade incrível para personalizar o botão de envio, bem como qualquer outro aspeto do seu formulário.

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 ou 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 */
}

Em seguida, precisamos de adicionar este CSS ao nosso site. A forma mais simples de o fazer é usar o Editor CSS do WordPress. Para o abrir, vá a Aparência » Personalizar e selecione CSS Adicional.

Depois de abrir a secção CSS Adicional, cole o seu novo CSS. Em seguida, clique no botão Guardar e Publicar, e está tudo pronto!

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 a posição do botão para que seja exibido no centro?

Por padrão, os botões de envio do WPForms estão alinhados ao lado esquerdo da página. No entanto, pode usar CSS personalizado para alinhar o botão ao centro. Para tal, 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.

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 seu botão de envio utilizando CSS personalizado.

Quer mais exemplos? Consulte o nosso tutorial com ainda mais CSS para botões de envio que pode copiar e colar diretamente no seu site.