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.