Viktor H. Morales

Diseñador y Desarrollador Web Freelance

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 al 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"]

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"]'); ?>

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

¿Cómo puedo tener mi sitio web? ¡Hablemos!

1 comentario

  1. fran

    saludos victor… pasaba por aqui en mi busqueda por google, ya que necesito hacer un fomulario que tenga esa misma posicion el label alineado con el input, cosa que no existe en ninguna parte de internet. Yo uso elementor como aplico el boostrap, tengo que agregar mi libreria manualmente por functions.php?… gracias

Deja un comentario