M14 — Form

Painel lateral reutilizável que apresenta um formulário de contacto ao visitante. Abre-se a partir de qualquer botão da página que aponte para um formulário, deslizando da direita para o centro com o resto da página escurecido. O visitante preenche os campos, aceita os termos de privacidade, submete e recebe uma confirmação visual imediata.

Campo	Valor
Módulo	M14 — Form
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	Ver tarefa
Criada	2026-04-23
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →</a>

Variantes por tema (matrizes de variantes)

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O módulo Form é o formulário universal do site. Aparece como um painel que desliza da direita para o centro do ecrã, com o conteúdo da página atual a ficar escurecido por trás. Serve para qualquer situação em que o hotel quer recolher um contacto ou uma mensagem do visitante — pedidos de informação sobre quartos, reservas de eventos, consultas para casamentos, pedidos do spa, envio de candidaturas espontâneas ou qualquer outro formulário que o hotel precise.

O visitante abre o formulário clicando num botão numa página (por exemplo, “Contactar-nos”, “Pedir orçamento”, “Saber mais”). O painel abre, apresenta o título do formulário, uma pequena descrição e os campos a preencher. O visitante preenche Nome, Email e Mensagem, aceita a política de privacidade e submete. Imediatamente depois vê uma confirmação de que a mensagem foi enviada (ou, em caso de problema técnico, uma mensagem de erro com a possibilidade de tentar de novo sem perder o que já escreveu).

Ao fechar o painel (pelo botão ”×”, por clicar fora, ou pela tecla Escape), o visitante regressa à página onde estava. A mensagem é enviada para o email do hotel configurado no backoffice e, opcionalmente, o visitante recebe também um email de confirmação.

Este mesmo painel é partilhado com o módulo de Newsletter (M33), que usa a mesma mecânica de abertura, os mesmos estados visuais e a mesma experiência — apenas com menos campos. Significa que o visitante encontra uma experiência consistente em todos os pontos de contacto do site.

Variantes

O módulo apresenta-se em quatro estados visuais distintos, que o visitante vê em sequência durante a utilização.

Variante 1 — Formulário (estado inicial)

Como visitante, quero preencher um formulário claro e rápido, para enviar uma mensagem ao hotel sem sair da página em que estou.

Elementos visíveis:

Botão para fechar (ícone ”×”) no canto superior direito do painel
Título principal (exemplo: “Entre em contacto”)
Pequeno texto de descrição por baixo do título
Campo “Nome” (caixa de texto de uma linha)
Campo “Email” (caixa de texto de uma linha)
Campo “Mensagem” (caixa de texto maior, com várias linhas, e um contador de caracteres no canto inferior direito — exemplo: “0/100”)
Caixa de seleção de aceitação da política de privacidade, com texto legal ao lado (incluindo uma ligação para a página da Política de Privacidade)
Botão de submissão (exemplo: “SUBMETER”) no final do painel

Critérios de Aceitação:

O painel aparece a deslizar da direita para o centro do ecrã
O resto da página fica escurecido e com ligeiro desfoque, mas continua visível por trás do painel
O título, a descrição, os rótulos dos campos e o texto do botão estão na língua da página (PT ou EN)
Todos os campos (Nome, Email, Mensagem, aceitação de política) são obrigatórios
O contador de caracteres da mensagem atualiza-se à medida que o visitante escreve (exemplo: “25/100”)
Quando o visitante atinge o limite de caracteres, não é possível escrever mais
Ao clicar na ligação dentro do texto de política de privacidade, abre-se a página da Política de Privacidade do hotel (numa nova janela ou na mesma janela, consoante o comportamento habitual do browser)

Variante 2 — Formulário com erros de validação

Como visitante, quero saber exatamente o que falta preencher ou corrigir, para poder completar o formulário sem frustração.

Elementos visíveis:

Os mesmos elementos da Variante 1
Abaixo de cada campo com erro aparece uma mensagem curta e clara (por exemplo: “Este campo é obrigatório” ou “Por favor indique um email válido”)
Os campos com erro destacam-se visualmente (a cor da borda muda para indicar o problema)
A caixa de aceitação da política também mostra mensagem de erro se não estiver marcada

Critérios de Aceitação:

Quando o visitante tenta submeter sem preencher todos os campos obrigatórios, os erros aparecem junto dos campos em falta
Se o email não for válido (ex: falta o ”@”), aparece uma mensagem específica sobre o email
Se a aceitação da política não estiver marcada, aparece mensagem específica junto da caixa
O visitante não perde o que já escreveu nos outros campos
Assim que o visitante começa a corrigir o campo, a mensagem de erro desaparece desse campo
As mensagens de erro são lidas por leitores de ecrã

Variante 3 — Mensagem de sucesso (após submissão bem-sucedida)

Como visitante, quero receber uma confirmação imediata de que a minha mensagem foi recebida, para ter a certeza de que o hotel vai receber o meu pedido.

Elementos visíveis:

Botão para fechar (ícone ”×”) no canto superior direito do painel
Ícone decorativo de envelope com marca de verificação (✓)
Título de confirmação (exemplo: “Mensagem enviada!”)
Pequeno texto de descrição a confirmar que o hotel entrará em contacto em breve
Botão para fechar o painel (exemplo: “FECHAR” ou “JOIN THE CLUB”)

Critérios de Aceitação:

A mensagem de sucesso substitui o formulário no mesmo painel (sem abrir outra janela)
O ícone de envelope com marca de verificação é visível
O título e a descrição de sucesso estão na língua da página (PT ou EN)
Ao clicar no botão de fechar, o painel fecha e o visitante volta à página onde estava
O email de notificação chega ao endereço do hotel configurado no backoffice
Se o hotel tiver ativado o envio de confirmação, o visitante recebe também um email com a confirmação da sua submissão

Variante 4 — Mensagem de erro (após falha de submissão)

Como visitante, quero saber se algo correu mal no envio, para poder tentar de novo sem perder o que já escrevi.

Elementos visíveis:

Botão para fechar (ícone ”×”) no canto superior direito do painel
Ícone decorativo de envelope com indicação de problema (cruz ou aviso)
Título de erro (exemplo: “Algo correu mal”)
Pequeno texto a explicar que houve um problema técnico e que o visitante pode tentar de novo
Botão “TENTAR NOVAMENTE” que devolve o visitante ao formulário com os dados já preenchidos

Critérios de Aceitação:

A mensagem de erro substitui o formulário no mesmo painel
O título e a descrição de erro estão na língua da página (PT ou EN)
Ao clicar em “TENTAR NOVAMENTE”, o visitante vê de novo o formulário com os dados que tinha preenchido — nada se perde
O erro aparece apenas em caso de falha técnica real (problema de rede, servidor temporariamente indisponível) — erros de validação dos campos mostram-se na Variante 2, não aqui

Variante 5 — Botão de abertura (nas páginas do site)

Como editor, quero poder colocar um botão em qualquer página que abra um formulário específico, para que o visitante possa contactar o hotel a partir do contexto onde está.

Elementos visíveis:

Botão (em qualquer secção da página — numa banner, num bloco de texto, num cartão, ou como botão fixo no canto do ecrã)
Texto do botão definido pelo editor (exemplo: “Contactar-nos”, “Pedir orçamento”, “Saber mais”)

Critérios de Aceitação:

Ao clicar no botão, o painel do formulário abre com o formulário correspondente
O editor pode escolher qual o formulário (Formulário de Contacto, Formulário de Eventos, etc.) que cada botão abre
O mesmo botão pode aparecer várias vezes na página apontando para o mesmo formulário ou para formulários diferentes
Se o visitante partilhar uma ligação com ?form=nome-do-formulario no fim, o painel abre automaticamente ao carregar a página

Interações do Utilizador

Este módulo é interativo. O visitante pode abrir e fechar o painel, preencher o formulário, submeter e navegar entre os estados visuais.

Interação	Descrição
Clicar num botão da página que aponta para o formulário	Abre o painel, animado a deslizar da direita
Clicar no botão ”×” (fechar)	Fecha o painel com animação inversa e volta à página
Clicar fora do painel (zona escurecida)	Fecha o painel
Premir a tecla Escape	Fecha o painel
Premir a tecla Tab	Percorre pelos campos do formulário pela ordem em que aparecem
Clicar num campo de texto	Ativa o campo e permite escrever
Escrever no campo Mensagem	O contador de caracteres atualiza-se em tempo real
Marcar/desmarcar a caixa de política de privacidade	Ativa/desativa a aceitação necessária para submeter
Clicar no botão de submeter	Valida o formulário; se tudo estiver correto envia a mensagem; se houver problemas mostra os erros
Clicar em “TENTAR NOVAMENTE” no estado de erro	Volta ao formulário com os dados preservados
Clicar no botão de fechar no estado de sucesso	Fecha o painel e volta à página
Partilhar/abrir uma ligação com `?form=nome`	O painel abre automaticamente assim que a página carrega

Elementos

Conteúdos geridos no backoffice para cada formulário. O mesmo formulário pode ser aberto por vários botões em várias páginas; basta criar o formulário uma vez e ligá-lo aos botões desejados.

Elemento	Tipo	Obrigatório	Descrição
Título	Título	Sim	Título principal no topo do painel. O editor escolhe o nível de cabeçalho (H1 a H6)
Descrição	Texto	Não	Pequeno texto por baixo do título a explicar o propósito do formulário
Rótulo do campo Nome	Texto	Sim	Texto que aparece por cima do campo Nome (exemplo: “Nome”, “Seu nome”, “Name”)
Rótulo do campo Email	Texto	Sim	Texto que aparece por cima do campo Email
Rótulo do campo Mensagem	Texto	Sim	Texto que aparece por cima do campo Mensagem
Rótulo do botão	Texto	Sim	Texto do botão de submissão (exemplo: “SUBMETER”, “ENVIAR”, “SUBMIT”)
Texto de política de privacidade	Texto com formatação (editor rico)	Sim	Texto que aparece ao lado da caixa de seleção. Pode conter ligações (exemplo: para a página de Política de Privacidade)
Email de notificação do hotel	Texto	Sim	Endereço de email para onde chegam as submissões do formulário (ex: reservas@hotel.com)
Título de sucesso	Texto	Sim	Título a apresentar quando a mensagem é enviada com êxito (exemplo: “Mensagem enviada!”)
Descrição de sucesso	Texto	Sim	Pequeno texto de confirmação (exemplo: “Obrigado pelo seu contacto. Respondemos em breve.”)
Título de erro	Texto	Sim	Título a apresentar quando ocorre um problema técnico (exemplo: “Algo correu mal”)
Descrição de erro	Texto	Sim	Pequeno texto a explicar o erro (exemplo: “Não foi possível enviar a mensagem. Por favor, tente de novo.”)
Mensagem de campo obrigatório	Texto	Sim	Mensagem apresentada quando um campo obrigatório está vazio (exemplo: “Este campo é obrigatório”)
Mensagem de email inválido	Texto	Sim	Mensagem apresentada quando o email não tem formato válido (exemplo: “Indique um email válido”)
Mensagem de política não aceite	Texto	Sim	Mensagem apresentada quando a caixa da política não está marcada (exemplo: “Tem de aceitar a política de privacidade”)

Nota: Todos os textos visíveis ao visitante (títulos, descrições, rótulos, mensagens de erro, mensagens de sucesso) são geridos no backoffice e podem ser traduzidos por idioma (PT e EN). O hotel define uma vez por formulário e o módulo usa o texto correspondente à língua da página. Os campos Nome, Email e Mensagem são fixos — o hotel não adiciona nem remove campos no backoffice; a estrutura do formulário é standard para garantir consistência e segurança em todos os pontos de contacto do site.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento do formulário:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar formulário	Ativo / Inativo	Ativo	Se inativo, qualquer botão que aponte para este formulário deixa de o abrir
Limite de caracteres da mensagem	Número (entre 50 e 500)	100	Define o máximo de caracteres que o visitante pode escrever no campo Mensagem
Enviar email de confirmação ao visitante	Sim / Não	Não	Se “Sim”, o visitante recebe um email de confirmação automático após a submissão. Se “Não”, apenas o hotel recebe a notificação

Nota: O limite de caracteres da mensagem controla apenas o campo Mensagem. Nome e Email têm limites fixos adequados à sua natureza (Nome até 100 caracteres, Email até 255). O texto “0/100” que aparece no canto do campo Mensagem atualiza-se automaticamente em função do valor configurado nesta opção.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Painel do formulário	Desliza da direita e ocupa aproximadamente 1/3 da largura do ecrã (cerca de 360px de largura). O resto da página fica visível e escurecido por trás	Ocupa toda a largura e altura do ecrã, cobrindo completamente a página por baixo
Título, descrição e campos	Alinhados à esquerda com espaçamento confortável dentro do painel	Alinhados à esquerda, mas com espaçamento ajustado ao ecrã pequeno e campos mais altos para facilitar o toque
Botão de submeter	Largura automática, ajustada ao texto	Ocupa toda a largura do painel para facilitar o toque
Caixa de política de privacidade	Caixa de seleção à esquerda, texto à direita com quebra de linha automática	Caixa à esquerda, texto à direita; se o texto for longo quebra para várias linhas
Fecho do painel	O resto da página continua visível e escurecido; clicar fora do painel fecha-o	O painel cobre toda a página; o botão ”×” e a tecla Escape são as formas principais de fechar

O módulo mantém a mesma estrutura (painel, título, campos, botões) em todos os tamanhos de ecrã. Ajusta-se apenas em dimensões, espaçamento e tamanho dos elementos para garantir uma boa utilização tanto no computador como no telemóvel.

Estados Visuais

Estado	Descrição
Fechado (inicial)	O painel não é visível. A página normal é o que o visitante vê
A abrir	O painel desliza da direita para o centro com uma animação suave (cerca de 0,3 segundos)
Aberto — formulário	O painel está totalmente visível com o formulário pronto a preencher
Ao passar o rato num campo	O campo fica ligeiramente destacado para indicar que pode ser clicado
Campo selecionado	O campo onde o visitante está a escrever destaca-se com uma borda mais visível
Campo com erro	O campo tem uma borda de cor diferente (sinalizando erro) e aparece uma mensagem curta por baixo
A submeter	O botão de submissão fica bloqueado e mostra indicação de carregamento enquanto a mensagem está a ser enviada, para evitar submissões duplicadas
Aberto — sucesso	O formulário é substituído pela mensagem de confirmação com ícone de envelope com marca de verificação
Aberto — erro	O formulário é substituído pela mensagem de erro com ícone de envelope com cruz/aviso e botão “Tentar novamente”
Ao passar o rato no botão de submeter	O botão muda ligeiramente de tom para indicar que é clicável
Ao passar o rato no botão ”×“	O ícone muda ligeiramente de tom para indicar que é clicável
A fechar	O painel desliza de volta para a direita com a mesma animação (cerca de 0,3 segundos)
Ao carregar (dados em busca)	Enquanto o formulário carrega do backoffice, o painel mostra uma pequena roda de carregamento no centro

Acessibilidade

O painel pode ser utilizado apenas com o teclado: tecla Tab para navegar entre os campos, tecla Enter para submeter, tecla Espaço para marcar a caixa de política, tecla Escape para fechar.
Quando o painel está aberto, o teclado fica “preso” dentro do painel — premir Tab nunca leva o visitante para elementos escondidos por trás do painel.
Ao abrir o painel, o primeiro elemento interativo fica automaticamente selecionado pelo teclado.
Ao fechar o painel, o teclado volta para o botão que abriu o painel, para que o visitante retome a leitura da página no sítio certo.
O painel é anunciado pelos leitores de ecrã como uma janela (dialog) — o leitor lê o título do formulário ao abrir.
Cada campo do formulário tem o seu rótulo associado explicitamente para leitores de ecrã.
As mensagens de erro junto de cada campo são anunciadas pelos leitores de ecrã assim que aparecem.
A mensagem de sucesso e a mensagem de erro são anunciadas de forma clara pelos leitores de ecrã.
O contador de caracteres da mensagem é acessível a leitores de ecrã (exemplo: “25 de 100 caracteres utilizados”).
O botão de fechar ”×” tem uma descrição para leitores de ecrã (“Fechar formulário”).
O ícone de envelope nas mensagens de sucesso/erro é puramente decorativo — o significado é transmitido pelo título e descrição.
O contraste entre texto, campos e fundo cumpre os requisitos de acessibilidade visual em todos os temas (mínimo 4.5:1).
Respeita a preferência do utilizador por movimento reduzido — quando esta opção está ativa no sistema operativo, a animação de abrir/fechar é desativada e o painel aparece e desaparece de forma imediata.
Enquanto o painel está aberto, a página por trás fica bloqueada (não rola), para que o visitante possa usar o teclado dentro do painel sem interferências.

Temas

O módulo adapta-se visualmente a cada hotel: cor de fundo do painel, cor do título, cor dos campos, cor do botão de submeter e tipografia seguem a identidade visual do hotel.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Notas por tema (com base no Figma):

Savoy Palace — painel em bege/creme, título em violeta profundo, botão de submeter em dourado escuro com texto branco, campos com fundo muito claro
Saccharum — painel em verde natural suave, título em verde escuro, botão de submeter em verde terroso, campos com fundo branco
Calheta Beach — painel em areia clara, título em coral, botão de submeter em vermelho/coral com texto branco
Hotel Next — painel em azul muito claro, título em azul escuro, botão de submeter em azul profundo com texto branco
Savoy Signature — painel em azul-marinho muito escuro, título e textos em bege/creme, botão de submeter em dourado claro com texto escuro

O esquema estrutural (painel lateral, título, campos, caixa de política, botão de submeter, mensagens de sucesso e erro) mantém-se consistente entre todos os hotéis — muda apenas a paleta de cores e a tipografia.

Changelog

Data	Estado	Descrição
2026-04-23	Rascunho	Versão inicial criada a partir do Figma
2026-04-23	Publicada	Publicada no Docmost (nova página)