Integrando Contact Form 7 com Bootstrap no WordPress

integrando contact form 7 com bootstrap

Contact Form 7 é um dos mais populares plugins para criação de formulário de contato no WordPress com mais de 1 milhão downloads. Este post é destinado a desenvolvedores de tema para WordPress que queiram integrar o plugin Contact Form 7 com o Bootstrap um popular framework HTML, CSS, e JS.

Neste exemplo mostramos uma maneira para tornar o processo de integração mais fácil de entender e de usar. Estamos usando “id” e “class” que são “built-in options” no plugin Contact Form 7.

Integrando o Contact Form 7 com Bootstrap

<div class="form-group">
  <label for="your-name">Your Name (required) : </label>
  [text* your-name class:form-control id:your-name]
</div>
<div class="form-group">
  <label for="your-email">Your Email (required) : </label>
  [email* your-email  class:form-control id:your-email]
</div>
<div class="form-group">
  <label for="your-subject">Subject : </label>
  [text your-subject class:form-control id:your-subject]
</div>
<div class="form-group">
  <label for="your-message">Your Message : </label>
  [textarea your-message  class:form-control id:your-message]
</div>
<div class="form-group">
  [submit class:btn class:btn-primary "Send"]
</div>

Como pode verificar, nós usamos opções de classes nos elementos, sendo possível aplicar várias classes no mesmo elemento, pode ver isso no “submit” na parte final do código.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *