você pode fazer o seguinte,
Coloque este formulário que você criou em uma página depois clique em publicar, clique em ver a página, quando o formulário abrir, clique em cima dele e exiba o código fonte, copie toda a área de código do formulário e em seguida abra no Dreamweaver (ou outro) você verá o formulário, agora edite os posicionamentos como na tabela mostrada acima, após deixar do jeito que você quer, copie novamente o código (PHP) e coloque no lugar desejado, desde de que o plugin continue instalado o formulário deverá funcionar
Bom, esse forum é meio tranquilo, então corri atras de alguns exemplos mas ainda não obtive sucesso.
O código no CF7 está assim:
<form>
<header>
<h2>Comece agora a receber Assessoria Jurídica. Deixe seus contatos que entraremos em contato.</h2>
</header>
<div>
<div>
<label class="desc" id="campo-nome" for="campo-nome">Nome</label>
[text* nome]
<label class="desc" id="campo-fone" for="campo-fone">Telefone</label>
[tel* telefone]
<label class="desc" id="campo-mail" for="campo-mail">E-mail</label>
[email* email]
[submit "Enviar"]
</div>
</div>
</form>
E o código dentro do CSS está assim:
/* FORM */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form header {
margin: 0 0 0 0;
background: #373737;
}
form header h2 {
margin:0 0 0 25px;
color:#8d609e;
}
form > div {
clear: both;
overflow: hidden;
padding: 10px;
margin: 0 0 0 0;
background: -webkit-gradient(linear, left top, left bottom, from(#8D609E), to(#373737)) repeat-X;
}
form > div > fieldset {
margin: 0 0 0 0;
float: left;
}
form > div > label{
width: 10%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 99%;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
input[type=text]:focus {
outline: 0;
border-color: #8d609e;
}
@media (max-width: 600px) {
form > div {
margin: 0 0 0px 0;
}
form > div > label{
width: 99%;
float: left;
margin: 0 0 0px 0;
}
form > div > div,
form > div > fieldset > div {
width: 99%;
float: left;
}
input[type=text]{
width: 99%;
}
}
@media (min-width: 200px) {
form > div > label{
text-align: left;
}
}
Não estou conseguindo deixar os campos alinhados horizontalmente.
<form action="/?page_id=2#wpcf7-f4-p2-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="4" />
<input type="hidden" name="_wpcf7_version" value="3.4" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f4-p2-o1" />
<input type="hidden" name="_wpnonce" value="a414871900" />
</div>
<p>Seu nome (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" /></span> </p>
<p>Seu e-mail (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" /></span> </p>
<p>Assunto<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" /></span> </p>
<p>Sua mensagem<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"></textarea></span> </p>
<p><input type="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>
copia e cola em uma página pra você entender, este código é o que você tem que copiar no código fonte da página onde você colocou o formulário que você criou, colocando este código no Dreamweaver por exemplo, você pode pegar os campos do formulário e inserir em uma tabela como você quiser…
Obrigado. Dando certo aqui. Vlw.
Bom, ficou top o form, visualizado em pc. Mas em tablet e/ou smartphone, os campos não estão descendo, e estão “estourando” o espaço.
Veja como ficaram meus cógidos:
— Código no CF7:
<form>
<header>
<h4>Comece agora a receber Assessoria Jurídica. Deixe seus contatos que entraremos em contato.</h4>
</header>
<div>
<div id="left">
<label class="desc" id="nome">Nome (Obrigatório):</label>
[text* nome]
</div>
<div id="center">
<label class="desc" id="fone">Telefone (Obrigatório):</label>
[tel* telefone]
</div>
<div id="right">
<label class="desc" id="mail">E-mail (Obrigatório):</label>
[email* email]
</div>
<div id="send">
[submit "Enviar" class:campo-send]
</div>
</div>
</form>
— Código no CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#left {
display:inline;
float:left;
width:29%;
margin: 0 0 0 10px;
}
#center {
float:left;
width:29%;
margin: 0 0 0 10px;
}
#right {
float:left;
width:29%;
margin: 0 0 0 10px;
}
#send {
float:left;
width:9%;
margin: 55px 0 0 15px;
}
#nome {
font: inherit;
font-size: 16px;
margin-top: 10px;
color: #ffffff;
}
#fone {
font: inherit;
font-size: 16px;
margin-top: 10px;
color: #ffffff;
}
#mail {
font: inherit;
font-size: 16px;
margin-top: 10px;
color: #ffffff;
}
form header {
margin: 0px;
background: #373737;
}
form header h4 {
margin:0px 0px 0px 30px;
color:#8d609e;
}
form > div {
clear: both;
overflow: hidden;
margin: 0 0 0 0;
background: -webkit-gradient(linear, left top, left bottom, from(#8D609E), to(#373737)) repeat-X;
}
form > div > label{
width: 100%;
float: left;
padding-right: 5px;
}
input[type=text]{
width: 100%;
}
Criei uma div principal, logo após o <form> e ao CSS criei o seguinte termo:
div.form{
width:50%;
min-width:360px;
float:left;
}
@media screen and (max-width: 860px){
div.form{ width:100%}
}
Mas não está funcionando, os campos continuam “atropelando” quando testo o design em telas menores.
Alguém sabe dar um help aew?
Boa tarde, pessoal !
To precisando de uma ajuda a respeito desse Formulário: preciso saber/modificar o endereço de e-mail para onde vão as mensagens enviadas !
Já abri uma centena de arquivos pelo terminal/ssh da máquina onde o WP da página ta instalado; abri o código da página de contato em si; fucei, li, reli, e nada! Nem sequer o e-mail padrão do administrador(que sou eu) aparece !
To achando que deve ser uma coisa muito pequena, mas não estou enxergando ! Por favor, se alguém tiver uma luz eu fico muito grato !
Obrigado !
