Como ajustar o Contact Form 7 do CSS

Escrito por jason whitaker | Traduzido por wanderson david
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como ajustar o Contact Form 7 do CSS
Personalize o estilo dos campos Contact Form 7 utilizando o CSS (Comstock/Comstock/Getty Images)

O Contact Form 7 é um plugin da plataforma de publicação WordPress que permite aos usuários criar rapidamente formulários de contato personalizados. Embora os formulários sejam fáceis de se criar e implementar, seus campos são minimamente personalizados, o que permite a integração com qualquer site. Crie seus estilos personalizados e implemente-os nos campos dos formulários gerados por esse plugin.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Acesso ao "stylesheet" do WordPress

Lista completaMinimizar

Instruções

  1. 1

    Abra o stylesheet do tema do seu WordPress e role até o fim. Crie uma área comentada para que possa localizar seu código facilmente. Exemplo:

    / Aqui é onde meu código CF7 personalizado começa /

  2. 2

    Personalize os estilos dos seus campos e áreas de texto. Para isso, crie uma entrada em seu stylesheet. Exemplo:

    .wpcf7 input[type="texto"], .wpcf7 areadotexto { }

    Adicione bordas personalizadas (borders), planos de fundo (backgrounds), espaçamento (padding) e tamanhos dos elementos do texto. Exemplos:

    .wpcf7 input[type="texto"] { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #8E9BA9; padding: 5px; width:200px; }

  3. 3

    Personalize os estilos dos menus "drop-down" e de seleção. Para isso, crie uma entrada em seu stylesheet. Exemplo:

    .wpcf7 input[type="select"] {

    }

    Personalize os campos de seleção de forma parecida com os campos de texto. Os campos de seleção não são tão amplos quanto os campos de texto, então adicione alguns pixels extra para sua largura (width). Exemplo:

    .wpcf7 input[type="selecionado"] { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #8E9BA9; padding: 5px; width:210px; }

  4. 4

    Personalize o estilo do seu botão de envio. Para isso, crie uma entrada em seu stylesheet. Exemplo:

    .wpcf7 input[type="envio"] {

    }

    Personalize o botão de envio para complementar o visual e aparência do seu site (ele deve continuar se destacando do plano de fundo). Exemplo de um botão de envio vermelho:

    .wpcf7 input[type="envio"] { background-color: #990000; border: 4px solid #B34040; color: #FFFFFF; }

  5. 5

    Salve as mudanças no seu stylesheet e transfira os dados para a pasta tema.

Dicas & Advertências

  • Experimente vários estilos e cores de borda diferentes.
  • Faça uma nova verificação dos formulários no Firefox, Safari e Internet Explorer, pois cada navegador fornece campos de entrada um pouco diferentes.
  • Adicione o CSS personalizado ao stylesheet do seu tema e não no stylesheet do plugin. Se você fizer isso, quando o plugin for atualizado, a personalização dos arquivos em sua pasta poderão ser perdidos.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível