Personalizando o Botão de Envio

Gostaria de personalizar o botão de envio para que ele 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 envio.

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

Alterando 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, você 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 usuário clicar neste botão, mas antes que a confirmação seja exibida ao usuário

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

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

A maneira mais rápida de reestilizar seu botão de envio é no construtor de formulários, onde você pode ver suas alterações conforme as faz. Nenhum CSS é necessário.

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

Em seguida, procure a seçã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 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 você pode escolher uma unidade diferente.
• Raio da Borda: Arredonda os cantos do seu botão para um visual mais suave ou mais nítido. Pixels (px) é a unidade padrão aqui também.

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

• Fundo: Define a cor de fundo do rótulo do seu botão.
• Borda: Define a cor da borda do seu botão. Esta opção só se aplica se você escolheu um estilo de borda acima.
• Texto: Define a cor do rótulo do seu botão.

Você também pode escolher um tema de cores pronto em Configurações de Temas, que atualiza seu botão junto com o restante do seu formulário. Para saber mais, veja nosso tutorial sobre uso de temas de formulário.

Quando estiver satisfeito com suas alterações, clique em Salvar e, em seguida, use o botão Visualizar para ver seu formulário com os estilos aplicados.

O construtor de formulários cobre as alterações que a maioria dos sites precisa. Para um controle mais refinado, como preenchimento exato, alinhamento do botão, botões de largura total ou uma fonte específica, você precisará de uma pequena quantidade de CSS. Vamos detalhar isso a seguir.

Estilizando o Botão de Envio com CSS

CSS oferece controle total sobre o botão de envio, bem como qualquer outro aspecto do seu formulário. É a ferramenta certa quando você precisa de algo que o construtor de formulários ainda não oferece.

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

Aqui está o CSS padrão para um botão de envio WPForms, bem como comentários para observar 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 */
}

Você pode alterar qualquer um desses valores para estilizar o botão de forma diferente. Como exemplo, vamos começar dando 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.

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

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

Em seguida, você precisará adicionar este CSS ao seu site. O WordPress mantém o painel CSS Adicional em um de dois lugares, dependendo do tipo de tema que você está usando:

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

Aqui está o painel CSS Adicional no Personalizador, que é o que você verá em um tema clássico.

E aqui está no editor do site, que é o que você verá em um tema de bloco.

Depois de abrir a seção CSS Adicional, cole seu novo CSS e salve suas alterações.

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

Personalizando Estilos de Hover

O CSS permite que você aplique estilos completamente diferentes quando um cursor paira sobre um botão. Essa mudança de estilo ajuda na experiência do usuário porque permite que o usuário saiba que este objeto é clicável.

Abaixo está o CSS padrão no WPForms quando um botão está em foco. Conforme 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 */
}

Você pode notar que isso é muito menos CSS do que vimos para o botão quando ele não está em foco. Isso ocorre porque o CSS aplicará todo o CSS anterior ao seu botão em foco, a menos que seja instruído de outra forma.

Se você deixar os estilos padrão, por exemplo, a cor do texto permanecerá preta quando o botão estiver em foco. Isso ocorre porque a cor do texto do botão normalmente seria preta, e não dissemos para alterá-la ao passar o mouse.

Assim como no exemplo anterior de CSS personalizado, você pode alterar qualquer um desses valores para estilizar os estilos de foco do botão de forma diferente. Para nosso exemplo, daremos ao botão um fundo amarelo mais escuro quando em foco.

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

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

Personalizando Estilos de Foco

Assim como você pode definir um estilo de foco para seu botão com CSS, você 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 você usar a tecla Tab para navegar na página.

Usar um estilo de foco melhora a experiência do usuário, especialmente útil para usuários 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 que o padrão, e a borda também é sutilmente alterada. Isso permite que o usuário saiba que o botão está agora em foco e receberá quaisquer pressionamentos de tecla relevantes.

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

.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, veja 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 foco quanto 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 nosso botão ficará agora com este CSS aplicado:

Ao passar o mouse:

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 para 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á em Configurações » Temas » Estilos do Botão e use a configuração Tamanho para alternar entre Pequeno, Médio e Grande. Isso é suficiente para a maioria dos sites e funciona no WPForms Lite também.

Se você precisar de um tamanho de texto exato ou valores de preenchimento específicos, precisará 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 ele seja exibido no centro?

O alinhamento do botão ainda não está disponível no construtor de formulários, então você precisará de um pequeno trecho de CSS para isso. Por padrão, os botões de envio do WPForms são alinhados à esquerda da página. Para centralizar 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 em seu site. Se você quiser aplicar o estilo em um formulário específico, precisará 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 você quiser que o botão seja exibido em largura total, use a propriedade CSS width: 100%. Aqui está uma versão atualizada do trecho acima.

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

Exibição do botão em largura total.

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

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

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

Posso estilizar o botão de envio no Divi?

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

Defina seus estilos de botão em Configurações » Temas no construtor de formulários, e eles serão aplicados ao seu formulário na página Divi. Isso funciona se você incorporar seu formulário com o módulo WPForms ou o shortcode. Para mais detalhes, veja nosso guia sobre adicionar WPForms a uma página Divi.

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

Ocultar o botão de envio é particularmente útil se você estiver usando o addon de Cálculos para criar calculadoras em seu site. Para ocultar o botão de envio do seu formulário, você precisará adicionar um trecho de CSS personalizado ao seu site. O trecho de código está disponível na biblioteca de trechos de código do WPForms.

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

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

Em seguida, você gostaria de estilizar o restante do seu formulário para combinar? Confira nosso guia completo sobre estilização de seus formulários para ver todas as opções disponíveis no construtor de formulários.