Cómo enviar un formulario de contacto sin actualización de página en WordPress

Dinos si esto te suena familiar:

Estás creando una nueva cuenta y te están pidiendo toda tu información. Literalmente todo. Pero, usted está interesado en esta empresa, por lo que está cumplimentando debidamente el formulario.

Hace clic en enviar. La p√°gina completa se actualiza.

¬ŅQue es esto?

Hay un momento antes de recibir ese mensaje de confirmaci√≥n cuando entra en p√°nico, ¬Ņno?

¬°¬ŅVoy a tener que completar todo ese formulario OTRA VEZ?!?!

error de envío de formulario

No es una gran experiencia de usuario, ¬Ņverdad?

En este artículo, le mostraremos cómo evitar que la página se vuelva a cargar cuando un usuario envía uno de sus formularios, mejorando la experiencia del usuario e incluso ayudándole a obtener más clientes potenciales y ventas.

El secreto es crear tu formulario de WordPress usando AJAX.

¬ŅPor qu√© habilitar el env√≠o de formularios AJAX en WordPress?

Por defecto, toda su página se volverá a cargar cuando un usuario haga clic en el botón de envío del formulario. Es durante la actualización de esa página cuando los datos que se ingresaron en el formulario se transfieren y almacenan en el servidor y se ejecutan otros procesos (como enviar correos electrónicos).

Dado que AJAX es una tecnolog√≠a basada en navegador en lugar de una tecnolog√≠a basada en servidor, todo sucede en segundo plano. Esto significa que AJAX y JavaScript trabajan juntos para mantener todo funcionando para el usuario y a√ļn as√≠ comunicar toda la informaci√≥n necesaria al servidor.

Todo es muy técnico y científico. Lo importante es que funciona y mantiene la experiencia del usuario sin problemas.

De hecho, AJAX se est√° convirtiendo r√°pidamente en una herramienta imprescindible para todo tipo de sitios web. Estas son algunas de las principales razones por las que AJAX es tan popular para usar en formularios de contacto:

  • Proporciona una experiencia de usuario mucho mejor.
  • Tiempo de carga superr√°pido
  • Aumento de la velocidad del sitio de WordPress
  • Mantiene modales y ventanas emergentes con formularios abiertos para que se muestren sus mensajes de seguimiento
  • Muestra se√Īales visuales y asegura a los usuarios que su formulario se est√° procesando

Hablemos un poco más sobre las ventanas emergentes y cómo los formularios habilitados para AJAX funcionan con ellas.

Formularios y ventanas emergentes de AJAX

encuesta emergente de wordpress final

El env√≠o del formulario AJAX es muy √ļtil si desea incrustar un formulario en una ventana emergente modal.

Sin el envío del formulario AJAX, toda su página debe actualizarse, lo que hace que se cierre la ventana emergente. Si usa mensajes de confirmación o tiene una página de agradecimiento con una oferta de tripwire, sus usuarios se la perderán.

Con el envío del formulario AJAX, no tiene que preocuparse de que los usuarios pierdan las oportunidades de mantenerse comprometidos con su marca o de perder oportunidades de actualizarse; verán el mensaje de confirmación después del envío del formulario en la misma página, todo sin recargar la página.

Cómo enviar un formulario de contacto en WordPress sin actualizar la página

Para crear fácilmente un formulario de WordPress con envío AJAX, recomendamos WPForms, el mejor complemento de formulario para WordPress.

Para comenzar, deber√° instalar el complemento WPForms en su sitio web de WordPress.

Paso 1. Crear un nuevo formulario

Cuando est√© todo instalado y activado, abra su panel de WordPress y vaya a WPForms ¬ĽAgregar nuevo.

agregar un nuevo formulario

Elija una plantilla para su formulario. Vamos a ir con el Formulario de contacto simple modelo. Aseg√ļrese de darle un nombre a su formulario tambi√©n.

crear una forma simple

Una vez que hagas clic en el botón Crear, serás llevado al generador de formularios.

En el lado izquierdo de la pantalla, ver√° Agregar campos y Opciones de campo. Puede usarlos para dise√Īar su formulario de contacto.

herramientas de dise√Īo de formularios

WPForms utiliza un generador de arrastrar y soltar que hace que sea muy fácil agregar campos a su formulario y cambiar su posición.

¬ŅQuieres eliminar un campo? Eso tambi√©n es f√°cil. Solo coloca el cursor sobre el campo que no deseas y haz clic en el √≠cono eliminar en la esquina superior derecha.

haga clic para eliminar un campo de formulario

En el Opciones de campo secci√≥n, puede cambiar la etiqueta de su campo, el formato del campo de nombre, el tama√Īo de fuente y m√°s. Tambi√©n hay herramientas avanzadas como la l√≥gica condicional.

opciones de campo de formulario

¬°Incluso puede usar WPForms para permitir que los usuarios carguen archivos! Para agregar la funci√≥n de carga de archivos, haga clic en Agregar campos ¬ĽCampos de fantas√≠a, luego haga clic en el Subir archivo en el panel de la izquierda, o arr√°strelo y su√©ltelo desde el panel de la izquierda a la ubicaci√≥n deseada en la vista previa del formulario.

agregar campo de carga de archivos

Cuando haya terminado de dise√Īar su formulario, simplemente haga clic en Bot√≥n Guardar.

Paso 2. Habilite el envío del formulario AJAX

Para habilitar el env√≠o del formulario AJAX, haga clic en el Configuraciones pesta√Īa e ir a la General opci√≥n.

Aquí, puede cambiar el nombre de su formulario, agregar una descripción, cambiar el texto del botón y mucho más.

Desplácese hacia abajo en la pantalla y verá algunas casillas de verificación. Haga clic en el que lee Habilitar envío de formulario AJAX, luego haga clic Salvar en la esquina superior derecha de tu pantalla.

habilitar el envío de formulario ajax de wordpress

Ahora, configuremos nuestras notificaciones. Para hacer eso, ve al Notificaciones pesta√Īa debajo de la General leng√ľeta. De manera predeterminada, se le notificar√° cada vez que alguien env√≠e su formulario.

En el primer campo, ingrese la dirección de correo electrónico de la persona que desea recibir los correos electrónicos de notificación. También puede personalizar el asunto, el nombre del remitente, la dirección del destinatario y agregar un mensaje personalizado.

¬°Aseg√ļrese de guardar sus cambios!

Y no olvide configurar un mensaje de confirmación que recibirán sus visitantes una vez que envíen el formulario.

Paso 3. Publique su formulario con el envío de AJAX

El √ļltimo paso es publicar su formulario AJAX WordPress en su sitio web.

Para hacerlo, abra la p√°gina donde desea que aparezca el formulario o vaya a P√°ginas ¬ĽAgregar nuevo en tu panel de WordPress.

En el editor de texto de su p√°gina, haga clic en el A√Īadir formulario opci√≥n:

agregar formulario a la p√°gina de WordPress

Seleccione el formulario que desea del men√ļ desplegable en la nueva ventana que aparece, luego haga clic en el A√Īadir formulario bot√≥n. Ver√° el c√≥digo de inserci√≥n en el editor de texto de su p√°gina.

seleccione el formulario ajax del men√ļ desplegable

Puede ver cómo se verá el formulario para los visitantes haciendo clic en el Avance botón en el lado derecho de su pantalla.

Vista previa de su p√°gina de WordPress

Si está satisfecho con su formulario, haga clic en el Publicar botón y tu formulario es en vivo!

¬°Eso es! Acaba de crear un formulario de WordPress con AJAX que le permitir√° enviar un formulario de contacto sin actualizar la p√°gina. Excelente trabajo.

AJAX es una opci√≥n popular para usar en los formularios de contacto porque mejora la experiencia del usuario y mantiene abiertos sus modales y ventanas emergentes para que pueda mostrar mensajes de seguimiento para aumentar el compromiso y las ventas … ¬°ganar-ganar!

¬ŅQuieres m√°s tutoriales incre√≠bles, consejos de marketing y herramientas, consejos y trucos como este? Sigue a OptinMonster en YouTube, Facebooky Twitter.

OptinMonster puede ayudarlo a hacer crecer su negocio de una manera que nunca creyó posible. ¡Comience con OptinMonster hoy!