Exibindo Todos os Campos em Sua Mensagem de Confirmação

Gostaria de exibir todos os campos preenchidos em sua mensagem de confirmação? O WPForms inclui um campo de Visualização de Entrada que permite aos usuários ver sua entrada antes de ser enviada. No entanto, a Visualização de Entrada não exibe atualmente nenhuma imagem carregada na submissão.

Neste tutorial, mostraremos como exibir todos os campos em sua mensagem de confirmação usando um trecho de código PHP personalizado.

Criando Seu Formulário

Primeiro, crie um novo formulário ou edite um existente para acessar o construtor de formulários. Em nosso formulário, adicionamos o campo Upload de Arquivo, que pode aceitar até três imagens.

Adicionando o Código PHP ao Seu Site

Agora, é hora de adicionar nosso trecho de código. Para obter ajuda sobre como e onde adicionar seus trechos de código ao seu site, por favor, revise este tutorial.

/**
 * Show all fields in the confirmation message
 *
 * @link https://wpforms.com/developers/how-to-show-all-fields-in-your-confirmation-message/
 */
 
function wpf_dev_frontend_confirmation_message( $message, $form_data, $fields, $entry_id ) {
     
    // Only run on my form with ID = 1107
    if ( absint( $form_data[ 'id' ] ) !== 1107 ) {
        return $message;
    }
 
    // Name form field - ID #1
    $name = $fields[ '1' ][ 'value' ];
 
    // Address form field - ID #2
    $address = $fields[ '2' ][ 'value' ];
 
    // Phone form field - ID #3
    $phone = $fields[ '3' ][ 'value' ];
 
    // Email form field - ID #4
    $email = $fields[ '4' ][ 'value' ];
 
    // Website URL form field - ID #5
    $website = $fields[ '5' ][ 'value' ];
 
    // Color Options form field - ID #6
    $color_options = $fields[ '6' ][ 'value' ];
 
    // Delivery Method form field - ID #7
    $delivery_method = $fields[ '7' ][ 'value' ];
 
    // Special Instructions form field - ID #9
    $special_instructions = $fields[ '9' ][ 'value' ];
 
    // Modern Upload form field - ID #8
    $field_id = 8;
          $images = '';
          if ( is_array( $fields[ $field_id ][ 'value_raw' ] ) ) {
             foreach ( $fields[ $field_id ][ 'value_raw' ] as $value_raw ) {
                $images .= '<div class="image_container"><img src="' . $value_raw[ 'value' ] . '" class="small"></div>';
             }
          }
 
 
    $message = "<p>This is the information we've captured from your submission <a href=\"http://google.com\" target=\"_blank\">Please visit this page for account information</a></p>.
    <ul>
    <li><strong>Name</strong>: $name </li>
    <li><strong>Address</strong>: $address </li>
    <li><strong>Phone Number</strong>: $phone </li>
    <li><strong>Email Address</strong>: $email </li>
    <li><strong>Website</strong>: $website </li>
    <li><strong>Color Options</strong>: $color_options </li>
    <li><strong>Delivery Method</strong>: $delivery_method </li>
    <li><strong>Any Special Instructions</strong>: $special_instructions </li>
    </ul>
    <p>The images you have uploaded are:";
 
    return $message . '<br>' . $images . '</p>';
     
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_frontend_confirmation_message', 10, 4 );

No código acima, estamos visando o ID do formulário 1107, e então vamos mapear cada número de ID de campo para uma variável que criamos. Por exemplo, o campo Nome em nosso formulário é o ID de campo 1. Então, criamos uma variável chamada $name e usamos o sinal de igual (=) para definir esse valor para essa variável específica.

Você só precisa garantir que criou nomes de variáveis que façam sentido para você e mapeá-los para seus IDs de campo.

Se precisar de ajuda para encontrar o ID do seu formulário ou campo, por favor, revise este tutorial.

Outro exemplo é que estamos usando o campo Moderno de Upload de Arquivo. Como sabemos que os usuários podem carregar mais de uma imagem dependendo de nossas configurações, queremos ter certeza de percorrer todas as imagens carregadas para exibi-las na mensagem de confirmação.

Então, criamos uma instrução if do PHP para percorrer cada imagem que foi carregada para exibir cada imagem dentro da mensagem de confirmação.

Estilizando a Visualização de Entrada com CSS Personalizado (opcional)

Esta etapa é completamente opcional, mas como adicionamos algum HTML às nossas imagens dentro da instrução if. Adicionaremos alguma estilização para garantir que as imagens não pareçam muito grandes em nossa mensagem de confirmação, mas ainda assim sejam exibidas de forma organizada.

Para adicionar CSS personalizado ao seu site, por favor, revise este tutorial.

.image_container {
    height: 250px;
    max-width: 25%;
    display: inline-block;
}
.image_container img {
    float: left;
    display: inline-block;
}
.small {
	max-width:150px;
	padding: 10px;
}

Exibindo Todos os Campos na Mensagem de Confirmação

É hora de juntar tudo. Após criar seu formulário e adicionar seu trecho de código personalizado, é hora de ver o que seu trecho de código adicionou para você. Teste seu formulário enviando algumas entradas para ver como todos os campos são exibidos em sua confirmação.

É isso! Você criou com sucesso uma maneira de mostrar todos os campos na mensagem de confirmação!

Em seguida, você gostaria de remover a formatação da mensagem de confirmação, como remover a cor de fundo? Dê uma olhada em nosso artigo sobre personalização da formatação da caixa de mensagem de confirmação.

Relacionado

Referência do filtro: wpforms_frontend_confirmation_message