Mini Guía de Contact Form 7

() translation by (you can also view the original English article)

Normalmente una web necesita un formulario de contacto para comunicarse con el propietario del sitio. Uno de nuestros formularios favoritos es Contact Form 7. ¡Vamos a ver qué es capaz de hacer!

Contact Form 7 es un plugin para formularios sencillo y flexible (en WordPress esto normalmente significa que su configuración es fácil pa aquellos que prefieran la sencillez, pero además con la suficiente profundidad y complejidad para aquellos que la buscan) diseñado por Takayuki Miyoshi. Algunos dicen que Contact Form 7 es uno de los mejores plugins para nuestro sistema de gestión de contenidos. El plugin fue actualizado por última vez en diciembre de 2016 y ha está funcionando en más de un millón de sitios web (ver datos actuales en la página del plugin de WordPress.org).

El plugin puede manejar varios formularios de contacto así como soportar el envío mediante AJAX, CAPTCHA, filtro anti-spam de Akismet y carga de archivos desde el front-end. Es un plugin actualizado con frecuencia, lo cual es muy importante en cualquier plugin, la última versión es la 4.6, consulta no obstante la página del plugin tras leer el artículo. Aquí tienes su web oficial: ContactForm7.com. Lo puedes descargar desde el Directorio de Plugins de WordPress. La información más detallada la puedes encontrar en los documentos oficiales.

Después de instalarlo y activarlo encontrarás un elemento de menú dedicado en la pantalla de administración con el nombre "Contacto" o "Contact".

Código del Formulario

Aquí tienes un sencillo formulario con el que solicitar un número de teléfono. Puedes especificar su aspecto, color, y también el método de pago.


<p>Product *<br /> [select* product "iPhone" "Samsung Galaxy S2" "htc Desire"] </p>

<p>Color *<br /> [select* color "black" "white" "grey"] </p>

<p>Name *<br /> [text* your-name] </p>

<p>Email *<br /> [email* your-email] </p>

<p>Preferred payment <br /> [radio paymethod "VISA" "MASTERCARD" "AMEX"]</p>

<p>[checkbox quickdelivery] Quick delivery (1 day)</p>

<p>[submit "Place order"]</p>

Insertar Código en el Formulario

Emplea este fragmento de código para importar por completo el formulario de arriba a cualquier artículo o página de WordPress.

1
2	[contact-form-7 id="38" title="cell-phone-ordering-form"]

Sintaxis Básica

El sistema de etiquetas consiste en campos como type, name y value. Si añades un asterisco, la cumplimentación del campo será obligatoria.

1
2	[type name values] for example: [radio paymethod "VISA" "MASTERCARD" "AMEX"]

Tipos de Etiquetas

Aquí tienes una lista con todas las etiquetas que puedes usar en tus formularios:

campos de texto (text, text*, email, email*, textarea y textarea*),
casillas de verificación, botones de radio y menús (checkbox, checkbox*, radio, select y select*),
cargar y adjuntar archivos (file y file*),
captcha (captcha y captchar),
prueba (quiz),
casilla de conformidad (acceptance),
botón de envío (submit).

Crear un Formulario de Dos Columnas

Podemos crear rápidamente un formulario con dos columnas, simplemente usando HTML y CSS. El pequeño secreto consiste en combinar HTML con los códigos de las etiquetas.


<!-- TWO COLUMN FORM -->
<div class="clearfix">
  <div id="left">
		First name [text first-name] <br/>
		Email [email* your-email]
	</div>
	<div id="right">
		Last Name[text last-name] <br/>
		Phone[text your-phone]
	</div>
</div>

Subject [text* your-subject] <br/>
Message [textarea* your-message] <br/>
[submit "Send"]
<!-- /TWO COLUMN FORM -->

Aquí tienes el código CSS. Nada extraordinario, es bastante sencillo.


#left {
    width: 300px;
    float: left;
}

#right {
    width: 250px;
    float: left;
}

.clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
}

.clearfix {
	display:block;
}

Sintaxis Avanzada

El sistema de etiquetas puede ser más detallado también. La parte de las opciones sirve para especificar el comportamiento y la apariencia. Declarar opciones no es necesario, pero aquí tienes cómo hacerlo. Advierte que en ejemplo siguiente usamos las propiedades id y class. Puedes usar CSS y JavaScript para ampliar tu formulario.


[type name options values]

for example:
[radio paymethod id:paynow class:paythis "VISA" "MASTERCARD" "AMEX"]

Crear una Plantilla de Email

En Contact Form 7 puedes editar plantillas de email con mucha facilidad. Texto, código HTML y datos de formulario pueden combinarse de formas arbitrarias. Observa los datos del formulario dentro de los corchetes. Debajo tienes un ejemplo para el cuerpo del mensaje.


Dear [yourname],

You have just ordered a [product] product in [color] color!
Soon you will get an email with the link to where you can pay for your order.

---
Thanks for buying!
OurCompany LLC, www.ourcompany.com

Aquí tienes una lista de todo lo que puedes configurar a través del panel de administración:

campos básicos de encabezado (to, from y subject)
cuerpo del mensaje
encabezados adicionales
archivos adjuntos
modo HTML

Añadir un CAPTCHA

El plugin para formularios te permite insertar un CAPTCHA en tu formulario de contacto para prevenir mensajes no deseados. Contact Form 7 usa Really Simple CAPTCHA como módulo CAPTCHA. Antes de que empecemos tendrás que instalar el plugin Really Simple CAPTCHA. Asegúrate de que tu carpeta temporal para los archivos CAPTCHA existe y se pueda escribir en ella (con privilegio "writable"). De no ser así, el CAPTCHA no podrá crearse.

Para usar CAPTCHA en tus formularios, debes usar las etiquetas del formulario captchac y captchar. captchac significa CAPTCHA Challenge y representa un elemento <img /> para una imagen de CAPTCHA. captchar significa CAPTCHA-Response (respuesta de captcha) y representa un elemento <input type="text" /> para un campo de texto en el que introducir la respuesta del captcha. Una etiqueta captchac siempre debe estar emparejada con una etiqueta captchar con el mismo nombre. Por ejemplo, las etiquetas mostradas abajo serían válidas:

1
2	<!-- insert this into your CF7 form code -->
3	[captchac captcha-1] [captchar captcha-1]

Recuerda que los nombres deben coincidir en ambas para que funcione correctamente. Aquí les hemos asignado el nombre de captcha-1.

Solucionar Problemas de Envío

1	Failed to send your message. Please try later or contact administrator by other way.

Si el servidor no te permite enviar correos electrónicos vía sendmail(), puedes usar un plugin para enviar correo a través de SMTP. Ambas extensiones son compatibles con WordPress 3.2.1. Estos plugins podrían resolver tus problemas:

Descárgalos e instálalos en el plugin que hayas elegido en WordPress. Introduce los ajustes de tu servidor SMTP en la página de Ajustes.

Mensajes Personalizados para Eventos

Podemos modificar libremente los mensajes que muestran los eventos.

E incluso mejor, puedes usar código HTML en las casillas de introducción de texto. Inténtalo con esto (realmente es solo una línea de HTML, pero la he desglosado aquí para mayor claridad):

1
2	Your message was successfully sent. Thank you!
3	<br/>
4	<img src="http://domain.com/yourpicture.jpg"/>

Soporte para Varios Idiomas

Contact Form 7 muestra por defecto los formularios en inglés, pero incluye la traducción a más de 40 idiomas e incluso puedes crear un formulario de contacto para cualquiera de ellos. Para usar el área de administración de Contact Form 7 en tu propio idioma, configura la constante WPLANG en tu archivo wp-config.php.

1
2	// Change this line:
3	define ('WPLANG', 'ja');

Usa Datos de Formulario Enviados desde el Lado del Servidor en Lugar de Mailing

Si quieres algo más que el envío predeterminado (enviado vía email), entonces puedes usar el código siguiente:


add_action("wpcf7_before_send_mail", "wpcf7_do_something_else");

function wpcf7_do_something_else(&$wpcf7_data) {

    // Here is the variable where the data are stored!
    var_dump($wpcf7_data);

    // If you want to skip mailing the data, you can do it...
    $wpcf7_data->skip_mail = true;

}

Configura los Privilegios de Forma Que Solo los Administradores Puedan Modificar los Formularios

Para mantener seguras las opciones editables, usa este código:

1
2	define('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options');
3	define('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Ordenar los Campos Dinamicamente

El caso es que, los valores predeterminados en Contact Form 7 son estáticos. Imagina por ejemplo que tuvieses el parámetro GET que deseas usar para ordenar el formulario de contacto. Entonces la solución estaría resuelta con la Extensión de Texto Contact Form Dynamic de Sevenspark. Este plugin proporciona una nueva etiqueta y te permite generar contenido dinámicamente. Después de instalar y activar el pliugin, Contact Form 7 tendrá dos nuevos tipos: Dynamic Text Field y Dynamic Hidden Field.

Resumen

Como puedes ver, este plugin para formularios tiene un gran potencial y eso que solo hemos visto aquí una pequeña parte de todas sus características. Si hay algo en lo que estás interesado y que no hayamos visto aquí, zambúllete en el sitio oficial del plugin. ¡No tengas miedo de usarlo ya mismo! ¡Simplemente diviértete!

¿Usas ya Contact Form 7 y tienes algún truco para compartir con nosotros? O ¿nos recomendarías algún otro plugin para los formularios de WordPress? ¡Cuéntanos!