Como Adicionar Estilos CSS Personalizados para WPForms

Gostaria de adicionar estilos CSS personalizados ao seu site? Este tutorial oferecerá 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.

Com este guia útil, você poderá escolher facilmente a maneira como deseja adicionar os trechos ao seu site. Assim que você selecionar seu método de implementação, poderá 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.

Consulte nosso tutorial em vídeo para uma visualizaçã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 um dos muitos motivos pelos 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 esquecido 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á essa auditoria extra antes que seu trecho seja ativado.

Após a instalação do plugin, navegue até o menu Code Snippets no menu lateral esquerdo do seu painel do WordPress e selecione + Add Snippet. Em seguida, simplesmente clique em Add Your Custom Code (New Snippet) e, em seguida, 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.

/* write your CSS code here */
    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 Salvar Trecho. Isso salvará o trecho, mas não o ativará automaticamente. Assim que você salvar inicialmente, notará que o status do trecho é definido como Inativo por padrão. Simplesmente alterne o interruptor de Inativo para Ativo e clique em Atualizar para definir o trecho como Ativo.

Usando CSS Hero

Se 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.

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.

Cada tema filho possui o arquivo style.css obrigatório, neste arquivo é onde você adicionaria seu CSS personalizado.

Usando o Personalizador ou Editor de Site do WordPress

O WordPress inclui uma ferramenta integrada para adicionar CSS personalizado ao seu tema ou a qualquer plugin que você tenha instalado, o que o torna uma escolha popular. Onde você o encontrará depende do tipo de tema que você está usando.

Para saber mais sobre o Personalizador do WordPress, consulte a documentação deles.

Em temas clássicos, navegue até Aparência » Personalizar » CSS adicional.

Em temas de blocos, o WordPress oculta o Personalizador. Vá para Aparência » Editor e abra Estilos para encontrar a opção CSS adicional. Se não conseguir encontrá-la, o guia do WordPress para aplicar CSS personalizado mostra onde ela fica na sua versão.

Apenas lembre-se de salvar suas alterações após adicionar seu CSS. Enquanto o tema permanecer ativo, seu CSS personalizado será aplicado.

Links Adicionais

Para informações adicionais sobre CSS personalizado para WPForms, consulte estes links de referência:

• Documentação de estilo para WPForms
• Uma lista completa de documentação para estilizar WPForms usando CSS

Perguntas Frequentes

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 Tutoriais e Snippets.