Los formularios de contacto son una herramienta esencial para cualquier sitio web, permitiendo a los visitantes comunicarse de manera fácil y directa con los propietarios del sitio.
En WordPress, puedes crear formularios de contacto personalizados y mostrarlos en cualquier lugar de tu sitio utilizando shortcodes.
En este artículo, te guiaré a través de los pasos para crear un formulario de contacto simple que redirija los mensajes recibidos directamente a WhatsApp. Utilizaremos código PHP, HTML y JavaScript para construir el formulario y gestionar el envío de mensajes.
Paso 1: Crear la función para mostrar el formulario de contacto
La primera tarea es crear una función en PHP que genere el HTML del formulario de contacto. Utilizaremos la función ob_start() para almacenar la salida en un búfer y luego retornarla al final de la función.
Paso 2: Agregar los campos al formulario
En el formulario de contacto, necesitamos recopilar información básica del usuario, como su nombre, correo electrónico, teléfono y mensaje. Utilizaremos etiquetas <label> para describir cada campo y <input> o <textarea> para que el usuario pueda ingresar su información. Además, añadiremos un botón de envío para enviar el formulario. Aquí están los campos que incluiremos:
- Nombre
- Correo electrónico
- Teléfono (opcional)
- Mensaje
Paso 3: Capturar y formatear los datos del formulario
Cuando el usuario envíe el formulario, utilizaremos JavaScript para capturar los valores de los campos y formatearlos en un mensaje que será enviado a través de WhatsApp. Esta parte del código JavaScript se encargará de esa tarea.
Paso 4: Redireccionar al usuario a WhatsApp
Después de formatear el mensaje, crearemos una URL de WhatsApp con el mensaje formateado y redireccionaremos al usuario a esa URL. Esto permitirá al usuario enviar el mensaje directamente desde su aplicación de WhatsApp.
Paso 5: Registrar el shortcode
Finalmente, registraremos el shortcode para que el formulario de contacto se pueda mostrar en cualquier parte del sitio utilizando [formulario_contacto].
En el vídeo veremos el código funcionar, explicaré un poco lo que hace cada parte del código y veremos como agregar más campos en el formulario.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
🔐 Este contenido es solo para suscriptores premium.
Conclusión
En resumen, hemos creado un formulario de contacto personalizado en WordPress que redirige los mensajes recibidos directamente a WhatsApp. Este formulario proporciona una forma conveniente para que los visitantes se comuniquen contigo, lo que puede mejorar la experiencia del usuario y facilitar la interacción en tu sitio web.
Nos vemos en el siguiente tutorial. Un saludo.
Deja tus opiniones o dudas en los comentarios.