Exibindo 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, você pode facilmente adicionar sua imagem, um vídeo ou uma mensagem logo abaixo do botão Enviar.

Neste tutorial, vamos guiá-lo através das etapas de como conseguir isso.

Criando o formulário

Primeiro, você precisará criar um novo formulário ou editar um existente para acessar o construtor de formulários. No construtor de formulários, prossiga e adicione os campos que você precisa ao formulário.

Adicionando o Snippet

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

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

Em nosso exemplo, estamos limitando este trecho apenas ao ID do formulário 999. Você precisará substituir este ID pelo ID do formulário que deseja direcionar. Se você não tem certeza de qual é o ID do seu formulário e precisa de ajuda para encontrá-lo, por favor, confira 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 por um diretório (uma pasta) em seu servidor chamado images dentro do diretório do seu tema. Portanto, a imagem precisa estar na pasta images do seu servidor.

Alternativamente, você pode simplesmente fazer o upload de 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 você 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 para 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 você quiser apenas 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 o 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 );

Pronto! Você adicionou com sucesso uma imagem após o seu formulário.

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

Relacionado

Referência de Ação: wpforms_frontend_output_after