Criando layout com CSS para formulario do Contact Form no WordPress


Postado em 22 de setembro de 2011 por | Categorias: CSS | Tags: , | Sem comentários » | Comentar


Coloque o código abaixo no campo formulário do plug-in Contact Form do WordPress:

<div class="area_inicio_formulario"></div>
<div class="area_linha"></div>

<div class="area_titulo">Seu nome (obrigatório)</div>
<div class="area_campo"></div>

<div class="area_linha"></div>

<div class="area_titulo">Seu e-mail (obrigatório)</div>
<div class="area_campo">[email* your-email class:campo_nome]</div>

<div class="area_linha"></div>

<div class="area_titulo">Assunto</div>
<div class="area_campo"></div>

<div class="area_linha"></div>

<div class="area_titulo">Sua mensagem</div>
<div class="area_campo_texto">[textarea your-message class:campo_texto] </div>

<div class="area_linha"></div>

<div class="area_titulo"> </div>
<div class="area_campo">[submit class:campo_enviar "Enviar"]</div>

<div class="area_linha"></div>

No arquivo CSS do seu tema cololoque os códigos abaixo:

/*FORMULARIOS*/
.area_inicio_formulario{
    display: inline;
    float: left;
	height: 20px;
	widows: 100%;
	clear: both;
}
.area_titulo{
    display: inline;
    float: left;
    font-size: 12px;
    height: 40px;
    margin-left: 20px;
    margin-right: 10px;
    text-align: right;
    width: 170px;
}
.area_campo{
	float: left;
	display: inline;
	width: 190px;
	height: 40px;	
}
.area_campo_texto{
	float: left;
	display: inline;
	width: 190px;
	height: auto;	
}
.area_linha{
	clear: both;
	width: 100%;
	height:1px;
}
.campo_nome {
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #E6E6E6;
    font-size: 12px;
    height: 20px;
    padding: 2px 2px 2px 6px;
    width: 250px;
}
.campo_nome:focus {
	border:1px solid #999;
	background:#fff;
}
.campo_texto {
	border: #e6e6e6 1px solid;
	font-size: 12px;
	padding: 2px 2px 2px 6px;
	background: #F4F4F4;
	width:250px;
	height: 138px;
}
.campo_enviar {
	border: #e6e6e6 1px solid;
	font-size: 12px;
	font-weight:600;
	padding: 2px;
	 background-color: #787878;
	width:65px;
	margin-left: 196px;
	color: #FFFFFF;
}

Personalizar CSS para o contact-form-7


Postado em 28 de setembro de 2010 por | Categorias: CSS | Tags: | 10 Comentários » | Comentar


Veja os exemplos abaixo para personalizar os campos dos formulários do plugin Contact-Form-7. O item class é o nome do estilo que deve ser definido no arquivo style.css do tema ativo:

<p>Seu nome (obrigatório)<br />
  </p>

<p>Seu e-mail (obrigatório)<br />
 [email* your-email class:campo_nome] </p>

<p>Assunto<br />
  </p>

<p>Sua mensagem<br />
 [textarea your-message class:campo_texto] </p>

<p>[submit class:campo_enviar "Enviar"]</p>

Modelo do CSS que vai entrar no arquivo style.css do tema:

/** WP CONTACT FORM **/

.campo_nome {
border: #e6e6e6 1px solid;
font-size: 12px;
padding: 2px 2px 2px 6px;
background-image:url(images/fundo_caixa_texto.png);
background-repeat:no-repeat;
height:20px;
width:250px;
}

.campo_texto {
border: #e6e6e6 1px solid;
font-size: 12px;
padding: 2px 2px 2px 6px;
background-image:url(images/fundo_box_texto.png);
background-repeat:no-repeat;
width:250px;
height: 138px;
}

.campo_enviar {
border: #e6e6e6 1px solid;
font-size: 12px;
font-weight:600;
padding: 2px;
background-color: #E9EAC9;
width:65px;
height: 24px;
color: #555335;
margin-top: -20px;
margin-left: -38px;

}

Para chamar o formulário use o código gerado pelo plugin, exemplo:  [contact-form 404 "Not Found"]

Problemas de envio de e-mail no Contact form 7

Nos testes, você preenche os dados do formulário, aparece a confirmação de que tudo correu bem, mas não chega nada em seu e-mail. O problema é que a opção default do Contact Form 7 usa o email da pessoa que preenche o formulário como remetente (“From:”).

Então, na checagem de spam dos servidores por onde a mensagem passa, é detectado que o email do remetente não bate com os IPs associados de onde saiu a mensagem (o servidor onde o site está hospedado). Essa é uma técnica comum para enviar spam. E a mensagem termina retida.

Para resolver isso, basta fixar um remetente como no-reply@seudominio.com (o importante é que o domínio seja o mesmo do seu site).

Para saber mais sobre problemas de envio de e-mail no Contact form 7 consulte:  http://kasamata.com.br/2009/08/problemas-com-o-contact-form-7


Categorias

Links

Tags

Autor do post bloginfo() Caminho do tema Campos Personalizados Categorias Codificação UTF8 Contac form 7 CSS Custom fields Custom Post Types data Dividir string explode() Formatação de datas Formatação de Hora get_ get_option() get_page_template() get_the_terms get_the_title() Hora IMG is_single() Janelas Links Lista de Categorias Lista de Posts Lista de ùltimos posts location.href Paginação Post_name Query_posts register_sidebar Sidebar the_author_nickname() the_category() the_tags() the_time() Titulo da página UFT8_encode UTF8 UTF8_decode Widgets wp_list_categories() âncoras

Copyright © 2017  |   W-Pedia – Wikipedia Wordpress BR  |  produzido por Henderson C. Torres