Mostrar todos os campos na sua mensagem de confirmação

Gostaria de mostrar todos os campos do seu formulário preenchidos dentro da sua mensagem de confirmação? O WPForms inclui um campo de Pré-visualização de Entrada que permite aos utilizadores ver a sua entrada antes de ser submetida. No entanto, a Pré-visualização da entrada não exibe atualmente quaisquer imagens carregadas na submissão.

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

Criar o seu formulário

Primeiro, crie um novo formulário ou edite um já existente para aceder ao construtor de formulários. No nosso formulário, adicionámos o campo File Upload, que pode aceitar até três imagens.

Adicionando o código PHP ao seu site

Agora, está na altura de adicionar o nosso fragmento 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 a visar o ID do formulário 1107, e depois vamos mapear cada número de ID de campo para uma variável que criamos. Por exemplo, o campo Nome no nosso formulário é o campo ID 1. Então, criamos uma variável chamada $name e utilizou o sinal de igual (=) para definir esse valor para essa variável específica.

Só precisa de se certificar de que criou nomes de variáveis que fazem sentido para si e de os mapear para os seus IDs de campo.

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

Outro exemplo é o facto de estarmos a utilizar o campo Modern File Upload. Como sabemos que os utilizadores podem carregar mais do que uma imagem, dependendo das nossas definições, queremos certificar-nos de que percorremos todas as imagens carregadas para as apresentar na mensagem de confirmação.

Por isso, criámos um ficheiro PHP if para percorrer cada imagem que foi carregada, de modo a mostrar cada imagem dentro da mensagem de confirmação.

Estilizar a pré-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 na nossa mensagem de confirmação, mas ainda assim sejam exibidas de forma organizada.

Para adicionar CSS personalizadas 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;
}

Mostrando todos os campos na mensagem de confirmação

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

É isso mesmo! Criou com êxito uma forma de mostrar todos os campos na mensagem de confirmação!

Em seguida, gostaria de remover o estilo da mensagem de confirmação, por exemplo, remover a cor de fundo? Consulte o nosso artigo sobre como personalizar o estilo da caixa de mensagem de confirmação.

Relacionadas

Referência do filtro: wpforms_frontend_confirmation_message