Exibir uma Imagem Após o seu Formulário

Gostaria de exibir uma imagem após o seu formulário? Com um pequeno trecho de PHP, pode facilmente adicionar a sua imagem, um vídeo ou uma mensagem logo abaixo do botão Enviar.

Neste tutorial, vamos guiá-lo através dos passos sobre como conseguir isto.

Criação do formulário

Primeiro, terá de criar um novo formulário ou editar um existente para aceder ao construtor de formulários. No construtor de formulários, prossiga e adicione os campos de que necessita ao formulário.

Adicionar o Trecho

Este trecho de código pode ser usado para adicionar qualquer coisa abaixo do seu formulário. Pode adicionar uma imagem, um vídeo ou apenas texto. Para adicionar a nossa imagem após o botão Enviar, terá de copiar e colar este trecho no seu site.

Se precisar de ajuda para adicionar trechos ao seu site, por favor, reveja este tutorial.

No nosso exemplo, estamos a limitar este trecho apenas ao ID do formulário 999. Terá de substituir este ID pelo ID do formulário que deseja direcionar. Se não tem a certeza de qual é o ID do seu formulário e precisa de ajuda para o encontrar, por favor, veja 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 );

O código acima src="'.get_template_directory_uri().'/images/ procura um diretório (uma pasta) no seu servidor chamado images dentro do seu diretório de tema. Portanto, a imagem precisa de estar na pasta images no seu servidor.

Alternativamente, pode simplesmente carregar uma imagem para a biblioteca de mídia do seu site e atualizar o valor após src= com o URL da imagem. Veja como o trecho atualizado ficará se usar uma imagem da biblioteca de mídia do 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 );

Perguntas Frequentes

Estas são as respostas a algumas das principais perguntas que vemos sobre como adicionar imagens após o botão de envio no WPForms.

P: Como posso exibir texto com um link após o formulário?

R: Se apenas quiser exibir algum texto com um link, pode usar este trecho.

Neste exemplo, exibiremos uma mensagem "Powered by Stripe" com um link que abrirá uma nova janela para 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 );

É tudo! Adicionou com sucesso uma imagem após o seu formulário.

Em seguida, gostaria de alterar a imagem de pré-carregamento que aparece quando clica em enviar? Dê uma vista de olhos ao nosso artigo sobre como alterar o ícone de pré-carregamento ao enviar.

Relacionado

Referência de Ação: wpforms_frontend_output_after