Adicionando ícones aos seus formulários do WordPress

Gostaria de adicionar ícones aos seus formulários? Os ícones podem ser uma óptima forma de reforçar visualmente o objetivo de um campo e podem ajudar os seus formulários a parecerem mais personalizados.

Este tutorial aborda a forma de adicionar ícones do Font Awesome aos seus formulários.

---

Adicionar o Font Awesome ao seu site

O primeiro passo é adicionar a biblioteca de ícones do Font Awesome ao seu site. O Font Awesome é uma óptima opção para adicionar ícones aos seus formulários porque os ícones funcionam como um tipo de letra e adoptam a mesma cor e tamanho que os outros tipos de letra do seu site.

Existem muitas formas de adicionar a biblioteca de ícones Font Awesome ao seu site, desde adicionar código ao cabeçalho do seu site até instalar um plug-in. Para obter detalhes sobre cada opção, consulte o guia do WPBeginner para adicionar fontes de ícones ao WordPress.

Para manter as coisas simples, vamos utilizar o plugin Better Font Awesome. Trata-se de um plugin WordPress gratuito que adiciona ao seu sítio os recursos necessários para utilizar os ícones Font Awesome.

Quando estiver pronto, vá em frente e instale o plugin. Pode avançar para o passo seguinte do tutorial assim que estiver ativado.

Escolher um ícone do Font Awesome

Assim que tiver a capacidade de utilizar o Font Awesome no seu sítio, pode começar a procurar o(s) ícone(s) que gostaria de utilizar no(s) seu(s) formulário(s).

Na página do ícone que gostaria de utilizar, procure o valor unicode apresentado imediatamente abaixo do nome do ícone.

Na imagem acima, o unicode é f1d8.

Tome nota do unicode de cada ícone que gostaria de utilizar nos seus formulários, uma vez que terá de o incluir nos seus snippets de CSS personalizados mais tarde neste tutorial.

Adicionar ícones aos seus formulários

Existem várias formas de incorporar ícones nos seus formulários. Abordámos vários exemplos abaixo, mas há alguns aspectos a ter em conta antes de os explorar.

Em primeiro lugar, quase todos os exemplos abaixo requerem a adição de CSS personalizado ao seu site WordPress. Para obter detalhes sobre como fazer isso, consulte o guia passo a passo do WPBeginner para adicionar CSS personalizado ao seu site.

Além disso, a família de fontes que precisa de utilizar nos seus snippets CSS depende do facto de utilizar um ícone gratuito ou pago do Font Awesome.

Exibição de ícones na frente de títulos de formulários

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

Adicionar um ícone a todos os títulos de formulários

O CSS para apresentar um ícone à frente de todos os títulos de formulários é simples porque é mais geral. Eis o fragmento de CSS de que necessita:

.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 snippet que terá de personalizar. Primeiro, note que o unicode do Font Awesome para o ícone que escolhemos está incluído após content:.

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 pixéis. Sem isto, não haveria espaço entre o ícone e o título do formulário. Pode personalizar este número para o tamanho que desejar.

No frontend, este exemplo tem o seguinte aspeto:

Adicionar 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 do seu site, pode utilizar CSS mais específico para direcionar um único formulário.

Para o fazer, tem de encontrar o número de identificação único do formulário cujo título pretende adicionar um ícone.

Pode encontrar o ID de um formulário no seu shortcode, que pode ver indo a WPForms " All Forms e procurando na coluna Shortcode.

Utilizaremos o número de ID 30 para tornar o nosso CSS mais específico. Aqui está o CSS que apenas adicionará um ícone à frente 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 igual ao snippet que adicionará ícones a todos os títulos de formulários no seu site. A única diferença é que adicionámos #wpforms-form-30Assim, agora este estilo aplicar-se-á apenas a este formulário.

Para o seu próprio formulário, basta alterar o número de ID do formulário e substituir o unicode pelo ícone que pretende apresentar, tal como descrito na secção acima.

Exibição de ícones na frente de etiquetas de campo

Pode adicionar um ícone à frente de cada uma das etiquetas de campo nos seus formulários utilizando um snippet CSS personalizável. O código que tem de adicionar muda ligeiramente consoante pretenda utilizar um ícone para todas as etiquetas de campo no seu site ou se pretender apresentar um ícone em frente de uma etiqueta de campo específica.

Adicionar um ícone a todas as etiquetas de campo

A apresentação de um ícone à frente de todas as etiquetas de campo no seu site requer um snippet CSS muito semelhante ao descrito acima para títulos de formulários:

.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 que substitui o unicode no snippet acima pelo do ícone que pretende utilizar. Também pode ajustar o tamanho da margem de acordo com as suas preferências.

No frontend, os ícones das etiquetas dos campos devem ter o seguinte aspeto:

Adicionar um ícone à etiqueta de um campo específico

Pode não querer que o mesmo ícone apareça junto a todos os campos. Para visar apenas um único campo, o snippet CSS deve ser mais específico, incluindo o ID exclusivo do campo cujo rótulo você deseja adicionar um ícone.

Esta abordagem é muito semelhante à seleção do título de um único formulário, conforme descrito acima.

Para encontrar a ID do campo que precisa de utilizar no snippet, abra o seu formulário no frontend numa página publicada ou utilizando a pré-visualização do formulário. Em seguida, clique com o botão direito do rato no campo que pretende segmentar e selecione Inspecionar.

O seu ecrã deve dividir-se para mostrar o código fonte da página. Certifique-se de que todo o campo que pretende selecionar está realçado (incluindo a etiqueta e a caixa de introdução) e, em seguida, procure o ID.

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

Aqui está o snippet 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 verificar a primeira linha deste excerto de CSS, irá reparar que adicionámos um #seguido do ID que acabámos de encontrar. Agora, o nosso ícone só será adicionado a este único campo, sem alterar quaisquer outras etiquetas de campo (neste formulário ou em qualquer outro).

Mostrar ícones nos campos de entrada

Em vez de adicionar um ícone à etiqueta de um campo, pode apresentá-lo no próprio campo. O trecho de código que você precisará usar para fazer isso é um pouco 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 snippet que precisa de personalizar são as seguintes:

• Alterar o número em #wpforms-form-9 para o ID do formulário ao qual pretende adicionar o(s) seu(s) ícone(s). Pode encontrar este ID no código curto do seu formulário, conforme descrito anteriormente neste tutorial.
• Substituir wpforms-9-field_0-container e os outros IDs de campo no snippet acima com os IDs de campo do seu próprio formulário. Deve utilizar o ID de campo completo, tal como descrito na secção secção anterior deste artigo.
• Substitua os unicodes no snippet acima (f007, f0e0e f086) para os unicodes dos ícones Font Awesome que pretende utilizar.

O nosso exemplo de snippet adiciona ícones a três campos do nosso formulário. Pode adicionar ícones a mais campos, repetindo a linha que diz #wpforms-9-field_0-container .wpforms-field-label:before, e adicionando o seu próprio formulário e IDs de campo.

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

Também pode remover estas linhas para adicionar ícones a menos campos do seu formulário.

Finalmente, se quiser alterar o aspeto dos seus ícones, pode ajustar o seu posicionamento, cor, tamanho e opacidade, alterando os valores nas linhas seguintes:

posição: absoluta; 
esquerda: 10px; 
top: 32px; 
z-index: 99999; 
color: #757575; 
tamanho da fonte: 17px; 
opacidade: 0,3;

No frontend, o nosso exemplo tem o seguinte aspeto:

Exibição de ícones em campos HTML

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

Tudo o que precisa é de adicionar um código curto simples no campo HTML. A título de exemplo, eis o shortcode necessário para o ícone do avião de papel que utilizámos em vários dos nossos exemplos acima:

[icon name="paper-plane"]

Para ajustar isto para um ícone diferente, só precisa de copiar o nome da página do ícone específico no Font Awesome. O nome do ícone aparecerá em texto grande perto do topo da página.

Em seguida, substituir paper-plane no código curto acima com o nome do ícone que pretende utilizar.

No frontend, um ícone num campo HTML pode ter o seguinte aspeto:

Num campo HTML, também pode adicionar texto adicional ou HTML à volta do código curto do ícone, se desejar. Para mais pormenores, consulte o nosso tutorial completo sobre o campo HTML.

Adicionar ícones aos botões de envio

O último exemplo que vamos partilhar neste tutorial é como adicionar um ícone ao botão Submeter dos seus formulários.

Aqui está o snippet de que precisa:

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

Tal como nos outros exemplos deste artigo, certifique-se de que substitui o unicode pelo ícone pretendido e de que altera a margem, se o desejar.

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

Colocar ícones no lado direito

Se pretender colocar ícones no lado direito de um item em vez de no lado esquerdo, pode utilizar :after em vez de :before. Por exemplo, para colocar o ícone do avião de papel no lado direito do botão de submissão, pode utilizar o seguinte fragmento 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 snippet acima colocará o ícone à direita do seu botão de envio:

É isso mesmo! Agora pode adicionar ícones a vários elementos dos seus formulários.

Gostaria de personalizar o aspeto dos seus formulários utilizando uma imagem de fundo? Veja o nosso tutorial sobre como adicionar imagens de fundo aos seus formulários com CSS.