Interface Designer, UI/UX Designer from Brazil.

 

Criar um formulário responsivo de duas colunas com o Contact Form 7

Estava procurando na internet por soluções para criar um formulário de duas colunas usando o Contact Form 7. Como não trabalho sempre com frontend, minha primeira reação a uma dúvida é procurar uma solução pronta, porém não consegui nada simples e efetivo.

Depois de alguns minutos cheguei numa solução interessante utilizando somente duas classes e uma pequena modificação na hora de criar seu formulário pelo próprio Wordpress. Assim você pode atualizar o seu plugin sem problemas.

Crie um formulário e quando um campo do formulário for ficar a direita, adicione a seguinte classe a tag <p>

<p class=”input-right”>Telefone<br />
[tel telefone] </p>

Em seu arquivo de estilo (CSS) essa classe terá o seguinte:

.input-right {
  margin-top: -44px;
  margin-left: 50%;
}

O margin-left é 50% para dar a margem do primeiro input, que ficará a esquerda. E o margin-top terá um valor negativo até o seu input da direita ficar alinhado com o da esquerda.

Já no seu campo da esquerda, você irá fazer o seguinte. Valos supor que o nome dele é email e o código do Contact Form 7 é o a seguir:

<p>Email*<br />
[email* email] </p>

No seu CSS você irá criar o seguinte código:

.email input {
  width: 45%;
  float: left;
}

O seu código final no Contact Form 7 será:

<p>Email*<br />

    [email* email] </p>

<p class=”input-right”>Telefone<br />

    [tel telefone] </p>

<p>Mensagem<br />

    [textarea mensagem] </p>

<p>[submit “Enviar Pedido”]</p>

E no seu arquivo de estilo será:

.input-right {
  margin-top: -44px;
  margin-left: 50%;
}

.email input {
  width: 45%;
  float: left;
}

Espero que funcione e tenha ajudado.

rawbdz:

TYPE DEFINED  |  Tactile  |  Thomas Price

rawbdz:

TYPE DEFINED  |  Tactile  |  Thomas Price