Exibição de todos os campos em sua mensagem de confirmação

Gostaria de mostrar todos os campos do formulário preenchidos em sua mensagem de confirmação? O WPForms inclui um campo Entry Preview que permite que os usuários visualizem suas entradas antes de serem enviadas. No entanto, a visualização da entrada não exibe atualmente nenhuma imagem carregada no envio.

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

Criando seu formulário

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

Como adicionar o código PHP ao seu site

Agora, é hora de adicionar nosso snippet de código. Para obter ajuda sobre como e onde adicionar os snippets de código ao seu site, consulte 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 direcionando o ID do formulário 1107, e, em seguida, mapearemos cada número de ID de campo para uma variável que criaremos. Por exemplo, o campo Nome em nosso formulário é o ID de campo 1. Portanto, criamos uma variável chamada $name e usou o sinal de igual (=) para definir esse valor para essa variável específica.

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

Se precisar de ajuda para encontrar o ID do formulário ou do campo, consulte este tutorial.

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

Então, criamos um arquivo PHP if para percorrer cada imagem que foi carregada a fim de exibir cada imagem dentro da mensagem de confirmação.

Estilização da visualização de entrada com CSS personalizado (opcional)

Esta etapa é totalmente opcional, mas porque adicionamos algum HTML às nossas imagens dentro da instrução if. Adicionaremos alguns estilos 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, consulte 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;
}

Exibição de todos os campos na mensagem de confirmação

Agora é hora de juntar tudo. Depois de criar o formulário e adicionar o snippet personalizado, é hora de ver o que o snippet 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 aí! Você criou com sucesso uma maneira de mostrar todos os campos na mensagem de confirmação!

Em seguida, você gostaria de remover o estilo da mensagem de confirmação, como, por exemplo, remover a cor do plano de fundo? Dê uma olhada em nosso artigo sobre como personalizar o estilo da caixa de mensagem de confirmação.

Relacionado

Referência do filtro: wpforms_frontend_confirmation_message