Como Adicionar um Link de Impressão aos Seus Formulários

Quer permitir que os usuários imprimam seus formulários para preenchimento offline? Embora os navegadores ofereçam funcionalidade de impressão integrada por meio do menu Arquivo padrão, adicionar um botão ou link de impressão dedicado pode melhorar a experiência do usuário.

Este guia mostrará como adicionar uma opção de impressão diretamente aos seus formulários usando código HTML simples.

Configurando Seu Formulário

Primeiro, crie um formulário e adicione os campos desejados. Se precisar de ajuda para criar seu formulário, revise nosso guia sobre criação do seu primeiro formulário.

Adicionando o Link de Impressão

Em seguida, adicione um campo HTML ao seu formulário. Dentro deste campo, adicione o seguinte código:

<a href="#" onClick="window.print()">Print this page</a>

Este código cria um link de texto simples que aciona a caixa de diálogo de impressão do navegador quando clicado. O href="#" impede o redirecionamento da página, enquanto onClick="window.print()" chama a função de impressão do navegador.

Depois de salvar o formulário, você pode ver que logo acima do botão Enviar há um link para imprimir o formulário.

Estilizando seu Link de Impressão (Opcional)

Para que seu link de impressão se pareça mais com um botão, você pode adicionar estilos personalizados. Primeiro, modifique seu HTML para incluir uma classe CSS:

<a class="print_link" href="#" onClick="window.print()">Print this page</a>

Em seguida, adicione este CSS ao seu site. Se precisar de ajuda para adicionar código personalizado, revise nosso guia sobre adicionar código personalizado.

a.print_link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #B95D6A;
    color: #ffffff;
    border: 1px solid #b95d6a;
    transition: all 0.2s ease-in-out;
}

a.print_link:hover {
    background-color: #ffffff;
    color: #b95d6a;
}

Imprimindo Formulários de Várias Páginas

Se o seu formulário usa Quebras de Página, você precisará de CSS adicional para garantir que todas as páginas sejam impressas corretamente. Adicione este CSS ao seu tema:

@media print {
    /* print only styles here */
    #wpforms-form-1000 .wpforms-page {
        display: block !important;
    }
}

Lembre-se de substituir 1000 pelo ID do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte nosso guia sobre localização de IDs de formulário.

Para aplicar isso a todos os formulários, use:

@media print {
    /* print only styles here */
    .wpforms-page {
        display: block !important;
    }
}

Você também pode usar esses estilos de impressão para ocultar elementos como a barra lateral, o rodapé ou o cabeçalho ao imprimir.

E é tudo o que você precisa! Gostaria de saber como usar shortcodes dentro desses campos de formulário HTML? Confira nosso tutorial sobre Como Exibir Shortcodes Dentro do Campo HTML.