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

enviar un formulario sin actualizar la página


¿Desea evitar que su 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 entonces cuando los datos ingresados ​​en el formulario se transfieren y almacenan en el servidor.

En este artículo le mostraremos cómo habilitar el envío de Ajax en sus formularios de WordPress y evitar que la página se vuelva a cargar.

¿Por qué habilitar el envío de formularios Ajax en WordPress?

El envío de formularios Ajax es especialmente útil si desea incrustar un formulario en una ventana emergente modal. Sin el envío del formulario AJAX habilitado, toda la página necesitaría actualizarse, lo que llevaría al cierre de la ventana emergente. De esa forma, los usuarios podrían perderse el importante mensaje de confirmación que los mantiene interesados.

Con el envío del formulario AJAX habilitado, sus usuarios pueden ver el mensaje de confirmación al enviar el formulario en la misma página sin necesidad de volver a cargar.

envíos de formularios ajax

Para habilitar el envío de formularios ajax en su sitio de WordPress, le recomendamos WPForms, el mejor complemento de formularios para WordPress.

Paso 1: crear un nuevo formulario

Para comenzar a crear su formulario, primero deberá instalar el complemento WPForms en tu sitio web de WordPress.

¿No estás seguro de cómo? No hay problema. Puede consultar nuestra guía sobre cómo instalar un complemento de WordPress para solucionarlo.

Una vez que el complemento esté instalado y activado, vaya a su panel de WordPress y navegue hasta WPForms »Agregar nuevo. Ahora será redirigido a una página donde puede seleccionar una plantilla para su formulario.

WPForms ofrece 7 plantillas de formulario diferentes para elegir. Seleccionemos el Formulario de contacto simple opción para este tutorial y luego agregue un campo de carga de archivos al formulario.

Configuración de formulario de WPForms

Ahora verá el generador de formularios en su pantalla. En el lado izquierdo de su pantalla, tiene el Agregar campos y el Opciones de campo lengüeta. Puede usar estas pestañas para configurar su formulario de contacto.

eliminar un campo de wpforms

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 desplace el cursor sobre el campo no deseado y haga clic en el Eliminar icono que aparecerá en la esquina superior derecha del campo.

Bajo la Opciones de campo pestaña, puede cambiar la etiqueta del campo, cambiar el formato del campo de nombre, alterar el tamaño de fuente y habilitar o deshabilitar etiquetas y subetiquetas. También tiene una opción para habilitar el lógica condicional opción.

Una vez que haya terminado de crear su formulario con el generador de formularios, haga clic en el salvar botón, para que sus cambios permanezcan intactos.

Ahora que hemos creado un formulario de contacto simple, agreguemos la función de carga de archivos.

Para agregar una función de carga de archivos, todo lo que tiene que hacer es hacer clic en el campo Carga de archivos en el panel izquierdo. Alternativamente, puede arrastrar el campo de formulario Subir archivo y soltarlo en su posición preferida en el generador de formularios.

formulario de carga de archivos

Paso 3: Habilitar el envío del formulario Ajax

Una vez que haya guardado sus cambios, haga clic en el Configuraciones pestaña en el lado izquierdo del generador de páginas. Verá varias opciones aquí. Ve a la General opción. 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 de verificación que dice Habilitar el envío del formulario Ajax. Complete el proceso haciendo clic en el Salvar botón en la esquina superior derecha de la pantalla.

habilitar el envío del formulario ajax

Ahora ve al Notificación pestaña debajo de la General lengüeta. Esta opción le notificará cada vez que alguien envíe su formulario. Entonces, en el primer campo, ingrese la dirección de correo electrónico del administrador o de quien esté a cargo de recibir los correos electrónicos. También puede ingresar el asunto del correo electrónico, el nombre del remitente, la dirección del destinatario y un mensaje propio..

Una vez hecho esto, asegúrese de guardar los cambios. También puede configurar un mensaje de confirmación que recibirán los visitantes después de presionar el botón Enviar.

configuración de confirmación de formulario de carga de archivos

Paso 4: Publica tu formulario con el envío de Ajax

El último paso es publicar su formulario habilitado de envío de Ajax en su sitio web. Para eso, vaya a la página donde desea que aparezca el formulario.

Puedes comenzar yendo a Páginas »Agregar nuevo en tu panel de WordPress. Ahora agregue un título a su página. En el editor de texto de su página, haga clic en el Añadir formulario opción. Aparecerá una nueva ventana en tu pantalla.

formulario de inserción wpforms

Haga clic en la flecha desplegable y seleccione el formulario que acaba de crear. Ahora haga clic en el Añadir formulario botón. Verá que el código de inserción se refleja en el editor de texto de su página. Puede verificar cómo se ve el formulario haciendo clic en el Avance botón en el lado derecho de la pantalla.

Luego puede hacer clic en el Publicar botón para finalmente dejar que el formulario se active.

Eso fue fácil, ¿no??

Es posible que ahora desee realizar un seguimiento del número de clics que recibe su formulario de contacto. Para hacer esto, consulte nuestra guía sobre seguimiento de enlaces y clics de botones.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map