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;
}


Deixe um comentário

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 © 2018  |   W-Pedia – Wikipedia Wordpress BR  |  produzido por Henderson C. Torres