Cómo mostrar la confirmación y el formulario nuevamente después del envío

¿Te interesa mostrar el mensaje de confirmación del formulario junto con el formulario en sí después del envío? Normalmente, cuando se envía un formulario, tienes la opción de mostrar un mensaje de confirmación o redirigir a otra página web. Sin embargo, en este tutorial, te guiaremos a través del proceso de lograr ambas cosas utilizando un simple fragmento de código.

Creación del formulario

Primero, necesitarás crear un nuevo formulario. Para el propósito de este tutorial, ya hemos completado este paso. Sin embargo, si necesitas ayuda para crear un formulario con WPForms, por favor revisa esta documentación.

Para nuestro formulario, hemos añadido solo los campos de formulario Nombre, Email y Texto de párrafo.

Desactivar AJAX en el formulario

A continuación, deberás asegurarte de que la opción Habilitar envío de formularios AJAX esté desactivada en el formulario. Para comprobar esta configuración, haz clic en la pestaña Ajustes dentro del constructor de formularios y luego haz clic en General.

Mostrar la confirmación y el formulario

A continuación, deberás añadir un pequeño fragmento de código a tu sitio que permitirá que el formulario se muestre de nuevo antes del mensaje de confirmación.

Si necesitas ayuda para añadir fragmentos a tu sitio, por favor revisa este tutorial.

/*
 * Display confirmation message and form after successful submission.
 *
 * @link  https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
 */
  
function wpf_dev_frontend_output_success(  $form_data, $fields, $entry_id ) {
       
    // Optional, you can limit it to specific forms. Below, we restrict output to form #235.
    if ( absint( $form_data[ 'id' ] ) !== 235 ) {
        return;
    }

    // Reset the fields to blank
	unset(
		$_GET[ 'wpforms_return' ],
		$_POST[ 'wpforms' ][ 'id' ]
	);
 
	// Comment this line out if you want to clear the form field values after submission
	unset( $_POST[ 'wpforms' ][ 'fields' ] );

	// Actually render the form.
	wpforms()->frontend->output( $form_data[ 'id' ] );
  
}
 
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

Dado que solo queremos que este fragmento se ejecute en un formulario en particular, estamos usando if ( absint( $form_data[ 'id' ] ) !== 235 ). Esto significa que este fragmento se ejecutará solo si el ID del formulario coincide con 235.

Si deseas mantener los valores dentro de los campos del formulario después de que el formulario se envíe, simplemente comenta la línea unset( $_POST[ 'wpforms' ][ 'fields' ] );. Puedes hacer esto añadiendo dos barras (//) delante del código de campos no establecidos.

Ejemplo:

// unset( $_POST[ 'wpforms' ][ 'fields' ] );

¡Ahora verás que cuando se envía el formulario, tus visitantes verán la confirmación y el formulario en la misma página después de que se envíe el formulario!

¡Y eso es todo! ¿Te gustaría establecer una fecha predeterminada en tu selector de fecha? Echa un vistazo a nuestro tutorial sobre Cómo establecer una fecha predeterminada para el campo de tu selector de fecha.

Acción de referencia

wpforms_frontend_output_success

Preguntas frecuentes

P: ¿Por qué mi mensaje de confirmación aparece debajo del formulario?

R: Si tu mensaje de confirmación aparece encima de tu formulario y te gustaría que apareciera debajo, por favor cambia la prioridad de esta función.

Para explicar qué es la prioridad de una función, echemos un vistazo al fragmento de arriba, específicamente a la última línea.

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

En este caso, el nombre del hook de acción (tal como lo define WPForms) es wpforms_frontend_output_success, el nombre de nuestra función es wpf_dev_frontend_output_success. Dentro de esta función, pasamos 3 argumentos ($form_data, $fields, $entry_id), y tenemos la prioridad predeterminada establecida en 10.

Dado que queremos que la funcionalidad predeterminada del formulario aparezca primero, en este caso, el mensaje de confirmación, necesitamos cambiar la prioridad para que el mensaje aparezca primero y la función se ejecute después. Para ello, vamos a aumentar la prioridad a 1000.

La mayoría de las funciones utilizan 10 como número de prioridad predeterminado, por lo que si desea que algo se ejecute antes, debería establecer una prioridad inferior a 10; si desea que la función se ejecute después, aumente la prioridad a algo superior a 10.

/*
 * Display confirmation message and form after successful submission.
 *
 * @link  https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
 */
 
function wpf_dev_frontend_output_success(  $form_data, $fields, $entry_id ) {
      
    // Optional, you can limit it to specific forms. Below, we restrict output to form #235.
    if ( absint( $form_data[ 'id' ] ) !== 235 ) {
        return;
    }
                // Reset the fields to blank
		unset(
			$_GET[ 'wpforms_return' ],
			$_POST[ 'wpforms' ][ 'id' ]
		);

		// Comment this line out if you want to clear the form field values after submission
		unset( $_POST[ 'wpforms' ][ 'fields' ] );

		// Actually render the form.
		wpforms()->frontend->output( $form_data[ 'id' ] );
 
}

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 1000, 3 );

P: ¿Por qué no me funciona el fragmento?

R: Si el fragmento no funciona, asegúrese de haber cambiado el 235 para que coincida con el ID de su propio formulario en su sitio. Por favor, vea este tutorial para ayudarle a encontrar el ID de su formulario.

¿Por qué veo una página en blanco después de enviar por segunda vez?

R: Si ve una página en blanco o un error AJAX en el registro de la consola, asegúrese de haber deshabilitado AJAX como se menciona en los pasos anteriores. Este fragmento solo funcionará si AJAX está deshabilitado en el formulario.