¿Le interesa mostrar el mensaje de confirmación del formulario junto con el propio formulario después de su envío? Normalmente, cuando se envía un formulario, tiene la opción de mostrar un mensaje de confirmación o redirigir a otra página web. Sin embargo, en este tutorial, le guiaremos a través del proceso para lograr ambos usando un simple fragmento de código.
Creación del formulario
En primer lugar, tendrá que crear un nuevo formulario. Para el propósito de este tutorial, ya hemos completado este paso. Sin embargo, si necesita ayuda para crear un formulario con WPForms, por favor revise esta documentación.
Para nuestro formulario, sólo hemos añadido los campos Nombre, Correo electrónico y Texto de párrafo.
Desactivar AJAX en el formulario
A continuación, tendrás que asegurarte de que la opción Habilitar envío de formularios AJAX está desactivada en el formulario. Para comprobar esta configuración, haga clic en la pestaña Configuración dentro del constructor de formularios y, a continuación, haga clic en General.
Visualización de la confirmación y del formulario
A continuación, tendrá que añadir un pequeño fragmento de código a su sitio que permitirá que el formulario se muestre de nuevo antes del mensaje de confirmación.
Si necesita ayuda para añadir fragmentos a su sitio, consulte 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 sólo queremos que este fragmento se ejecute en un formulario concreto, utilizamos el método if ( absint( $form_data[ 'id' ] ) !== 235 ). Esto significa que este fragmento sólo ejecutar si el ID del formulario coincide 235.
Si necesita ayuda para identificar el número de identificación de su formulario, consulte este tutorial.
Si desea mantener los valores dentro de los campos del formulario después de que éste se envíe, sólo tiene que comentar el campo unset( $_POST[ 'wpforms' ][ 'fields' ] );. Puede hacerlo añadiendo dos barras oblicuas (//) delante del código de los campos no configurados.
Por ejemplo:
// unset( $_POST[ 'wpforms' ][ 'fields' ] );
Ahora, cuando se envíe el formulario, los visitantes verán la confirmación y el formulario en la misma página.
Y ya está. ¿Le gustaría establecer una fecha por defecto en su selector de fecha? Eche un vistazo a nuestro tutorial sobre Cómo establecer una fecha predeterminada para su campo de formulario selector de fecha.
Acción de referencia
wpforms_frontend_output_success
PREGUNTAS FRECUENTES
P: ¿Por qué aparece mi mensaje de confirmación debajo del formulario?
R: Si su mensaje de confirmación aparece encima de su formulario y desea que aparezca debajo, cambie la prioridad de esta función.
Para explicar qué es la prioridad de una función, echemos un vistazo al fragmento anterior, concretamente a la última línea.
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );
En este caso, el nombre del gancho de acción (como se define por WPForms) es wpforms_frontend_output_success, el nombre de nuestra función es wpf_dev_frontend_output_success. Dentro de esta función, se nos pasan 3 argumentos($form_data, $fields, $entry_id), y tenemos la prioridad por defecto establecida en 10.
Como queremos que la funcionalidad por defecto 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 por defecto, por lo que si desea que algo se ejecute antes de que usted haría la prioridad algo por debajo de 10 si desea que la función se ejecute después, aumentar la prioridad a algo por encima de 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 que ha cambiado el 235 para que coincida con el ID del formulario de su sitio. Consulte este tutorial para encontrar su ID de formulario.
P: ¿Por qué aparece una página en blanco después de enviar por segunda vez?
R: Si ves una página en blanco o un error AJAX en el registro de la consola, por favor asegúrate de que has deshabilitado AJAX como se menciona en los pasos anteriores. Este fragmento sólo funcionará si AJAX está deshabilitado en el formulario.