Exibindo uma Imagem Ap uevo do seu Formul uevo

Gostaria de exibir uma imagem ap uevo do seu formul uevo? Com um pequeno trecho de PHP, voc uevo pode facilmente adicionar sua imagem, um v uevoeo ou uma mensagem logo abaixo do bot uevo de Enviar.

Neste tutorial, vamos gui uevo-lo pelas etapas de como conseguir isso.

Criando o formul uevo

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

Adicionando o Snippet

Este trecho de c uevoigo pode ser usado para adicionar qualquer coisa abaixo do seu formul uevo. Voc uevo pode adicionar uma imagem, um v uevoeo ou apenas texto. Para adicionar nossa imagem ap uevo do bot uevo de Enviar, voc uevo precisar uevo copiar e colar este trecho em seu site.

Se voc uevo 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 uevoo 999. Voc uevo precisar uevo substituir este ID pelo ID do formul uevoo que deseja segmentar. Se voc uevo n uevoo tem certeza de qual uevo o ID do seu formul uevoo e precisa de ajuda para encontr uevo-lo, consulte 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 uevoigo acima src="'.get_template_directory_uri().'/images/ procura por um diret uevoio (uma pasta) em seu servidor chamada images dentro do diret uevoio do seu tema. Portanto, a imagem precisa estar na pasta images em 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 snippet 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 recebemos 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ê deseja apenas exibir algum texto com um link, pode usar este snippet.

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