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

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 do WordPress

Desde a versão 4.5 do WordPress, o WordPress nos oferece 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, consulte a documentação deles.

Você pode encontrar o personalizador do WordPress navegando em Aparência » Personalizar » CSS Adicional.

Apenas lembre-se de clicar no botão Publicar para salvar suas alterações depois de adicionar seu CSS. Enquanto o tema permanecer ativo, seu CSS personalizado será aplicado.

Notas

Ao adicionar qualquer tipo de código personalizado ao seu site, é importante garantir que você proteja seu código. Portanto, não importa a abordagem que você escolher, é uma boa ideia sempre fazer backup do seu site primeiro. 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 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.