Contact Form 7: Formulario horizontal con Bootstrap

Estaba trabajando en el diseño de una nueva plantilla para WordPress y mientras trabajaba en el formulario de contacto que se mostraría en la página principal (landing page) se me ocurrió usar la opción horizontal form de Bootstrap.

contact-form-7-formulario-horizontal-bootstrap

Para lograr este efecto creamos un nuevo formulario con el siguiente contenido:

<div class="form-group">
    <label for="name" class="col-md-4 control-label">Nombre (obligatorio)</label>
    <div class="col-md-8">
        [text* your-name class:form-control id:name]
    </div>
</div>

<div class="form-group">
    <label for="email" class="col-md-4 control-label">Correo electrónico (obligatorio)</label>
    <div class="col-md-8">
        [email* your-email class:form-control id:email]
    </div>
</div>

<div class="form-group">
    <label for="message" class="col-md-4 control-label">Mensaje (obligatorio)</label>
    <div class="col-md-8">
        [textarea* your-message class:form-control  id:message]
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        [submit id:send class:btn class:btn-primary "Enviar"]
    </div>
</div>

Finalmente, para que Bootstrap estilice el formulario en horizontal, debemos agregar la clase a dicho formulario donde solo agregamos el parámetro “html_class” de la siguiente manera:

[ contact-form-7 id="1461" title="Contact form 1" html_class="form-horizontal" ]
// Quita los espacios que están despues y antes de los corchetes.

Si queremos mostrar el formulario en una plantilla HTML, utilizamos la función de wordpress “do_shortcode”:

<?php echo do_shortcode(‘[ contact-form-7 id="1461" title="Contact form 1" html_class="form-horizontal" ]’); ?>
// Quita los espacios que están despues y antes de los corchetes.

No mucho más para decir. ¡Espero sea de ayuda!

Deja tus comentarios!