Mostrar Todos os Campos na sua Mensagem de Confirmação

Gostaria de mostrar todos os campos preenchidos da sua ficha nas suas mensagens 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 de Entrada não exibe atualmente quaisquer imagens carregadas na submissão.

Neste tutorial, vamos mostrar-lhe como exibir todos os campos na sua mensagem de confirmação usando um trecho de código PHP personalizado.

Criar o Seu Formulário

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

Adicionar o Código PHP ao Seu Site

Agora, é hora de adicionar o nosso trecho de código. Para obter ajuda sobre como e onde adicionar os seus trechos de código ao seu site, por favor, reveja 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 direcionar 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 ID de campo 1. Assim, criámos uma variável chamada $name e usamos o sinal de igual (=) para definir esse valor para essa variável em particular.

Precisa apenas de se certificar de que criou nomes de variáveis que façam sentido para si e mapeá-los para os seus IDs de campo.

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

Outro exemplo é que estamos a usar o campo Moderno de Carregamento de Ficheiro. Como sabemos que os utilizadores podem carregar mais do que uma imagem dependendo das nossas configurações, queremos ter a certeza de que percorremos todas as imagens carregadas para as exibir na mensagem de confirmação.

Assim, criámos uma instrução if PHP para percorrer cada imagem que foi carregada, a fim de exibir cada imagem dentro da mensagem de confirmação.

Estilizar a Pré-visualização de Entrada com CSS Personalizado (opcional)

Este passo é completamente opcional, mas como adicionámos algum HTML às nossas imagens dentro da instrução if. Adicionaremos algum estilo para garantir que as imagens não pareçam demasiado grandes na nossa mensagem de confirmação, mas ainda assim sejam exibidas de forma organizada.

Para adicionar CSS personalizado ao seu site, por favor, reveja 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;
}

Mostrar Todos os Campos na Mensagem de Confirmação

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

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

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

Relacionado

Referência do filtro: wpforms_frontend_confirmation_message