¿Quieres evitar que tu página se actualice cuando un visitante envía un formulario? Por defecto, toda la página se recarga al hacer clic en el botón de envío del formulario. Y es en ese momento cuando los datos ingresados en el formulario se transfieren y almacenan en el servidor.
En este artículo te mostraremos cómo habilitar el envío Ajax en tus formularios de WordPress y evitar que la página se recargue.
¿Por qué habilitar el envío de formularios Ajax en WordPress?
El envío de formularios Ajax es especialmente útil si deseas incrustar un formulario en una ventana emergente modal. Sin el envío de formularios Ajax habilitado, toda la página tendría que recargarse, lo que provocaría el cierre de la ventana emergente. De esa manera, los usuarios podrían perderse el importante mensaje de confirmación que los mantiene interesados.
Con el envío de formularios Ajax habilitado, tus usuarios podrían ver el mensaje de confirmación al enviar el formulario en la misma página sin recargar.
Para habilitar el envío de formularios ajax en tu sitio de WordPress, te recomendamos WPForms, el mejor plugin de formularios para WordPress.
Paso 1: Creando un Nuevo Formulario
Para empezar a crear tu formulario, primero tendrás que instalar el plugin WPForms en tu sitio web de WordPress.
¿No estás seguro de cómo hacerlo? No hay problema. Puedes ir a nuestra guía sobre cómo instalar un plugin de WordPress para resolverlo.
Una vez que el plugin esté instalado y activado, ve a tu panel de WordPress y navega a WPForms » Añadir Nuevo. Ahora serás redirigido a una página donde podrás seleccionar una plantilla para tu formulario.
WPForms ofrece varias plantillas de formularios para elegir. Seleccionemos la plantilla Formulario de Carga de Archivos para este tutorial. También podrías trabajar con la plantilla Formulario de Contacto Sencillo.
Ahora verá el creador de formularios en su pantalla. En el lado izquierdo de su pantalla, tiene las pestañas Agregar campos y Opciones de campo. Puede usar estas pestañas para configurar su formulario de contacto.
Si está utilizando la plantilla de Carga de archivos, el campo ya se habrá agregado a su formulario. Si desea agregar el campo a cualquier otra plantilla, todo lo que tiene que hacer es arrastrar el campo de formulario Carga de archivos y soltarlo en su posición preferida en el creador de formularios.
De esta manera, WPForms le facilita agregar campos a su formulario con arrastrar y soltar. También puede cambiar la posición de los campos arrastrando y soltando. Si desea eliminar un campo, eso también es fácil. Simplemente mueva el cursor sobre el campo no deseado y haga clic en el ícono de eliminar que aparecerá en la esquina superior derecha del campo.
En la pestaña Opciones de campo, puede cambiar la etiqueta del campo, cambiar el formato del campo de nombre, alterar el tamaño de la fuente y habilitar o deshabilitar etiquetas y subetiquetas. También tiene la opción de habilitar la opción de lógica condicional.
Una vez que haya terminado de crear su formulario con el creador de formularios, haga clic en el botón guardar, para que sus cambios permanezcan intactos.
Paso 3: Habilitar el envío de formularios Ajax
Una vez que sus cambios se guarden, haga clic en la pestaña Configuración en el lado izquierdo de su creador de páginas. Verá varias opciones aquí. Vaya a la opción General. Debajo de esto, verá una serie de campos. Aquí puede cambiar el nombre de su formulario, agregar una descripción del formulario, cambiar el texto del botón, etc.
Si se desplaza más abajo en la pantalla, verá algunas casillas de verificación. Puede seleccionar la casilla que dice Habilitar envío de formularios Ajax. Complete el proceso haciendo clic en el botón Guardar en la esquina superior derecha de su pantalla.
Ahora ve a la pestaña Notificaciones debajo de la pestaña General. Esta opción te notificará cada vez que alguien envíe tu formulario. Así que en el primer campo, ingresa la dirección de correo electrónico del administrador o de quien esté a cargo de recibir los correos. También puedes ingresar el asunto del correo, el nombre del remitente, la dirección del destinatario y un mensaje propio.
Una vez hecho esto, asegúrate de guardar los cambios. También puedes establecer un mensaje de confirmación que los visitantes recibirán después de presionar el botón de enviar.
Paso 4: Publicar tu formulario con envío Ajax
El último paso es publicar tu formulario habilitado para envío Ajax en tu sitio web. Para ello, ve a la página donde quieres que aparezca el formulario.
Puedes empezar yendo a Páginas » Añadir Nueva en tu panel de WordPress. Ahora añade un título a tu página. En el editor de texto de tu página, añade un nuevo bloque y busca WPForms.
Cuando añadas el bloque, verás la mascota de WPForms con un menú desplegable para elegir el formulario que acabas de crear.
Selecciona tu formulario preferido y una Vista previa de tu formulario aparecerá en tu página.
También puedes añadir el formulario en el Editor Clásico usando el botón 'Añadir Formulario', así:
Luego puedes hacer clic en el botón Publicar para que el formulario finalmente se ponga en línea.
Fue fácil, ¿verdad?
Es posible que ahora quieras rastrear el número de clics en el botón que recibe tu formulario de contacto. Para hacer esto, consulta nuestra guía sobre cómo rastrear enlaces y clics en botones.
Comentarios Dejar una respuesta