28 May Usar Contact Form 7 en WordPress – Todos los Secretos

Son muchos los plugins que existen para crear formularios de contacto en WordPress, aunque ninguno tan fácil y tan potente como Contact Form 7, pero ¿conoces todo sus secretos?

Con este tutorial te mostraré como usar Contact Form 7 en wordpress y configurar correctamente todos campos con todas sus opciones, además de algunos truquitos y ejemplos que podrás copiar directamente, formato HTML para el mensaje, autorespondedores, etcétera, ¡vamos a ello!

CONFIGURAR CONTACT FORM 7 WORDPRESS

Antes de comenzar, asegúrate de tener instalado y activo el plugin Contact Form 7, y dirigirte a Contacto → Formularios de Contacto en el menú laterial del escritorio de WordPress.

Tenemos por defecto un "Formulario de contacto 1", que sirve de ejemplo y que no usaremos porque somos mucho más PRO y crearemos todo desde cero😎. Da clic en Añadir Nuevo en la parte superior o en el menú lateral de WordPress y tendrás una pantalla como esta (en la pestaña Fomulario):

Esto ya funciona por sí mismo y podría quedarse así si no necesitaras más campos o editar algo de estilo. Pero si necesitas otras cosas te mostraré la configuración base de cada campo.

La lógica de Contact Form 7

⚠ Este es uno de los trucos contact form 7, así que pon mucha atención. ⚠

CONTENIDO BLOQUEADO

Exclusivo para LECTORES REGISTRADOS
Regístrate en menos de 2 minutos aquí o ingresa y accede a todo el contenido + foro.
¡Tenemos nuevos plugins PREMIUM todo el tiempo!

¿Te lo vas a perder?

Ahora vamos por campos:


Texto - Text

Shortcode Sencillo

Lo explicaré en orden:

  • <label> - Es una etiqueta HTML que indica que estoy escribiendo un "letrero". Se coloca el inicio y al final se cierra con un "/", aunque no es obligatorio. Puedes quitarlo sin remordimientos si no te cae bien.
  • Texto (requerido) - Es un texto que he puesto yo con la indicación del campo.

Dentro de los paréntesis [ ]:

  • text - Tipo de campo que reconoce Contact Form 7. Es un campo de texto.
  • * - Indica que es un campo obligatorio. Si no quieres que sea obligatorio puedes quitárselo sin problema.
  • soyuntexto - Este es un texto que yo elegí como nombre de mi campo.
  • placeholder "Ejemplo de texto" - (no obligatorio) Es el letrero que aparecerá dentro de la casilla de respuesta.

Así luce este campo:

Shortcode Avanzado

Estos son todos los elementos de diseño o funcionalidad que el campo "text" puede tener:

 ⚠ A partir de aquí explicaré únicamente el contenido dentro de los paréntesis [ ] ⚠

  • text - Lo mismo que en el shortcode sencillo: tipo de campo que reconoce Contact Form 7. En este caso de texto.
  • soyuntexto - Lo mismo que en el shortcode sencillo.
  • class:text - Aquí definimos la clase CSS que se aplicará a este elemento. En este caso mi clase es "text", y la he definido así, por puro gusto, en el CSS de mi tema (que también pues usar el plugin Simple Custom CSS):

  • id:uno - Definimos el identificador de este campo. Aquí le nombro "uno".
  • minlength:5 - Esta orden indica la longitud mínima de carácteres que la respuesta puede tener. Yo escribo "5", entonces el formulario no se enviará a menos que la respuesta sea de más de 5 carácteres.
  • maxlength:20 - Longitud máxima de carácteres que la respuesta puede tener.
  • size:5 - Indico que el tamaño de mi recuadro debe ser de "5".
  • placeholder "Ejemplo de texto" - Lo mismo que en el shortcode sencillo.

Así luce este campo:


Correo electrónico - email

Shortcode Sencillo

  • email - Tipo de campo que reconoce Contact Form 7. En este caso campo de email (leerá que tenga la estructura algo@algo.algo).
  • - Indica si es un campo requerido. En este caso lo es.
  • correo - Nombre del campo.
  • placeholder "ejemplo@gmail.com" - (no obligatorio) Letrero.

Shortcode Avanzado

El campo email tiene exactamente los mismos elementos de diseño que el campo text, así que no me detendré a explicarlo, ya que funciona igual. Y, de hecho, como ya somos unos expertísimos en la materia, a partir de aquí sólo explicaré los campos extra que no sepamos ya.


URL - url

Shortcode Sencillo

  • url - Campo que lee Contact Form 7. En este caso una URL/Link/Liga (leerá que tenga la estructura algo.algo)

Shortcode Avanzado

¡Elementos de diseño y funcionalidad iguales a los de text! Parece que hoy estamos de suerte y todo es más fácil de lo que se pensaba...


Teléfono - tel

Shortcode Sencillo

  • tel - Campo que reconoce Contact Form 7. En este caso leerá números, pues se trata de un teléfono.

Shortcode Avanzado

¡Elementos iguales que en text!


Número - number

Shortcode Sencillo

  • number - Campo que reconoce Contacto Form 7. Leerá números.

Shortcode Avanzado

Aquí si tenemos otros campos, pero no explico class ni id porque ya los conocemos:

  • min:10 - Indica el número mínimo que puede ser introducido. En este caso no se podrá introducir un número menor a 10, pero puede ser cualquiera.
  • max:20 - Es el número máximo que puede introducirse en el campo.
  • step:2 - Esta orden dice que sólo puede introducirse un valor en saltos de 2 en 2, esto es: si tenemos que el número menor es 10 (min:10), y el mayor es 20 (max:20), entonces al colocar step:2 (saltos de 2), sólo podrán escribirse 10, 12, 14, 16, 18 o 20, nada más.

Fecha- date

Shortcode Sencillo

  • date - Tipo de campo que reconoce Contact Form 7. Por default tiene esta estructura: dd-mm-aaaa (ej. 03-03-2017).

Aquí tenemos un campo que desplegará un pequeño calendario al hacer clic sobre él:

Shortcode Avanzado

  • min:2013-01-01 - Fecha mínima elegible.
  • max:2014-01-01 - Fecha máxima elegible.
  • step:2 -  Saltos de días. Igual que en el campo de number (número), pero de días ☺.

Área de Texto - textarea

Shortcode Sencillo

  • textarea - Campo que reconoce Contact Form 7. Un área de texto es una casilla grande para escribir mucho; generalmente se usa para el cuerpo del mensaje.

Shortcode Avanzado

Este es tiene casi los mismos elementos de diseño que text, excepto por size, que no funciona para textarea, pero en su lugar tenemos a:

  • 10x15 - columnasXfilas. Con estos valores definimos cuántas columnas debería tener la casilla de textarea (en este caso 10), y cuántas filas (15 en mi ejemplo). También puede escribirse "10x" (10 columnas, y filas default) o "x15" (15 filas y columnas default).

Menú desplegable - select

Shortcode Sencillo

  • select - Tipo de campo que reconoce Contact Form 7. Este es un menú desplegable con varias opciones.
  • "opción 1" "opción 2" "opción 3" - Son las opciones que aparecerán en cada fila del menú. Este campo no tiene valor placeholder.

Shortcode Avanzado

  • default:2 - Este campo indica cuál de las opciones estará seleccionada por default, en este caso coloqué la opción 2, pero también puede escribirse, por ejemplo, default:2_3 lo cual significa que se seleccionarán la opción 2 y la 3.
  • multiple - Habilita la selección múltiple.
  • include_blank - Añade una opción "en blanco" al principio de las opciones.

Botón de "Enviar" - submit

Shortcode Sencillo

  • submit - Campo que reconoce Contact Form 7 como el botón para enviar el formulario.

Shortcode Avanzado


Y bueno, faltan todavía otros 4 campos:

Pero como no sé cuánto tiempo llevo ya escribiendo y necesito un descanso... añadiré pronto otra entrada donde termino esto y lo enlazo aquí mismo, con ejemplos formularios contact form 7.

¡Espero que te sirva!