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

Quer permitir que os utilizadores imprimam os seus formulários para preenchimento offline? Embora os navegadores ofereçam funcionalidade de impressão integrada através do menu Ficheiro predefinido, adicionar um botão ou link de impressão dedicado pode melhorar a experiência do utilizador.

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

Configurar o Seu Formulário

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

Adicionar 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 guardar o formulário, pode ver que, logo acima do botão Enviar, existe um link para imprimir o formulário.

Estilizar o seu Link de Impressão (Opcional)

Para fazer com que o seu link de impressão se pareça mais com um botão, pode adicionar estilo personalizado. Primeiro, modifique o 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 CSS personalizado, por favor, reveja o 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;
}

Imprimir Formulários de Várias Páginas

Se o seu formulário utiliza Quebras de Página, 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, por favor, consulte o nosso guia sobre localizar IDs de formulário.

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

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

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

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