Resumen de IA
¿Quieres evitar que una página se recargue cuando alguien envía uno de tus formularios en línea?
Evitar que una página se actualice después de que alguien envíe un formulario mejora la experiencia del usuario e incluso puede ayudarte a conseguir más clientes potenciales.
En este artículo
Crea un formulario de contacto AJAX en WordPress
Este tutorial sobre formularios de contacto AJAX en WordPress funcionará con cualquiera de las más de 2100 plantillas de formularios de WordPress incluidas con WPForms.
Nota: AJAX está habilitado automáticamente en las versiones más recientes de WPForms. Este tutorial explica cómo activarlo si has utilizado una versión anterior para crear tus formularios.
1. Crea un formulario nuevo
Para empezar, instala y activa el plugin WPForms. Para más detalles, consulta este tutorial paso a paso sobre cómo instalar un plugin en WordPress.
Una vez que hayas instalado el plugin WPForms, ve a WPForms » Añadir nuevo para crear un formulario nuevo.
Selecciona una plantilla de la lista:
Usaremos la plantilla Formulario de contacto simple para este tutorial.
2. Personaliza tu formulario
Ahora es el momento de construir tu formulario. Puedes personalizar fácilmente los campos del formulario arrastrándolos desde el lado izquierdo del constructor al área de vista previa en la derecha.
Añadiremos un campo de Carga de archivos a nuestro formulario de contacto para que los usuarios puedan incluir cualquier documento relevante con su envío.
Ajusta la colocación de los campos a tu gusto arrastrándolos hacia arriba y hacia abajo en tu formulario.
También puedes hacer clic en cualquier campo en el área de vista previa para abrir opciones adicionales. Esto te permitirá cambiar las etiquetas de los campos, añadir lógica condicional y más.
Cuando estés listo, haz clic en el botón naranja Guardar en la esquina superior derecha.
Ahora que hemos creado un formulario con un campo de Carga de archivos, vamos a habilitarlo para AJAX.
3. Habilita el envío de formularios AJAX
A continuación, en el lado izquierdo de tu página, haz clic en Ajustes. Luego selecciona la sección General .
En la parte inferior del panel derecho, expande las opciones Avanzadas y localiza el ajuste Habilitar envío de formularios AJAX. Asegúrate de que esté activado.
¡Eso es todo! Tu formulario ahora está habilitado para envíos AJAX.
Vamos a configurar un par de cosas importantes más con tu formulario de contacto AJAX.
4. Configura las notificaciones de tu formulario
Lo siguiente que necesitarás hacer es configurar las notificaciones por correo electrónico de tu formulario. Estas son una excelente manera de saber cuándo alguien envía uno de tus formularios habilitados para AJAX.
Para empezar, ve a Ajustes » Notificaciones.
A menos que desactives la función de notificación, recibirás una notificación por correo electrónico cada vez que alguien envíe tu formulario AJAX.
Para obtener ayuda para completar esta configuración, consulta nuestro tutorial sobre cómo configurar notificaciones de formularios en WordPress.
Este ejemplo tiene un fondo gris, pero puedes cambiar el color a algo más si lo deseas. Estos ajustes personalizados pueden hacer que tus notificaciones por correo electrónico se vean más profesionales y darles un toque personal. Consulta nuestra guía sobre cómo añadir una cabecera personalizada a tu plantilla de correo electrónico.
5. Configura tus confirmaciones
Las confirmaciones de formularios te permiten realizar acciones inmediatamente (y automáticamente) después de que tu usuario haya enviado información a tu formulario.
Hay 3 tipos diferentes de confirmaciones en WPForms:
- Mensaje — Este es el tipo de confirmación predeterminado que aparece después de que alguien envía tu formulario y es personalizable. Consulta nuestros consejos sobre cómo personalizar tu mensaje de confirmación para aumentar la satisfacción de los visitantes de tu sitio.
- Página de visualización — Envía automáticamente a los usuarios a cualquier página de tu sitio.
- Redirección — Útil si deseas dirigir al usuario a un sitio web diferente o a una URL especializada para un desarrollo más complejo.
Para obtener ayuda adicional con este paso, consulta nuestro tutorial sobre cómo configurar confirmaciones de formularios.
Una vez que hayas terminado de configurar tus notificaciones y confirmación, asegúrate de guardar tu formulario de nuevo.
6. Incrusta tu formulario AJAX
Una vez que hayas terminado de configurar tu formulario con AJAX a tu gusto, querrás añadirlo a tu sitio.
WPForms te permite añadir tus formularios a varios lugares de tu sitio web, incluyendo tus páginas, entradas de blog y widgets de barra lateral. Echemos un vistazo a la opción de colocación más común: la incrustación en páginas o entradas.
Para empezar, crea una nueva página o entrada en WordPress, o abre una existente en el editor.
Después de eso, añade un nuevo bloque y selecciona el icono de WPForms. Si no lo ves de inmediato, puedes buscarlo para encontrarlo.
El práctico widget de WPForms aparecerá dentro de tu bloque. Haz clic en el menú desplegable de WPForms y elige cuál de los formularios que ya has creado quieres insertar en tu página. Selecciona tu formulario AJAX.
A continuación, haz clic en el botón azul en la parte superior derecha que dice Publicar o Actualizar, para que tu formulario aparezca en tu sitio web.
Y ahí lo tienes. Ahora sabes cómo crear un formulario de contacto AJAX simple en WordPress sin recarga de página, y a tus visitantes del sitio web les encantará aún más por ello.
Preguntas frecuentes sobre formularios AJAX
¿Qué es un formulario AJAX?
Un formulario con AJAX es un formulario rápido y dinámico que puede enviar y ejecutar procesos de backend sin necesidad de que toda la página se actualice.
Por defecto, toda la página necesita recargarse cuando un usuario pulsa enviar. Esto se debe a que ciertos procesos necesitan ejecutarse, incluyendo el almacenamiento de los datos del formulario, el envío de correos electrónicos de notificación y más.
Pero como WordPress y WPForms admiten formularios AJAX, tienes la opción de habilitar los envíos de formularios AJAX para evitar que tus formularios se actualicen después de que alguien envíe el formulario.
¿Por qué se utiliza AJAX en los formularios de contacto?
Los formularios con AJAX se han convertido de repente en algo imprescindible para sitios web de todos los tamaños.
Estas son las principales razones por las que AJAX se está volviendo rápidamente popular para usar en formularios de contacto:
- Proporciona una experiencia de usuario mucho mejor.
- Tiempos de carga ultrarrápidos y aumento de la velocidad del sitio de WordPress.
- Mantiene abiertos los modales y ventanas emergentes que contienen tu formulario para que puedas mostrar una acción o mensaje de seguimiento para impulsar las ventas.
- Proporciona señales visuales y seguridad de que el formulario se está procesando.
A continuación, crea un formulario emergente de WordPress
Ahora que puedes mantener tus ventanas emergentes abiertas después de que alguien pulse enviar, querrás un gran plugin para mostrar un mensaje dirigido.
- Asegúrate de leer nuestra entrada sobre los mejores plugins de ventanas emergentes para WordPress.
- Descubre 2 formas diferentes de crear un formulario emergente en WordPress.
- Y por último, aprende a crear un popup con un código de cupón usando WPForms.
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
Gracias
Usé las instrucciones, pero no funciona.
cuando envío un formulario con manejo personalizado, veo 2 solicitudes a /wp-admin/admin-ajax.php
la primera (que es la que realmente desencadeno) falla con Forbidden (relacionado con nonce) y en realidad quiero desencadenar una función personalizada que procese los datos del formulario.
La segunda tiene éxito, pero devuelve la confirmación que quiero omitir.
¿Cómo puedo hacer esto? ¿Cómo puedo lograr un formulario AJAX con manejo de cliente?
Gracias.
Hola Eli. Parece que necesitarías una solución personalizada para lograr lo que buscas. Te recomendamos consultar con Seahawk, que puede trabajar contigo en esto.