CSS Formulário | WordPress.org Brasil

Resolvido ddegues
(@ddegues)

8 anos, 11 meses atrás
Boa tarde,

Gostaria de pedir uma luz para um problema que já estou a dias tentando resolver e não consigo.

Criei um modelo de formulário para ser aplicado a uma página no wordpress.
Como o WordPress aplicava as configuraões do sytle.css por cima desse meu modelo, criei um arquivo chamado forms.css e defini as configurações que cada campo do formulário deveria possuir.
Após testar, descobri que somente o IE não puxava as configurações do meu arquivo forms.css e aplicava sobre os campos as seguintes configurações do arquivo style.css do WordPress:
```
.contato label {
	display:block;
	margin-bottom:2px !important;
	font:14px Tahoma, Geneva, sans-serif;
	color:#333;
}
.contato input {
	background:url(images/backgrounds/input.gif) no-repeat;
	border:none;
	font:12px Tahoma, Geneva, sans-serif;
	padding:13px;
	width:326px;
}
```
Para contar esse problema, criei no meu arquivo forms.css chamadas com os mesmos nomes e apliquei as seguintes configurações:
```
.contato input {
    background: none;

}

.contato label {
	display:flex;
}
```
Após testar em todos os 3 navegadores, todos os estilos funcionaram perfeitamente.

Porém, nesse momento começou a minha principal dor de cabeça.
Quando mandei publicar a página e abri o formulário nos navegadores, novamente ele ignorou os estilos que apliquei e o meu arquivo forms.css, e aplicou em todos os campos do meu formulário os estilos do arquivo style.css e desconfigurou todo o meu arquivo.
Se eu recoloco a página como rascunho, ele volta a puxar os estilos do meu arquivo forms.css.

Sinceramente não sei mais o que pode ser e estou apelando para a ajuda do pessoal aqui do fórum.

Desde já agradeço.

Um abraço,

Daniel.

Visualizando 12 respostas - 1 até 12 (de um total de 12)

Moderador Míriam de Paula
(@miriamdepaula)

8 anos, 11 meses atrás

Olá!

Percebi que você está usando algumas propriedades de CSS3 e o IE pode ter algum problema pra renderizar isso.
Dá uma olhada nesse “display: flex” por exemplo
http://www.w3schools.com/cssref/pr_class_display.asp

Tenta usar o “modernizr” ou outro recurso desse tipo, através do uso de Conditional Comments para o IE…

http://modernizr.com/docs/
http://www.quirksmode.org/css/condcom.html

Criador do tópico ddegues
(@ddegues)

8 anos, 11 meses atrás

Oi Miriam,

muito obrigado pela disponibilidade em me ajudar.

Pelo que entendi a versão do CSS3 pode não ser interpretada totalmente pelo IE, certo?

Mas como esse problema que relatei no final está ocorrendo com os 3 navegadores (IE, Chrome e Firefox), você acha que essa mesma questão do display:flex pode estar causando esse problema nos demais navegadores além do IE?

Mais uma vez, muito obrigado.

Daniel.

Moderador Míriam de Paula
(@miriamdepaula)

8 anos, 11 meses atrás

Eu acabei nem pedindo o link do site pra eu checar… E o que pode estar ocorrendo também, é que talvez você tenha colocado o CSS acima da função wp_head(). Se foi isso, o CSS do tema vai vir depois do CSS do form…

Pra todos os navegadores entenderem as alterações do form, o CSS dele tem que vir depois do CSS do tema.

Criador do tópico ddegues
(@ddegues)

8 anos, 11 meses atrás

Oi Miriam,

Olhei o código e não encontrei essa função.

A página está em modo rascunho, mas vou publicar temporariamente para que possa dar uma olhada.

Segue o link: http://www.colegioanchieta.g12.br/inscricao-vi-mostra-cientifica/

O que está me deixando mais intrigado é o porque estar sobescrevendo o css somente quando a página é publicada, enquanto que no modo rascunho os estilos são carregados corretamente.

Mais uma vez muito obrigado pela ajuda.

Daniel.
Moderador Míriam de Paula
(@miriamdepaula)

8 anos, 11 meses atrás
Já achei o problema.

Você colocou o link do CSS forms.css de forma errada e no local errado.

CSS deve ser colocado no topo do site, antes da tag <body> e você colocou depois. NUNCA nenhum navegador vai ler esse CSS e ainda mais com o link errado também…

<link rel="stylesheet" type="text/css" href="wp-content/themes/colegio/forms.css" />

A forma correta de se adicionar CSS aos temas é assim:
1) Remova o código anterior do seu tema (código que vc usou acima)
2) Abra o arquivo functions.php do seu tema e coloque o seguinte código:
```
function theme_custom_form_styles() {
	wp_enqueue_style( 'form-styles', get_template_directory_uri() . '/forms.css' ); 

}

add_action( 'wp_enqueue_scripts', 'theme_custom_form_styles' );
```
https://codex.wordpress.org/Function_Reference/wp_enqueue_style

Esta é a forma correta, mas se por ventura, você quiser incluir diretamente no arquivo header.php, tudo bem. MAS, lembre-se de colocar o código abaixo da função wp_head() sempre!
Neste caso, ficaria assim:

<link rel="stylesheet" type="text/css" href="<?php get_template_directory_uri()?>/forms.css" />

https://codex.wordpress.org/Function_Reference/get_template_directory_uri
Criador do tópico ddegues
(@ddegues)

8 anos, 11 meses atrás

Oi Miriam,

Você tem razão, o código estava informado errado, mas inserindo direto na página ele não funcionou em nenhuma posição, acho que pode ser pelo fato de o arquivo ter sido construído sem as tags head e body, poderia ser isso?

Mas se inserir o código que me passou no arquivo function.php, o formulário de inscrição voltou a funcionar e puxar os estilos do arquivo forms.css, mas afetou os campos do formulário de contato: http://www.colegioanchieta.g12.br/contato/

Os 3 primeiros campos perderam os seus estilos que são carregados pelo style.css. No WordPress não é possível ter um estilo específico para cada formulário?

Muito obrigado,

Daniel.

Moderador Míriam de Paula
(@miriamdepaula)

8 anos, 11 meses atrás

Se você quer que o CSS do formulário em questão, não afete outros formulários, você precisa identificar por ID.

Aplique uma ID única ao formulário em questão e use no seu CSS. Assim, ele só funcionará para o formulário cujo ID confere.

Entendeu?

form#MeuForm { propriedades somente pro meu form ID=MeuForm }

Criador do tópico ddegues
(@ddegues)

8 anos, 11 meses atrás

Não entendi muito bem,

No arquivo forms.css eu tenho digamos n id’s com estilos, se eu não quiser que ele afete o formulário de contatos, preciso criar um campo nele com essa identificação única e aplicar na página de inscrição, seria isso?

Eu crio essa identificação no topo do arquivo forms.css e puxo ele no formulário de inscrição?

Tipo isso: <form id=”MeuForm” name=”faleconosco” method=”post” action=”#” enctype=”multipart/form-data”>
Moderador Míriam de Paula
(@miriamdepaula)

8 anos, 11 meses atrás
Vamos exemplificar pra ficar mais fácil o entendimento:

Você tem 2 forms, certo?
No formulário de inscrição, você dá um ID pra ele:

<form id="forminscricao" ...>

No formulário de contato, você dá um ID diferente pra ele:

<form id="formcontato" ...>

No seu CSS, você identifica as coisas usando o ID do formulário que quer modificar:
```
#forminscricao .input{
   float:left;
   width:500px;
   position:relative;
   left:0%;
   top:0%;
   margin-left:-150px;
   background-color:none;
}
```
Este código CSS só vai afetar o formulário, cujo ID é “forminscricao”.
```
#formcontato input {
  width:200px
}
```
Este código só vai afetar o formulário, cujo ID é “formcontato”.

Entendeu agora? 🙂
Criador do tópico ddegues
(@ddegues)

8 anos, 11 meses atrás

Oi Miriam,

Uhuu, funcionou agora, a única adaptação que precisei fazer foi de colocar o nome invertido como você tinha colocado, mas isso foi por causa das div’s que estão um nível acima no código.

Agora a única coisa que “estagou” e estou tentando ajustar é o botão de Enviar no final do formulário que agora ficou invisíveis…hehehe

Nesse caso é só aplicar a mesma lógica, certo?

Mais uma vez muito obrigado pela força.

Daniel.

Moderador Míriam de Paula
(@miriamdepaula)

8 anos, 11 meses atrás

Yes! 😉

Criador do tópico ddegues
(@ddegues)

8 anos, 11 meses atrás

Uhuuu, funcionou.

Agora está tudo perfeito e funcionando como deveria. 😛

Muito obrigado Miriam.

Um abraço,

Daniel.

Visualizando 12 respostas - 1 até 12 (de um total de 12)

O tópico ‘CSS Formulário’ está fechado para novas respostas.

Visualizações