¿Cómo crear un formulario en WordPress?

¿Para qué sirve un formulario en WordPress?

Los formularios en WordPress son muy útiles para la toma de contacto con los usuarios o clientes de tu página web. No solo sirven para ponerse en contacto con nosotros, sino que también pueden ser geniales para:

• Crear una base de datos para una newsletter.
• Recolectar la información para los asistentes de una quedada.
• Para la creación de un test para saber los conocimientos previos de los usuarios.

En realidad, el límite lo ponemos nosotros mismos, por lo que el provecho que podemos sacar de este formulario puede ser muy grande.

¿Cómo crear un formulario en WordPres?

Por supuesto, estos formularios se pueden crear de forma manual, pero implica que también deberíamos de crear en el servidor un lugar de recolección o envío de datos a nuestro correo. Como lo vamos a utilizar en WordPress, os recomendamos Contact Form 7 del japonés Takayuki Miyoshi.

Su plugin ha conseguido ser de los más utilizados en cuanto a formularios se refiere, por su sencillez y su facilidad de creación modificación. Además, en su web está documentado todos los campos posibles que hay para añadir a nuestros formularios.

Por tanto y ahora sí, vamos a contarte todos los pasos que necesitas para crear tu propio formulario en WordPress.

Instalar el plugin Contact Form 7

1. Para instalar el plugin, primero nos vamos al apartado ‘Plugins’ y accedemos al apartado ‘Añadir nuevo’.
2. Una vez cargue la ventana, buscaremos ‘Contact Form 7’. El plugin aparecerá con el estilo clásico de dibujo japonés del Monte Fuji.
3. Si comprobamos los resultados de búsqueda, podremos ver que la comunidad ha añadido muchas funcionalidades a este plugin tan querido, tales como: una base de datos guardada en nuestro WordPress o crear condicionales entre diferentes opciones para mostrar información si el usuario ha escogido una o varias opciones específicas.
4. Una vez instalado, no hará falta configurar nada, ya que es un creador automático de formularios. El plugin da la opción de poder integrar Google Captcha a nuestros formularios o crear listas de newsletter con Constant Contact.

Además, recomienda instalar Akismet Anti-spam para bloquear la comunicación de bots y spammers o de instalar algún plugin para no perder ningún correo y se envíen de formar automática por otro medio que no sea WordPress (ya que se suelen perder correos con la forma nativa de envío de WordPress). Toda la información se puede encontrar dentro del plugin en el apartado ‘Integraciones’.

Crear un formulario en WordPress

Para crear un formulario en WordPress con Contact Form 7, debemos de acceder a su menú ‘Contacto’ y pulsar en ‘Añadir nuevo’. De esta forma, entraremos en su apartado de creación.

1. Pestaña ‘Formulario’

En esta pestaña, crearemos nuestro formulario de forma interactiva o manual si conocemos la sintaxis. A la derecha, podremos encontrar ayuda e información acerca de cómo crear estos formularios. Dentro de esta página, podremos ver los siguientes botones de elementos a añadir a nuestro formulario:

• Texto: apartado para que el usuario escriba textos cortos como su nombre, apellidos o ciudad…
• Correo electrónico: apartado para que el usuario inserte su correo. El formulario obligará al usuario que añada un correo electrónico válido.
• URL: apartado para que el usuario introduzca una dirección web válida.
• Teléfono: apartado para que el usuario introduzca un número de teléfono.
• Número: apartado para que el usuario introduzca sólo números tales como año de nacimiento o edad.
• Fecha: apartado para que el usuario introduzca una fecha con un selector específico de fechas.
• Área de texto: apartado para que el usuario introduzca un texto largo como un comentario o un mensaje del formulario de contacto.
• Menú desplegable: añade un apartado con varias opciones a elegir una. Puede ser útil para añadir listas definidas y finitas como listas de países.
• Casillas de verificación: añade una lista de opciones donde se puede hacer click en una o varias opciones.
• Botones de selección: añade una lista de selección con selectores circulares donde se puede elegir uno de entre todos.
• Aceptación: añade un cuadrado de verificación obligatorio u opcional, muy útil para añadir aceptación de la política de privacidad o del envío de información comercial.
• Cuestionario: permite añadir una serie de preguntas con su respuesta correcta para que el usuario responda y sea corregido.
• Archivo: permite al usuario subir ficheros al formulario, ideal para recibir documentación o imágenes de perfil.
• ReCAPTCHA: permite añadir un captcha al formulario para evitar intentos de envío de spam. Sólo aparecerá el botón cuando se haya configurado en el apartado Integración.
• Enviar: añade el botón final para que el usuario confirme que ha terminado de rellenar el formulario en cuestión.

Cada botón desplegará un menú para añadirle el identificador único a cada campo que será la manera de cómo identificar las respuestas cuando se envíen por correo electrónico. Además, tendremos la opción de añadirle clases para darle estilo desde nuestra hoja CSS o el editor de CSS personalizado de nuestro tema.

¡Vamos a ver algunos ejemplos!

Ejemplo 1. Añadir un bloque de texto

Cuando pulsamos el botón ‘Texto’, nos aparecerá el siguiente recuadro donde podremos modificar las opciones que tendrá este bloque del formulario.

• El campo sea requerido, por lo que obligará al usuario a escribir un nombre (o puede que cualquier cosa).
• En ‘Nombre’ podemos añadir cómo queremos llamar al campo cuando lo agreguemos al formulario de envío del correo electrónico.
• En ‘Valor predeterminado’ podemos añadir un texto por defecto. Como es un nombre, podemos seleccionar la opción de ‘Use este texto como marcador de campo’ para escribir un texto que aparecerá en gris claro para indicar qué hay que introducir. Esto se conoce como placeholder.
• En los atributos, podemos añadir un ID o una clase para añadir nuestros estilos CSS al este campo.

Por ejemplo, para queremos añadir un bloque para que el usuario nos añada su nombre, podemos elegir lo siguiente:

Si hemos elegido esas mismas opciones, veremos que nos habrá añadido el siguiente texto:

[text* nombre placeholder "Escribe tu nombre"]

Si queremos añadirle una etiqueta o nombre identificativo al bloque fuera del placeholder, podremos hacerlo añadiendo código HTML al elemento. Para añadir la etiqueta label, escribiremos lo siguiente:

<label> Nombre: </label> [text* nombre placeholder "Escribe tu nombre"]

Si queremos añadir un salto de línea entre la etiqueta y el campo, podremos hacerlo sin problemas, ya que Contact Form 7 detectará tanto los saltos de línea introducidos con el teclado como con la etiqueta ‘br’ de HTML.

Ejemplo 2. Añadir un menú desplegable

Vamos a crear un menú para un concurso donde le diremos al usuario que, en caso de que le toque el premio, elija qué color prefiere. Aquí, añadiremos una lista desplegable.

Hay que tener presente que hay dos tipos de listas desplegables: una única opción (donde será un menú desplegable) o múltiples opciones (una lista desplegada para seleccionar con Control o Command varios elementos).

Las diferentes opciones que nos permite elegir el menú desplegable son las siguientes:

• El ‘tipo de campo’ si queremos que el usuario responda sí o sí a la elección.
• El ‘nombre’ para identificarlo a la hora de añadir al correo electrónico.
• El campo ‘Opciones’ es para añadir toda la lista (una opción por línea) que queremos que el usuario seleccione.
• La opción ‘Permitir selecciones múltiples’ cambiará el estilo de la lista como os hemos comentado antes.
• La opción ‘Insertar un elemento en blanco como primera opción’ nos permitirá que el usuario no tenga seleccionada una opción por defecto, sino una opción sin información (normalmente, tres guiones seguidos).

Una vez añadido, nos aparecerá el código ya implementado para añadirlo a nuestro formulario. Si habéis seguido las mismas instrucciones de arriba, os aparecerá un código como este:

[select* respuesta-concurso include_blank "Blanco" "Rojo" "Negro" "Azul" "Amarillo"]

Ejemplo 3. Añadir botones de selección

Estos botones de selección son los selectores redondos de los formularios de HTML (conocidos como ‘radio’). Estos selectores tienen una característica especial y es su posición respecto al texto al que irán acompañados. Por supuesto, esto depende de si le damos estilos a los botones.

Las opciones que nos permite este selector son muy parecidas a las del menú desplegable. Como podéis ver, hay dos opciones diferentes que os explicaremos a continuación:

• La opción ‘Pon primero una etiqueta, la casilla de verificación al final’ hará que, al marcarla, se añada primero el texto de la elección y, a continuación, se añadirá el selector redondo de opción. Si no se marca, el selector se mantendrá a la izquierda y el texto a la derecha.
• La opción ‘Envolver cada elemento con la etiqueta <label>’ hará que añada por cada selección la etiqueta de HTML ‘label’ para poder modificar con estilos el bloque completo de la opción.

Como veis, los menús son interactivos y te ayudan a componer los campos con las opciones que necesitan. De todas formas, siempre os aparecerá la documentación en la misma pestaña para generar el tipo de campo al que hemos pulsado.

2. Pestaña ‘Correo electrónico’

Aquí configuraremos cómo se enviará la información una vez que el usuario pulsa el botón de ‘Enviar’. Tendremos dos diferentes correos que podemos enviar (uno para nosotros y otro, por ejemplo, para darle las gracias al usuario por su tiempo).

En este apartado, se nos mostrará los campos que hemos ido añadiendo en el formulario anterior. Nos aparecerán en negrita y en color negro los campos del formulario que aún no hemos añadido a nuestro correo para ser enviados. Si no disponemos de un sistema de guardado de esta información y no lo incluimos en este correo, la información desaparecerá para siempre.

Si está añadido al menos una vez en el correo, aparecerá en gris en el listado de campos. Además, podremos configurar a dónde queremos enviarlo y de quién será. Si añadimos al usuario que nos ha enviado el formulario en este último campo, podremos responderle directamente desde el correo.

3. Pestaña ‘Mensajes’

En este apartado, podremos personalizar todos los mensajes que se mostraran si alguno de los campos ha sido rellenado de forma incorrecta. Así, podremos comunicar al usuario de forma correcta y a nuestra elección de por qué se ha equivocado.

Los mensajes han sido traducidos por la comunidad, pero a lo mejor queremos ser más cercanos y menos robóticos. Y puede que la mayoría de los mensajes estén correctos, o prefieras añadir un mensaje personalizado cuando se produce un error.

Además, a los que le preocupan la seguridad en estos formularios, pueden poner el mismo mensaje de error en todos los posibles para que no se den pistas de por qué ha ocurrido el error si alguien nos está intentando atacar mediante el formulario.

4. Pestaña ‘Ajustes adicionales’

Como bien dice su nombre, puedes incluir ajustes adicionales a Contact Form 7 de entre las opciones que están documentadas en la página web. Ajustes como permitir que sólo los usuarios registrados puedan enviar este formulario, que no se envíe un correo o activar modo demostración para hacer pruebas son algunas de las opciones que nos permiten activar.

Además, podemos incluso añadir código JavaScript para mostrar una alerta, añadir una imagen de carga o modificar ciertos aspectos a través del DOM.

5. Añadir nuestro formulario a una página o entrada

Para añadir nuestro formulario a páginas, entradas o widgets de texto, podemos obtener el texto en la ventana de edición dentro de cada uno de nuestros formularios, enmarcado en un cuadro tono azul oscuro suave estará el shortcode a copiar.

Los shortcodes son trozos de código que pueden generar los plugins para añadir bloques de texto en cualquier parte de texto en WordPress. Son muy útiles para estos ejemplos como añadir un formulario o puede que un código PHP para realizar una función.

Si queremos añadirlo, por ejemplo, a una página de contacto creada en WordPress 5.0 (con el editor Gutenberg, del que tanto se está hablando ultimamente), nos detectará que es un shortcode y nos añadirá el bloque ‘Shortcode’. Puede que en otros apartados, fuera de los originales de WordPress, se necesite un plugin especial para añadir el shortcode.

Si añadimos el shortcode a nuestra página de contacto, Gutenberg nos mostrará la siguiente vista:

Conclusión

Como podéis comprobar, hay muchos estilos de textos y campos para combinar y crear nuestro formulario perfecto en WordPress. Y si incluimos más plugins que añadan más funciones a Contact Form 7, podremos hacer casi cualquier cosa.

Existen otros plugins aparte de Contact Form 7 con los que puede ser más fácil crear los formularios de forma visual, pero nuestro querido Contact Form 7 posee muchas opciones de campos y permite, también, la edición o configuración de éstos de forma manual, mientras que otros te obligan a modificar el formulario mediante JavaScript y forzando ciertos estilos a los que se muestran.

Aprender a utilizar este constructor de formularios en WordPress es fácil gracias a su documentación con varios ejemplos y muestras de cómo se ejecutaría si añadimos diferentes configuraciones a cada uno de sus elementos.

Y tú, ¿utilizas Contact Form 7 en los formularios de WordPress? ¿Utilizas algún plugin complementario? ¿Utilizas otro plugin para formularios?