Ahora aprenderemos a crear la típica pantalla contacto con un formulario básico.

WordPress de serie, no viene con ninguna opción para generar un formulario de contacto, por lo que necesitaremos un plugin que nos permita crearlo.

🔧 Instalar y activar el plugin «Contact Form 7»

Recuerda que aquí tenemos un 🔌 listado de plugins imprescindibles para WordPress.

También recuerdas 🔧 ¿cómo instalar un plugin en WordPress?

Bien, pues en este ejemplo instalaremos «Contact Form 7«, que es un plugin para crear formularios de contacto, ligero, bastante sencillo y además gratuito.

⚙️ Configuración inicial del formulario de contacto

Una vez instalado y activado «Contact Form 7» nos vamos a «Contacto → Formularios de contacto» , opción que anteriormente no aparecía 👀:

Tendremos de ejemplo un formulario ya creado llamado «Formulario de contacto 1«. Podemos usar éste para comenzar a trabajar, por lo que vamos a editarlo.

🧪 Personalizar nuestros campos del formulario

Una vez dentro nos aparecerá una pantalla como ésta en la que aparece:

📣 Titulo del formulario: «Formulario de contacto 1».

🧩 Código Shortcode: que copiaremos y pegaremos donde queramos nuestro formulario [en la imagen es lo que aparece en azul entre corchetes].

⚙️ Pestañas con más opciones: Formulario, Correo, Mensajes, Ajustes adicionales.

🎙️ Campos de formulario disponibles: Son los botones que aparecen de «texto, correo electrónico, url, teléfono, número, etc».

🥁 Código HTML del formulario: Éste código «dibujará» nuestro formulario. Podemos cambiar el orden de los campos, el texto de cada campo, si serán obligatorios o no, cambiar el texto del botón «Enviar», etc.

🧬 Introducir un nuevo campo al formulario

Para éste ejemplo vamos a introducir un nuevo campo llamado «Teléfono» para que el usuario pueda introducirlo.

En el código, hacemos clic entre los [shortcodes] «Tu correo electrónico» y «Asunto» y hacemos «intro» en el teclado para darle espacio al nuevo campo que vamos a insertar.

Hacemos clic el botón que se llama «teléfono» y aparecerá este popup:

En «Nombre del campo» vamos a cambiarlo por ☎️ «tel-telefono» para que sea más cómodo a nosotros identificarlo y pulsamos el botón «Insertar«.

Nos aparecerá el nuevo shortcode del campo teléfono:

Si te fijas, he puesto un asterisco * al final del tipo de campo: [tel* tel-telefono]

El asterisco indica que el campo será obligatorio. También se puede poner desde el popup anterior.

También he escrito un texto «Teléfono» para que lo vea el usuario.

Todo lo he envuelto entre etiquetas <label></label> ¿que hace esto? Ésto envuelve el texto «Teléfono» y el campo de tal manera que si el usuario hace clic en el texto, señalará directamente la caja para que el usuario pueda escribir dentro de ella. Si no se pone las etiquetas «label» si el usuario hace clic en el texto «Teléfono», simplemente seleccionará el texto pero no la caja. Prueba a ver la diferencia de poner las etiquetas <label> y sin <label>.

📨 Configurar el email que nos llegará del usuario

Nos vamos a la pestaña «Correo»:

En la parte señalada en verde, verás nuestro [shortcode] de teléfono que hemos creado y que aparece en negrita.

Ésto quiere decir que el campo está creado en el formulario pero no lo estamos usando en el email que nos enviarán.
Por lo tanto, vamos a copiar y pegar el [shortcode] en el cuerpo del mensaje del email, junto con el texto «Teléfono»:

Cuando nos llegue éste email, los [shortocodes] serán sustituidos por el contenido que el usuario ha introducido.

🧓🏾 En el apartado «Para»: Debes poner el correo electrónico a donde quieras que llegue el email.
Si dejas el [shortcode] predeterminado que aparece, llegará al email de administrador que tendrás configurado en tu wordpress.

🧑🏽‍🦱 En el apartado «De»: Debes poner el correo electrónico del emisor.

👉 IMPORTANTE: Éste correo debe tener el mismo dominio de la web para que no se considere SPAM. Es decir, si tu web es «mentazen.com» el correo electrónico del emisor deberá ser por ejemplo «xxxxxx@mentazen.com» y no «xxxxxx@algodiferente.com»

Guarda el formulario, ahora verás que el [shortcode] ya no aparecerá en negrita, eso es por que ahora lo estamos usando en el email.

📖 Cambiar los textos de información, error, etc, del formulario

Nos vamos a la pestaña «Mensajes»:

Si lo deseas o necesitas, aquí puedes cambiar el mensaje que aparece al usuario al enviar un mensaje con éxito «Gracias por tu mensaje. Ha sido enviado» y otros tipos de mensajes como los de aviso o error.

❇️ Tip: Cambiar estos textos también es útil cuando queremos traducir una web a diferentes idiomas, creando un formulario diferente por cada idioma y traduciendo los textos.

Finalmente Guarda el formulario.

📬 Insertar el formulario en nuestra página de Contacto

Veremos el [shorcode] de nuestro formulario, que será parecido a éste que marco en verde, ¡COPIALO!:

También lo puedes encontrar desde la pantalla inicial donde nos aparecen todos los formularios «Contacto → Formularios de contacto»

Cada formulario, en su [shortcode] tendrá un id=»xxxx» diferente, que será lo que identifique de forma única cada formulario. Por eso, puede que tu formulario tenga un id diferente.

Bien, pues con el [shortcode] copiado, pégalo en tu página de «Contacto» en la zona que quieras del contenido junto con el texto que quieras añadir como «Éste es nuestro formulario», guarda y visualiza tu pantalla.

Se tendría que ver algo así:

Claro que el aspecto puede ser totalmente diferente, ya que depende de nuestro Theme instalado. Lo importante es que aparezcan nuestros campos.

❇️ Tip: Cuando un campo es obligatorio es recomendable poner alguna identificación como  un asterisco *Teléfono, y poner alguna frase tipo «*Campos obligatorios», para que el usuario interprete que será un campo obligatorio.

¡Listo! 🎉  Ya tenemos nuestro formulario. Ahora si pruebas a enviarlo puede que funcione o no. ¿Por qué? Pues porque seguramente tengamos que configurar el servidor SMTP, que es la configuración que sirve para enviar correos desde la web.