Mostrar una imagen después de tu formulario

¿Te gustaría mostrar una imagen después de tu formulario? Con un pequeño fragmento de PHP, puedes añadir fácilmente tu imagen, un vídeo o un mensaje justo debajo del botón de enviar.

En este tutorial, te guiaremos a través de los pasos sobre cómo lograr esto.

Creación del formulario

Primero, necesitarás crear un nuevo formulario o editar uno existente para acceder al creador de formularios. En el creador de formularios, procede a añadir los campos que necesites al formulario.

Añadir el fragmento

Este fragmento de código se puede usar para añadir cualquier cosa debajo de tu formulario. Puedes añadir una imagen, un vídeo o solo texto. Para añadir nuestra imagen después del botón de enviar, necesitarás copiar y pegar este fragmento en tu sitio.

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

En nuestro ejemplo, estamos limitando este fragmento solo al ID del formulario 999. Necesitarás reemplazar este ID con el ID del formulario que deseas dirigir. Si no estás seguro de cuál es el ID de tu formulario y necesitas ayuda para encontrarlo, por favor consulta este tutorial.

/**
 * Output something after your form(s).
 *
 * @link  https://wpforms.com/developers/how-to-display-an-image-after-your-form/
 */
 
function wpf_dev_frontend_output_after( $form_data, $form ) {
      
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #999.
    if ( absint( $form_data[ 'id' ] ) !== 999 ) {
        return;
    } 
  
    // Run code or see example echo statement below.
    echo '<img src="'.get_template_directory_uri().'/images/secured-site.jpg" alt="Verified by Visa" width="80" height="80">';
  
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );

El código anterior src="'.get_template_directory_uri().'/images/ busca un directorio (una carpeta) en tu servidor llamado images dentro de tu directorio de tema. Por lo tanto, la imagen debe estar en la carpeta de imágenes de tu servidor.

Alternativamente, puedes simplemente subir una imagen a tu biblioteca de medios del sitio y actualizar el valor después de src= con la URL de la imagen. Así es como se verá el fragmento actualizado si usas una imagen de la biblioteca de medios de WordPress.

/**
 * Output something after your form(s).
 *
 * @link  https://wpforms.com/developers/how-to-display-an-image-after-your-form/
 */
 
function wpf_dev_frontend_output_after( $form_data, $form ) {
      
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #999.
    if ( absint( $form_data[ 'id' ] ) !== 999 ) {
        return;
    } 
  
    // Run code or see example echo statement below.
    echo '<img src="http://myexamplesite.com/wp-content/uploads/2021/01/image-name.jpg " alt="Verified by Visa" width="80" height="80">';
 
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );

Preguntas frecuentes

Estas son respuestas a algunas de las preguntas más frecuentes que vemos sobre cómo añadir imágenes después del botón de enviar en WPForms.

P: ¿Cómo puedo mostrar texto con un enlace después del formulario?

R: Si solo quieres mostrar algo de texto con un enlace, puedes usar este fragmento.

En este ejemplo, mostraremos un mensaje de "Potenciado por Stripe" con un enlace que abrirá una nueva ventana a Stripe.

/**
 * Output Text after your form(s).
 *
 * @link  https://wpforms.com/developers/wpforms_frontend_output_after/
 */
  
function wpf_dev_frontend_output_after_display_text( $form_data, $form ) {
      
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #999.
    if ( absint( $form_data[ 'id' ] ) !== 999 ) {
        return;
    } 
  
    // Run code or see example echo statement below.
    echo _e( '<p> Powered by <strong> <a href="https://stripe.com/" target="_blank">Stripe</a> </strong> | <a href="link-to-terms" target="_blank">Terms and Privacy!</a>.', 'plugin-domain' );
  
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );

¡Eso es todo! Has añadido con éxito una imagen después de tu formulario.

A continuación, ¿te gustaría cambiar la imagen de precarga que se muestra cuando haces clic en enviar? Echa un vistazo a nuestro artículo sobre cómo cambiar el icono de precarga al enviar.

Relacionado

Referencia de Acción: wpforms_frontend_output_after