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.

Primero adjuntamos la librería Bootstrap desde nuestro archivo functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'frontend_scripts' );
function frontend_scripts()
{
wp_enqueue_script('jquery');
/* Popper & Bootstrap */
wp_enqueue_script('popper', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', array('jquery'), false, true);
wp_enqueue_script('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js', array('jquery'), false, true);
wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', false, false);
}
view raw functions.php hosted with ❤ by GitHub

Luego, creamos el formulario horizontal en plantilla del plugin para WordPress Contact Form 7:

<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>
view raw template.html hosted with ❤ by GitHub

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="id-de-formulario" title="Contact form 1" html_class="form-horizontal"]

Atención: cambiar la cadena de texto «id-de-formulario» por tu propio identificador.

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

Acerca de Victor H. Morales
Socio fundador de MKDev SAS. Diseño temas y desarrollo plugins a medida para WordPress.

View all posts. | Website

Deja un comentario