Suporte » Plugins » Formulário Contact Form 7

  • Bom dia pessoal, sou novo aqui e também com a utilização do WP. Com algumas pesquisas sobre forms, me informaram que o contact form 7 é um ótimo plug-in. Instalei ele e até consegui fazer alguns forms já, mas agora preciso fazer um form horizontal, seguindo o exemplo do da página http://conrado.com.br/ onde eu gostaria de fazer um parecido com esse form de registro de newsletter.

    Tentei criá-lo assim:

    <table class="form-table">
      <th>
    
      </th>
      <tr>
        <td><h7>Nome:</h7><br />
        [text* nome 150 class:campo-nome]</td>
        <td><h7>Telefone:</h7><br />
        [tel* telefone 150 class:campo-fone]</td>
        <td><h7>E-mail:</h7><br />
        [email* email 150 class:campo-mail]</td>
    <td>[submit "Enviar" class:campo-send]</td>
      </tr>
    </table>

    No mais, agradeço o retorno de quem puder me ajudar.

    Atenciosamente,
    Paulo.

Visualizando 9 respostas - 1 até 9 (de um total de 9)
  • 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

    Criador do tópico paulo.faustini

    (@paulofaustini)

    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…

    Criador do tópico paulo.faustini

    (@paulofaustini)

    Obrigado. Dando certo aqui. Vlw.

    Criador do tópico paulo.faustini

    (@paulofaustini)

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

    Criador do tópico paulo.faustini

    (@paulofaustini)

    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?

    Criador do tópico paulo.faustini

    (@paulofaustini)

    Alguém ??

    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 !

Visualizando 9 respostas - 1 até 9 (de um total de 9)
  • O tópico ‘Formulário Contact Form 7’ está fechado para novas respostas.