Como crear Formularios con Tablas en Contact Form 7

Contact Form 7 es sin duda uno de los mejores plugins para enviar Formularios en WordPress, es sencillo y práctico.

Una de sus funcionalidades más interesantes es permitir que los formularios se envíen en forma de tablas usando etiquetas HTML.

Si quieres aprender como enviar formularios en formato de tablas en WordPress usando Contact Form 7, sigue leyendo este post, ya que te lo explico de manera sencilla y con ejemplos 😀.

Etiquetas HTML en Contacto Form 7

Contacto Form 7 nos permite usar las etiquetas HTML estándar, dándonos un mundo de posibilidades casi ilimitadas en el manejo de la información que recogemos en los formularios.

Si te preguntas: ¿para qué necesito las etiquetas HTML?, esto nos permite darle formato a los correos que enviamos, con la información que recogemos en los formularios Contact Form 7.

Un ejemplo de esto, son las tablas, ya que se rigen usando el formato HTML.

Podríamos, por ejemplo, crear un formulario que recoja información para la inscripción en un curso, pudiendo recibir los datos de manera ordenada en una tabla a nuestro correo electrónico, en lugar de solo texto.

También podemos darle estilo de texto en HTML usando las etiquetas de negritas: <b> , cursivas: <em> o hasta los subíndices: <sub> ;el cielo es el límite 🤩

Conociendo las Etiquetas HTML para tablas

Antes de crear nuestros formularios con tablas, mediante el plugin Contact Form 7, debemos entender un poco el código de las etiquetas HTML que necesitaremos para crear nuestras tablas.

Etiqueta Table

La etiqueta Table: <table> nos permite crear el contenedor donde estará imbuida toda la información de la tabla.

Es como el recipiente mayor. Dentro de él estarán las filas y las columnas de nuestra tabla.

Etiqueta TR

Su nomenclatura es: <tr> . Con esta etiqueta crearemos las filas de nuestra tabla. Es un subcontenedor de la etiqueta <table> .

Por cada fila que deseamos tenga la tabla deberemos crear un contenedor <tr> .

Etiqueta TH

Con ella definimos las celdas de cabecera de la tabla. Su nomenclatura es <th> .

Por lo general se usa para definir el nombre que tendrá la columna donde se pondrá la información del formulario.

Etiqueta TD

Con la etiqueta TD: <td>  definiremos las celdas de la tabla.

Si con la etiqueta <th> definimos las celdas de cabecera de la columna, la <td>  son las celdas que por lo general van debajo de ella en la columna.

Lo sé, lo sé 🤨, esto de las etiquetas HTML para tablas es enredado y complicado. Te dejo este gráfico que te ayudará a entenderlo mejor.

Creando el formulario en Contact Form 7

Una vez que hemos comprendido las etiquetas HTML para crear formularios con tablas en Contact Form 7, vamos a elaborar un formulario que contenga nuestra tabla.

Como administrador en WordPress vamos a: Contacto > Añadir nuevo.

Dale un nombre a tu formulario en el campo superior que pone: Introduce el titulo aquí.

Puedes borrar la información genérica mostradas en el campo Formulario, que viene por defecto en Contact Form 7.

Ahora debemos armar el formulario que aparecerá en nuestro WordPress. Este solicitará la información que queramos se envíen posteriormente al correo electrónico definido en el formulario de Contact Form 7.

Siguiendo el ejemplo de la imagen al principio, necesitaríamos campos que soliciten: nombre, apellido, curso solicitado y email.

Para ello en la pestaña Formulario de Contact Form 7, colocaremos el código siguiente:

<label> Tu nombre (requerido) [text* nombre] </label>

<label> Tu nombre (requerido) [text* apellido] </label>

<label> Curso solicitado (requerido) [text* curso-solicitado] </label>

<label> Tu correo electrónico (requerido) [email* correo] </label>

[submit "Enviar"]

Explicando el código anterior

Cada campo del formulario se definirá por la etiqueta Label. Se abre con <label> y se cierra con </label> .

Lo que esté contenido dentro de ella, es el nombre del campo en primer lugar y luego entre [ ] , la etiqueta y el nombre del campo.

Las etiquetas de campo de formulario en Contact Form 7, las podemos introducir haciendo clic en los botones que aparecen en la pestaña formulario.

Por ejemplo, si queremos agregar un campo para correo electrónico, hacemos clic al botón correo electrónico, y en la pantalla emergente que se despliega colocar un nombre a la etiqueta, debe ser único.

En el caso de que sea obligatorio colocar la información que se pide, debemos marcar la casilla Campo requerido.

Para finalizar hacemos clic al botón Insertar.

En el campo de formulario debe aparecer el código.

Haz la misma acción para cada campo que necesitemos en el formulario, uno debajo del otro. El orden en que los coloques será el mismo en el que se mostrarán en el formulario.

Creando las tablas en Contact Form 7

Ahora que hemos creado el formulario y definido los campos que solicitaremos en WordPress, estructuraremos las tablas que enviaremos en Contact Form 7.

Vamos en Contact Form 7 a la pestaña Correo electronico.

Llenaremos los campos como sigue:

1. Para: colocaremos el email que queramos que reciba el formulario que se envía de WordPress.
2. De: el email desde donde se envía el formulario.
   Deberemos colocar un email que contenga el dominio desde donde se envía el formulario, de lo contrario obtendremos un error.
   Puedes usar los nombres de los campos que definimos en la pestaña Formulario (antes del email) entre corchetes, para hacerlos más personalizados 👍. Por ejemplo: [nombre] [apellido] correo@midominio.com
3. Asunto: colocaremos sobre que trata el formulario. Por ejemplo: Quiero inscribir para el Curso.
   Si lo quieres más personalizado puedes colocar entre [ ] la etiqueta del curso solicitado, previamente definida. Por ejemplo: Quiero inscribirme para el [curso-solicitado]
4. Cabeceras adicionales: aquí podemos poner el email donde responderemos al formulario enviado. Por ejemplo: Reply-to: [correo] .
   Sustituye lo que está en corchetes por el nombre de la etiqueta del correo electrónico que definiste con anterioridad.
5. Cuerpo del mensaje: hemos llegado al código de la tabla 🤓, así que lo explicaré detalladamente a continuación.

Cuando finalices la configuración, dale clic al botón Guardar.

Código para tablas en Contact Form 7

En Cuerpo del mensaje insertaremos el código HMTL para las tabla que se enviará al correo electrónico que previamente definimos.

• Primero crearemos el contenedor de la tabla, lo abriremos con <table> y lo cerraremos con </table> . Si olvidas cerrarlo nos dará un error, esto es aplicable a todas las etiquetas HTML.
  Podemos definir dentro de la etiqueta de apertura un borde con: border=”1″ , sin espacios entre las celdas: cellspacing=”0″ y un espacio desde el texto hasta los bordes: cellpadding=”4″ . El valor entre comillas lo cambias para hacerlos de mayor o menor tamaño.
  Por ejemplo: <table border=”1″ cellspacing=”0″ cellpadding=”4″>
• Luego las filas, con <tr> la abrimos y cerramos con </tr> . Dentro de ella podemos usar los atributos que queramos, como, por ejemplo, align=”center” el cual nos permitirá centrar el texto horizontalmente dentro de las celdas.
• Dentro de la primera fila TR, definiremos las de tipo cabecera con <th> para abrirla, y cerrarla con </th> . Dentro de las ellas podemos agregar otras etiquetas HTML, como negrillas: <b> .
  Se pueden insertar etiquetas dentro de etiquetas, como una muñeca rusa 😉.
• Luego crearemos para nuestro ejemplo, otras filas TR. Dentro colocaremos cada celda que queremos se rellene con la información que obtuvimos en el formulario.
  Las celdas de esta segunda fila la crearemos con <td> para abrirla y </td>  para cerrarla.
  Debemos respetar el orden que hayamos definido en las filas TR de cabecera, de esta manera tendrán un orden lógico.

Con el código a continuación, crearemos la tabla con la información recogida del formulario:

Hola.

Solicito el curso [curso-solicitado]

<table border="1" cellspacing="0" cellpadding="4">
<tr align="center">
 <th><b>Nombre</b></th>
 <th>Apellido</th>
 <th>Curso solicitado</th>
 <th>Correo</th>
</tr> 
<tr align="center">
 <td>[nombre]</td>
 <td>[apellido]</td>
 <td>[curso-solicitado]</td>
 <td>[correo]</td>
</tr> 
</table>

Gracias por su atención

Debes marcar la opción Usar contenido de tipo HTML para que funcione el soporte de tablas en Contact Form 7.

Hasta aquí, este tutorial. Cualquier duda déjalo en los comentarios que gustoso los responderé.