### [Como Adicionar Estilos CSS Personalizados para WPForms](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)
**Publicado:** 9 de outubro de 2019
**Autor:** Equipe Editorial
**Resumo:** Este tutorial mostrará como adicionar CSS ao seu site para personalizar a aparência dos seus formulários e campos do WPForms.
**Conteúdo:**
Gostaria de adicionar estilos CSS personalizados ao seu site? Este tutorial lhe dará várias opções sobre como adicionar esses trechos ao seu site com instruções passo a passo para cada maneira opcional que você escolher para adicionar seu CSS.
Com este guia útil, você poderá escolher facilmente a maneira como deseja adicionar os trechos ao seu site. Depois de selecionar seu método de implementação, você pode começar a explorar a documentação do desenvolvedor para escolher quais trechos de CSS você gostaria de começar a adicionar ao seu site!
Para dar uma olhada na variedade de todos os trechos disponíveis, [explore nossa documentação do desenvolvedor](https://wpforms.com/developers/ "Documentação do Desenvolvedor WPForms").
Por favor, veja nosso tutorial em vídeo para uma visão mais prática de como adicionar trechos de CSS personalizados ao seu site.
## Opções de Implementação
CSS é uma ferramenta poderosa para estilizar seu site, bem como seus formulários. Existem 3 abordagens principais para adicionar CSS personalizado ao seu site.
#### Usando o plugin WPCode (recomendado)
Usar o plugin WPCode é super rápido e fácil para adicionar trechos de CSS ao seu site.
Apenas uma das muitas razões pelas quais recomendamos fortemente o uso deste plugin para adicionar trechos personalizados ao seu site é que ele possui uma verificação integrada antes de salvar seu trecho. Se um ponto e vírgula for perdido ou um colchete extra for adicionado, o trecho não será salvo. Isso evita que quaisquer problemas ocorram em seu site devido a um trecho de CSS copiado e colado incorretamente. E sim, mesmo com a versão gratuita, você receberá esta auditoria extra antes que seu trecho seja ativado.
Para saber mais sobre este plugin, [verifique o site para mais informações, incluindo documentação dedicada](https://wpcode.com/ "Inserir Cabeçalhos e Rodapés – Trechos de Código por WPCode").
Depois que o plugin for instalado, navegue até o menu **Code Snippets** no menu do lado esquerdo do seu painel do WordPress e selecione **+ Add Snippet**. Em seguida, simplesmente clique em **Add Your Custom Code (New Snippet)**, depois clique no botão azul **Use Snippet** para criar um novo trecho de CSS.
Quando sua nova tela de trecho aparecer, dê um nome ao trecho que faça sentido para você, para que você e os administradores do seu site entendam seu propósito. No menu suspenso **Code Type**, selecione **CSS**, pois adicionaremos apenas CSS a este trecho.
Na seção **Code Preview**, adicione seu CSS. Aqui está um exemplo para usar para fins desta documentação.
```
/* escreva seu código CSS aqui */
ul#wpforms-999-field_27 li label,
ul#wpforms-999-field_26 li label {
padding: 10px;
transition: all ease 0.3s;
background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
background-size: 200% 100%;
background-position: left bottom;
color: white;
}
ul#wpforms-999-field_27 li.wpforms-selected label,
ul#wpforms-999-field_27 li label:hover,
ul#wpforms-999-field_26 li.wpforms-selected label,
ul#wpforms-999-field_26 li label:hover {
cursor: pointer;
border-radius: 2px;
background-position: right top;
}
ul#wpforms-999-field_27 li input,
ul#wpforms-999-field_26 li input {
display: none;
}
ul#wpforms-999-field_27 li,
ul#wpforms-999-field_26 li {
float: left;
width: auto;
display: inline-block;
padding: 10px 10px 10px 0!important;
}
```
Em seguida, você verá a seção **Insertion**. Como estamos adicionando CSS, selecionaremos **Auto-Insert** para o **Insert Method** e **Site Wide Header** para o **Location**.
Depois de adicionar seu trecho, clique em **Save Snippet**. Isso salvará o trecho, mas não o ativará automaticamente. Depois de salvar inicialmente, você notará que o status do trecho está definido como **Inactive** por padrão. Simplesmente alterne o interruptor de **Inactive** para **Active** e clique em **Update** para definir o trecho como **Active**.
#### Usando CSS Hero
Se você preferir não tocar em nenhum código, o WPForms tem um tutorial completo sobre como usar o CSS Hero. Para saber mais sobre isso, [siga este tutorial](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/ "Como Personalizar WPForms com CSS Hero (Sem HTML ou CSS)").
#### Criando um tema filho
Temas filhos são recomendados para desenvolvimento mais avançado. Você pode descobrir como criar um tema filho [seguindo este tutorial](http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/ "Como Criar um Tema Filho do WordPress (Vídeo)
").
Em cada tema filho está o arquivo **style.css** necessário, neste arquivo é onde você adicionaria seu CSS personalizado.
#### Usando o Personalizador do WordPress
Desde a versão 4.5 do WordPress, o WordPress nos deu uma ferramenta integrada para adicionar quaisquer estilos CSS personalizados ao seu tema ou a qualquer plugin que você tenha instalado, o que o torna uma escolha popular para adicionar seu CSS.
Para saber mais sobre o Personalizador do WordPress, [verifique a documentação deles](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "Como Adicionar Facilmente CSS Personalizado ao Seu Site WordPress").
Você pode encontrar o personalizador do WordPress navegando em **Appearance** » **Customize** » **Additional CSS**.
Lembre-se apenas de que, após adicionar seu CSS, clique no botão **Publish** para salvar suas alterações. Desde que o tema permaneça ativo, seu CSS personalizado será aplicado.
Se você desativar seu tema, seu CSS personalizado será removido, pois qualquer CSS personalizado adicionado aqui está vinculado ao próprio tema.
## Notas
Ao adicionar qualquer tipo de código personalizado ao seu site, é importante garantir que você proteja seu código. Portanto, não importa qual abordagem você escolha, é uma boa ideia sempre [fazer backup do seu site primeiro](http://www.wpbeginner.com/plugins/7-best-wordpress-backup-plugins-compared-pros-and-cons/ "7 Melhores Plugins de Backup do WordPress Comparados"). Dessa forma, você terá acesso a versões anteriores dos arquivos do site e do banco de dados, se necessário.
## Links Adicionais
Para informações adicionais sobre CSS personalizado para WPForms, consulte estes links de referência:
- [Documentação de estilização para WPForms](https://wpforms.com/categories/docs/styling/ "Documentação de estilização para WPForms")
- [Uma lista completa de documentos para estilizar WPForms usando CSS](https://wpforms.com/developers/tags/css/ "Uma lista completa de documentos para estilizar WPForms usando CSS")
## FAQ
#### P: Como isso me ajuda a adicionar CSS personalizado para WPForms?
**R:** Este tutorial não é especificamente para CSS personalizado do WPForms, mas para **qualquer** CSS personalizado que você possa querer adicionar ao seu site.
Simplesmente encontre qual opção acima é mais fácil para você adicionar quaisquer trechos de código, incluindo os trechos de código do WPForms mencionados nas seções [Tutorials](https://wpforms.com/developers/categories/tutorials/ "Tutoriais") e [Snippets](https://wpforms.com/developers/categories/snippets/ "Trechos").
**Categorias:** Primeiros Passos
**Tags:** CSS
---