Adicionar Ícones aos Seus Formulários WordPress

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

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

---

Adicionar 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 os seus ícones funcionam como uma fonte e adotarão a mesma cor e tamanho das outras fontes no seu site.

Existem muitas formas 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, consulte o guia da WPBeginner para adicionar fontes de ícones ao WordPress.

Para simplificar, usaremos o plugin Better Font Awesome. É um plugin gratuito do WordPress que adiciona os recursos necessários para usar ícones do Font Awesome no seu site.

Quando estiver pronto, prossiga e instale o plugin. Pode avançar para o próximo passo do tutorial assim que ele for ativado.

Escolher um Ícone do Font Awesome

Assim que tiver a capacidade de usar o Font Awesome no seu site, pode começar a procurar os ícones que gostaria de usar nos seus formulários.

Na página do ícone que 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 gostaria de usar nos seus formulários, pois precisará de o incluir nos seus trechos de CSS personalizados mais adiante neste tutorial.

Adicionar Ícones aos Seus Formulários

Existem várias formas de incorporar ícones nos seus formulários. Cobrimos vários exemplos abaixo, mas há algumas coisas a notar antes de mergulhar neles.

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

Adicionalmente, a família de fontes que precisa de usar nos seus trechos de CSS depende se usa um ícone gratuito ou pago do Font Awesome.

Exibir Ícones em Frente aos Títulos dos Formulários

Para adicionar um ícone em frente ao título do seu formulário, precisa de criar um CSS personalizado que insira o ícone para si. Este CSS será um pouco diferente dependendo se pretende que o ícone apareça em frente aos títulos de todos os WPForms no seu site, ou apenas de um formulário específico.

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

O CSS para exibir um ícone em frente a todos os títulos de formulários é simples porque é mais geral. Aqui está o trecho de CSS de que necessitará:

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

Pode substituir este valor pelo unicode de qualquer outro ícone da biblioteca da Font Awesome.

Este CSS também inclui uma margem direita de 10 píxeis. 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 parece com isto:

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

Para o fazer, precisará de encontrar o número de ID único para o formulário cujo título pretende adicionar um ícone.

Pode encontrar um ID de formulário no seu shortcode, que pode ver indo a WPForms » Todos os Formulários e olhando na coluna Shortcode.

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

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

Exibir Ícones em Frente aos Rótulos dos Campos

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

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

Exibir um ícone à frente de todos os rótulos de campo no seu site requer um trecho de CSS muito semelhante ao descrito acima para os 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 deseja usar. Você também pode ajustar o tamanho da margem para atender às suas preferências.

No frontend, os ícones dos rótulos dos seus campos devem parecer algo assim:

Adicionar 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 direcionar 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 direcionar o título de um único formulário, 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 pré-visualização do formulário. Em seguida, clique com o botão direito do mouse no campo que você deseja direcionar e escolha Inspecionar.

Sua tela deve dividir-se para mostrar o código-fonte da página. Certifique-se de que todo o campo que você deseja direcionar esteja realçado (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 único campo, sem alterar nenhum outro rótulo de campo (neste formulário ou em qualquer outro).

Mostrar Í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 Font Awesome que você deseja usar.

O nosso trecho de exemplo 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 os seus próprios IDs de formulário e campo.

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

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

Finalmente, se quiser alterar a aparência dos seus ícones, pode ajustar o 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, o nosso exemplo parece-se com isto:

Exibir Ícones em Campos HTML

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

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

[icon name="paper-plane"]

Para ajustar isto para um ícone diferente, basta 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 deseja usar.

No frontend, um ícone num campo HTML pode parecer algo como isto:

Num campo HTML, também pode adicionar texto ou HTML adicional em torno do shortcode do ícone, se desejar. Para mais detalhes, consulte o nosso tutorial completo sobre o campo HTML.

Adicionar Ícones a Botões de Envio

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

Aqui está o trecho de que 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 */
}

Tal como com os outros exemplos neste artigo, certifique-se de substituir o unicode pelo seu ícone desejado e alterar a margem, se quiser.

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

Colocar Ícones no Lado Direito

Se desejar colocar ícones no lado direito de um item em vez de no lado esquerdo, pode usar :after em vez de :before. Por exemplo, para colocar o ícone do avião de papel no lado direito do botão de envio, 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:

É tudo! Agora pode adicionar ícones a vários elementos nos seus formulários.

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