### [Mostrar una imagen después de tu formulario](https://wpforms.com/developers/how-to-display-an-image-after-your-form/)
**Publicado:** 11 de junio de 2020
**Autor:** David Ozokoye
**Extracto:** Este tutorial te guiará a través de los pasos sobre cómo mostrar una imagen después de tu formulario.
**Contenido:**
¿Te gustaría mostrar una imagen después de tu formulario? Con un pequeño fragmento de PHP, puedes agregar fácilmente tu imagen, un video 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.
---
## Creando el formulario
Primero, necesitarás [crear un nuevo formulario](https://wpforms.com/docs/creating-first-form/) o editar uno existente para acceder al constructor de formularios. En el constructor de formularios, agrega los campos que necesites al formulario.
## Agregando el fragmento
Este fragmento de código se puede usar para agregar cualquier cosa debajo de tu formulario. Puedes agregar una imagen, un video o solo texto. Para agregar nuestra imagen después del botón de enviar, deberás copiar y pegar este fragmento en tu sitio.
Si necesitas ayuda para agregar fragmentos a tu sitio, [por favor revisa este tutorial.](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms")
En nuestro ejemplo, estamos limitando este fragmento solo al ID del formulario **999**. Deberá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](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Cómo localizar el ID del formulario y el ID del campo").
```
/**
* Muestra algo después de tus formularios.
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Opcional, puedes limitar a formularios específicos. Abajo, restringimos la salida a
// formulario #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Ejecuta el código o ve la declaración echo de ejemplo a continuación.
echo '';
}
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 la biblioteca de medios de tu 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.
```
/**
* Muestra algo después de tus formularios.
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Opcional, puedes limitar a formularios específicos. Abajo, restringimos la salida a
// formulario #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Ejecuta el código o ve la declaración echo de ejemplo a continuación.
echo '';
}
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 agregar 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.
```
/**
* Muestra texto después de tus formularios.
*
* @link https://wpforms.com/developers/wpforms_frontend_output_after/
*/
function wpf_dev_frontend_output_after_display_text( $form_data, $form ) {
// Opcional, puedes limitar a formularios específicos. Abajo, restringimos la salida a
// formulario #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Ejecuta el código o ve la declaración echo de ejemplo a continuación.
echo _e( ' Potenciado por Stripe | ¡Términos y Privacidad!.', 'plugin-domain' );
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );
```
¡Eso es todo! Has agregado 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](https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/ "Cómo cambiar el icono de precarga al enviar").
## Relacionado
Referencia de acción: [wpforms\_frontend\_output\_after](https://wpforms.com/developers/wpforms_frontend_output_after/ "Usando wpforms_frontend_output_after con WPForms")
**Categorías:** Tutoriales
**Etiquetas:** PHP
---