Adicionando Ícones aos Seus Formulários WordPress

Gostaria de adicionar ícones aos seus formulários? Ícones podem ser uma ótima maneira de reforçar visualmente o propósito de um campo e podem ajudar seus formulários a parecerem mais personalizados.

Este tutorial discutirá como adicionar ícones do Font Awesome aos seus formulários.

---

Adicionando Font Awesome ao seu site

O primeiro passo é adicionar a biblioteca de ícones do Font Awesome ao seu site. Font Awesome é uma ótima opção para adicionar ícones aos seus formulários porque seus ícones agem como uma fonte e adotam a mesma cor e tamanho das outras fontes em seu site.

Existem muitas maneiras de adicionar a biblioteca de ícones do Font Awesome ao seu site, desde adicionar código ao cabeçalho do seu site até instalar um plugin. Para detalhes sobre cada opção, confira o guia da WPBeginner para adicionar fontes de ícones ao WordPress.

Para manter as coisas simples, usaremos o plugin Better Font Awesome. É um plugin gratuito do WordPress que adiciona os recursos necessários para usar ícones do Font Awesome em seu site.

Quando estiver pronto, prossiga e instale o plugin. Você pode prosseguir para a próxima etapa do tutorial assim que ele for ativado.

Escolhendo um ícone do Font Awesome

Uma vez que você tenha a capacidade de usar o Font Awesome em seu site, você pode começar a procurar os ícones que gostaria de usar em seus formulários.

Na página do ícone que você gostaria de usar, procure o valor unicode exibido logo abaixo do nome do ícone.

Na imagem acima, o unicode é f1d8.

Anote o unicode de cada ícone que você gostaria de usar em seus formulários, pois você precisará incluí-lo em seus trechos de CSS personalizados mais adiante neste tutorial.

Adicionando ícones aos seus formulários

Existem várias maneiras de incorporar ícones em seus formulários. Cobrimos vários exemplos abaixo, mas há algumas coisas a serem observadas antes de mergulhar neles.

Primeiramente, quase todos os exemplos abaixo exigem que você adicione CSS personalizado ao seu site WordPress. Para detalhes sobre como fazer isso, por favor, confira o guia passo a passo da WPBeginner para adicionar CSS personalizado ao seu site.

Além disso, a família de fontes que você precisa usar em seus trechos de CSS depende se você usa um ícone gratuito ou pago do Font Awesome.

Exibindo Ícones Antes dos Títulos dos Formulários

Para adicionar um ícone antes do título do seu formulário, você precisa criar um CSS personalizado que inserirá o ícone para você. Este CSS será um pouco diferente, dependendo se você deseja que o ícone apareça antes dos títulos de todos os WPForms em seu site, ou apenas de um formulário específico.

Adicionando um Ícone a Todos os Títulos de Formulários

O CSS para exibir um ícone antes de todos os títulos de formulários é simples porque é mais geral. Aqui está o trecho de CSS que você precisará:

.wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

Existem algumas linhas neste trecho que você precisará personalizar. Primeiro, observe que o unicode do Font Awesome para o ícone que escolhemos está incluído após content:.

Você pode substituir este valor pelo unicode de qualquer outro ícone na biblioteca do Font Awesome.

Este CSS também inclui uma margem direita de 10 pixels. Sem isso, não haveria espaço entre o ícone e o título do formulário. Você pode personalizar este número para o tamanho que desejar.

No frontend, este exemplo se parece com isto:

Adicionando um Ícone ao Título de um Formulário Específico

Em vez de adicionar o mesmo ícone aos títulos de todos os formulários em seu site, você pode usar um CSS mais específico para direcionar um único formulário.

Para fazer isso, você precisará encontrar o número de ID exclusivo do formulário cujo título você deseja adicionar um ícone.

Você pode encontrar um ID de formulário em seu shortcode, que você pode visualizar indo para WPForms » Todos os Formulários e olhando na coluna Shortcode.

Usaremos o número de ID 30 para tornar nosso CSS mais específico. Aqui está o CSS que adicionará um ícone apenas antes do título do formulário identificado:

#wpforms-30 .wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

Este CSS é quase exatamente o mesmo que o trecho que adicionará ícones a todos os títulos de formulários em seu site. A única diferença é que adicionamos #wpforms-form-30, então agora este estilo se aplicará apenas a este formulário.

Para o seu próprio formulário, você só precisará alterar o número do ID do formulário e substituir o unicode do ícone que deseja destacar, conforme descrito na seção acima.

Exibindo Ícones Antes dos Rótulos dos Campos

Você pode adicionar um ícone antes de cada um dos rótulos dos campos em seus formulários usando um trecho de CSS personalizável. O código que você precisa adicionar mudará ligeiramente dependendo se você deseja usar um ícone para todos os rótulos de campos em seu site, ou se deseja exibir um ícone antes de um rótulo de campo específico.

Adicionando um Ícone a Todos os Rótulos de Campo

Exibir um ícone na frente de todos os rótulos de campo em seu site requer um trecho de CSS muito semelhante ao descrito acima para títulos de formulário:

.wpforms-form .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

Certifique-se de substituir o unicode no trecho acima pelo ícone que você deseja usar. Você também pode ajustar o tamanho da margem para se adequar às suas preferências.

No frontend, os ícones dos rótulos de campo devem se parecer com isto:

Adicionando um Ícone ao Rótulo de um Campo Específico

Você pode não querer que o mesmo ícone apareça ao lado de cada campo. Para segmentar apenas um campo, o trecho de CSS deve ser mais específico, incluindo o ID exclusivo do campo cujo rótulo você deseja adicionar um ícone.

Essa abordagem é muito semelhante a segmentar o título de um formulário específico, conforme descrito acima.

Para encontrar o ID do campo que você precisa usar no trecho, abra seu formulário no frontend, seja em uma página publicada ou usando a visualização do formulário. Em seguida, clique com o botão direito no campo que você deseja segmentar e escolha Inspecionar.

Sua tela deve se dividir para mostrar o código-fonte da página. Certifique-se de que todo o campo que você deseja segmentar esteja destacado (incluindo o rótulo e a caixa de entrada) e, em seguida, procure o ID.

Para o campo na imagem acima, o ID é wpforms-9-field_0-container.

Aqui está o trecho de CSS para adicionar um ícone ao rótulo de um campo específico:

.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

Se você observar a primeira linha deste trecho de CSS, notará que adicionamos um #, seguido pelo ID que acabamos de encontrar. Agora, nosso ícone será adicionado apenas a este campo, sem alterar nenhum outro rótulo de campo (neste ou em qualquer outro formulário).

Exibindo ícones em campos de entrada

Em vez de adicionar um ícone ao rótulo de um campo, você pode exibi-lo dentro do próprio campo. O trecho de código que você precisará usar para fazer isso é bem diferente dos outros neste tutorial, mas usa muitos dos mesmos elementos:

#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
	position: relative;
}

#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
	padding-left: 35px !important;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label {
	position: relative;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
	position: absolute;
	left: 10px;
	top: 32px;
	z-index: 99999;
	color: #757575;
	font-size: 17px;
	opacity: 0.3;
}

#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
	font-family: "Font Awesome 5 Free";
}

#wpforms-9-field_0-container .wpforms-field-label:before {
	content: '\f007';
}

#wpforms-9-field_1-container .wpforms-field-label:before {
	content: '\f0e0';
}

#wpforms-9-field_2-container .wpforms-field-label:before {
	content: '\f086';
}

As partes deste trecho que você precisará personalizar são as seguintes:

• Altere o número em #wpforms-form-9 para o ID do formulário ao qual você deseja adicionar seus ícones. Você pode encontrar este ID no shortcode do seu formulário, conforme descrito anteriormente neste tutorial.
• Substitua wpforms-9-field_0-container e os outros IDs de campo no trecho acima pelos IDs de campo do seu próprio formulário. Você deve usar o ID completo do campo, conforme descrito na seção anterior deste artigo.
• Substitua os unicodes no trecho acima (f007, f0e0 e f086) pelos unicodes dos ícones do Font Awesome que você deseja usar.

Nosso trecho de exemplo adiciona ícones a três campos em nosso formulário. Você pode adicionar ícones a mais campos repetindo a linha que diz #wpforms-9-field_0-container .wpforms-field-label:before, e adicionando seus próprios IDs de formulário e campo.

Em seguida, repita a última linha do trecho, substituindo seu próprio ID de campo pelo do exemplo.

Você também pode remover essas linhas para adicionar ícones a menos campos em seu formulário.

Finalmente, se você quiser alterar a aparência de seus ícones, pode ajustar seu posicionamento, cor, tamanho e opacidade alterando os valores nas seguintes linhas:

position: absolute; 
left: 10px; 
top: 32px; 
z-index: 99999; 
color: #757575; 
font-size: 17px; 
opacity: 0.3;

No frontend, nosso exemplo se parece com isto:

Exibindo Ícones em Campos HTML

Adicionar ícones a campos HTML é a opção mais simples e não requer CSS personalizado.

Tudo o que você precisará é adicionar um simples shortcode dentro do campo HTML. Como exemplo, aqui está o shortcode que precisaríamos para o ícone de avião de papel que usamos em vários de nossos exemplos acima:

[icon name="paper-plane"]

Para ajustar isso para um ícone diferente, você só precisaria copiar o nome da página do ícone específico no Font Awesome. O nome do ícone estará em texto grande perto do topo da página.

Em seguida, substitua paper-plane no shortcode acima pelo nome do ícone que você deseja usar.

No frontend, um ícone em um campo HTML pode parecer algo assim:

Em um campo HTML, você também pode adicionar texto ou HTML adicional ao redor do shortcode do ícone, se desejar. Para mais detalhes, veja nosso tutorial completo sobre o campo HTML.

Adicionando Ícones a Botões de Envio

O último exemplo que compartilharemos neste tutorial é como adicionar um ícone ao botão Enviar de seus formulários.

Aqui está o trecho que você precisará:

.wpforms-form button[type=submit]:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and button text */
}

Assim como nos outros exemplos deste artigo, certifique-se de substituir o unicode do seu ícone desejado e alterar a margem se quiser.

No frontend, o ícone do seu botão de envio ficará semelhante a este:

Posicionando ícones no lado direito

Se você quiser colocar ícones no lado direito de um item em vez do esquerdo, você pode usar :after no lugar de :before. Por exemplo, para colocar o ícone do avião de papel no lado direito do botão de envio, você pode usar o seguinte trecho de código:

.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}

O trecho acima colocará o ícone à direita do seu botão de envio:

É isso! Agora você pode adicionar ícones a vários elementos em seus formulários.

Gostaria de personalizar a aparência de seus formulários usando uma imagem de fundo? Confira nosso tutorial sobre como adicionar imagens de fundo aos seus formulários com CSS.